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"