diff --git a/apps/web/package.json b/apps/web/package.json index 85ab35d50..2eb358167 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -11,6 +11,7 @@ "@tinymce/tinymce-react": "^3.10.2", "clipboard": "^2.0.6", "cogo-toast": "^4.2.3", + "compressorjs": "^1.0.7", "dayjs": "^1.10.4", "emotion-theming": "^10.0.19", "eventsource": "^1.0.7", diff --git a/apps/web/src/components/editor/plugins/quickimage/plugin.js b/apps/web/src/components/editor/plugins/quickimage/plugin.js index d78004206..7b55395d8 100644 --- a/apps/web/src/components/editor/plugins/quickimage/plugin.js +++ b/apps/web/src/components/editor/plugins/quickimage/plugin.js @@ -1,4 +1,5 @@ import tinymce from "tinymce/tinymce"; +import Compressor from "compressorjs"; (function () { tinymce.PluginManager.add("quickimage", function (editor, url) { @@ -14,24 +15,25 @@ import tinymce from "tinymce/tinymce"; input.onchange = function () { var file = this.files[0]; if (!file) return null; - var reader = new FileReader(); - reader.onload = function (e) { - minifyImg( - reader.result, - 600, - (r) => { - var content = ``; - editor.insertContent(content); - reader.onerror = null; - }, - 1 - ); - reader.onerror = function () { - reader.onerror = null; - }; - }; - reader.readAsDataURL(file); + new Compressor(file, { + quality: 0.6, + mimeType: "image/jpeg", + width: 1024, + success(result) { + var reader = new FileReader(); + reader.readAsDataURL(result); + + reader.onloadend = function () { + var base64data = reader.result; + var content = ``; + editor.insertContent(content); + }; + }, + error(err) { + console.error(err.message); + }, + }); }; input.dispatchEvent(new MouseEvent("click")); } @@ -42,29 +44,6 @@ import tinymce from "tinymce/tinymce"; onAction: _onAction, }); - var minifyImg = function (dataUrl, newWidth, resolve, quality) { - var image, oldWidth, oldHeight, newHeight, canvas, ctx, newDataUrl; - new Promise(function (resolve) { - image = new Image(); - image.src = dataUrl; - resolve(); - }).then(() => { - oldWidth = image.width; - oldHeight = image.height; - - newHeight = Math.floor((oldHeight / oldWidth) * newWidth); - - canvas = document.createElement("canvas"); - canvas.width = newWidth; - canvas.height = newHeight; - - ctx = canvas.getContext("2d"); - ctx.drawImage(image, 0, 0, newWidth, newHeight); - newDataUrl = canvas.toDataURL(undefined, quality); - resolve(newDataUrl); - }); - }; - editor.addCommand("InsertImage", function (ui, value) { _onAction(); }); diff --git a/apps/web/yarn.lock b/apps/web/yarn.lock index 038525c3b..365b63861 100644 --- a/apps/web/yarn.lock +++ b/apps/web/yarn.lock @@ -3136,6 +3136,11 @@ bluebird@^3.5.5: resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f" integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg== +blueimp-canvas-to-blob@^3.28.0: + version "3.28.0" + resolved "https://registry.yarnpkg.com/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.28.0.tgz#c8ab4dc6bb08774a7f273798cdf94b0776adf6c8" + integrity sha512-5q+YHzgGsuHQ01iouGgJaPJXod2AzTxJXmVv90PpGrRxU7G7IqgPqWXz+PBmt3520jKKi6irWbNV87DicEa7wg== + bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9: version "4.11.9" resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828" @@ -3848,6 +3853,14 @@ compression@^1.7.4: safe-buffer "5.1.2" vary "~1.1.2" +compressorjs@^1.0.7: + version "1.0.7" + resolved "https://registry.yarnpkg.com/compressorjs/-/compressorjs-1.0.7.tgz#67cd0b3b9ac97540515b22b334dc32eb92b730b1" + integrity sha512-ca+H8CGrn0LG103//VQmXBbNdvzvHiW26LGdWncp4RmLNbNQjaaFWIUxMN9++hbhGobLtofkHoxzzXGisNyD3w== + dependencies: + blueimp-canvas-to-blob "^3.28.0" + is-blob "^2.1.0" + concat-map@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" @@ -6545,6 +6558,11 @@ is-binary-path@~2.1.0: dependencies: binary-extensions "^2.0.0" +is-blob@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/is-blob/-/is-blob-2.1.0.tgz#e36cd82c90653f1e1b930f11baf9c64216a05385" + integrity sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw== + is-buffer@^1.1.5: version "1.1.6" resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"