Summernote: Image Resizing

Das direkte Einbinden als Base64 Data-URL ist echt praktisch, aber man will ja nicht, dass die Benutzer nun endlos riesige Bilder darüber einbinden. Deswegen ist es eine gute Idee, die Bilder beim Einfügen auch gleich zu verkleinern. Das ist zum Glück mit dem Canvas-Element sehr einfach.

Die Callback-Function:

let onImageUploadFunc = function (elementId) {
return function(image) {
resizeImage(image[0], elementId);
}
};

function resizeImage(file, elementId) {
let image = new Image();
let url = window.URL ? window.URL : window.webkitURL;

image.src = url.createObjectURL(file);
image.onload = function (e) {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");

let width = 600;
let factor = image.width / width;
let height = image.height / factor;

if(image.height > image.width) {
height = 300;
factor = image.height / height;
width = image.width / factor;
}

canvas.width = width;
canvas.height = height;

ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
$(elementId).summernote('editor.insertImage', canvas.toDataURL('jpeg', 0.7));
};
}


Verwendung:

$('#editSolution').summernote(
{callbacks:{onImageUpload: onImageUploadFunc('#editSolution')}}
);


bbcode-image
User annonyme 2020-04-20 14:43

write comment:
Three + = 9

Möchtest Du AdSense-Werbung erlauben und mir damit helfen die laufenden Kosten des Blogs tragen zu können?