I have written an image upload script for tinymce, but was wondering if it could be optimized in any way? It seems to work pretty well, but I believe there is room for improvements. How it works is pretty simple, png, jpeg, jpg, bmp are all resized to 800px x 800px if they have larger dimensions. I found gifs were more problematic to work with, so instead of resizing them I thought it would be best to limit the file size which could be uploaded instead, then allow the original file to be uploaded.
tinymce.init({
selector: 'textarea#comment',
plugins: 'media preview link emoticons help insertdatetime table anchor wordcount visualblocks image code',
toolbar: 'undo redo | media | image | blocks | ' + 'bold italic backcolor forecolor | alignleft aligncenter ' + 'alignright alignjustify | outdent indent removeformat',
content_css: '/css/styling.css',
media_live_embeds: true,
media_poster: false,
menu: {
file: { title: 'File', items: 'print' },
edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall' },
view: { title: 'View', items: 'visualaid visualblocks preview wordcount code' },
insert: { title: 'Insert', items: 'table inserttable | cell row column | advtablesort | tableprops deletetable | emoticons link anchor media image | hr | insertdatetime' },
format: { title: 'Format', items: 'bold italic underline strikethrough | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | removeformat' },
table: { title: '', items: '' },
tools: { title: '', items: '' },
help: { title: 'Help', items: 'help' },
},
block_unsupported_drop: true,
paste_data_images:false,
image_title: true,
images_file_types: 'jpg,png,gif,jpeg',
file_picker_types: 'image',
file_picker_callback: function(cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.setAttribute('name', 'photos');
input.addEventListener("change", (event) => {
let FILE = event.target.files[0];
var fTypes = ["jpg", "png", "gif", "jpeg", "bmp"];
filename = FILE.name.substring(FILE.name.lastIndexOf('.') + 1, FILE.name.length) || FILE.name;
if (fTypes.indexOf(filename) == 2) {
var fileSizeLimit = 0.1;
if (FILE.size > fileSizeLimit * 1024 * 1024) {
alert(" Error! Image is too large, maximum file size allowed is 100kb");
return null;
}
}
if (fTypes.indexOf(filename) > -1) {
let reader = new FileReader;
reader.readAsDataURL(FILE);
reader.onload = (event) => {
let image_url = event.target.result;
let image = document.createElement("img");
image.src = image_url;
image.onload = (e) => {
var MAX_WIDTH = 800;
var MAX_HEIGHT = 800;
var width = e.target.width;
var height = e.target.height;
if (width > height) {
if (width > MAX_WIDTH) {
height = height * (MAX_WIDTH / width);
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width = width * (MAX_HEIGHT / height);
height = MAX_HEIGHT;
}
}
let canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const context = canvas.getContext("2d");
context.drawImage(image, 0, 0, canvas.width, canvas.height);
let new_image_url = context.canvas.toDataURL();
let new_image = document.createElement("img");
new_image.src = new_image_url;
doBlob();
async function doBlob() {
const base64Response = await fetch(new_image.src);
const blob = await base64Response.blob();
let obj = '';
if (fTypes.indexOf(filename) == 2) {
obj = FILE;
}else{
obj = blob;
}
var id = 'xxxblobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = new_image.src.split(',')[1];
var blobInfo = blobCache.create(id, obj, base64);
blobCache.add(blobInfo);
cb(blobInfo.blobUri(), {
title: FILE.name,
imageSize: canvas.width * canvas.height,
maxSize: canvas.width * canvas.height
});
}
}
}
} else {
alert('Sorry, we only allow, jpg, png, gif or jpeg files, Please choose another file to upload.');
return null;
}
});
input.click();
},
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
I am sure this code could be improved for better performance. This is my first attempt at meddling with tinymce’s editors because I could not find a good image upload script for it.
