public/mailtrain
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Added verif to img resizing and stats in grapesjs

Browse source
This commit is contained in:
Dominique Da Silva 2019-11-15 18:03:07 +00:00
parent 988ab57929
commit c50881c098
3 changed files with 42 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/grapejs/dist/js/grapesjs-mjml-custom.min.js vendored
View file

File diff suppressed because one or more lines are too long

10
routes/editorapi.js
View file

@ -107,6 +107,12 @@ const placeholderImage = (width, height, callback) => {
const resizedImage = (src, method, width, height, callback) => { const resizedImage = (src, method, width, height, callback) => {
const pathname = path.join('/', url.parse(src).pathname); const pathname = path.join('/', url.parse(src).pathname);
const filePath = path.join(__dirname, '..', 'public', pathname); const filePath = path.join(__dirname, '..', 'public', pathname);
const ext = path.extname(filePath).toLowerCase();
if (!fs.existsSync(filePath) && !['.jpg', '.jpeg', '.gif', '.png', '.webp', '.bpm', '.tiff'].includes(ext)) {
return callback(new Error('No valid image to process'));
}
const magick = gm(filePath); const magick = gm(filePath);
magick.format((err, format) => { magick.format((err, format) => {
@ -172,11 +178,15 @@ const getProcessedImage = (dynamicUrl, callback) => {
return val; return val;
}; };
if (method === 'placeholder') { if (method === 'placeholder') {
width = sanitizeSize(width, 1, 2048, 600, false); width = sanitizeSize(width, 1, 2048, 600, false);
height = sanitizeSize(height, 1, 2048, 300, false); height = sanitizeSize(height, 1, 2048, 300, false);
placeholderImage(width, height, callback); placeholderImage(width, height, callback);
} else { } else {
if (src === '') {
return callback(new Error('Empty image source'));
}
width = sanitizeSize(width, 1, 2048, 600, false); width = sanitizeSize(width, 1, 2048, 600, false);
height = sanitizeSize(height, 1, 2048, 300, true); height = sanitizeSize(height, 1, 2048, 300, true);
resizedImage(src, method, width, height, callback); resizedImage(src, method, width, height, callback);

35
views/grapejs/editor.hbs
View file

@ -179,6 +179,7 @@
editorBackgroundColor: "{{{editor.config.mjml.editorBackgroundColor}}}", editorBackgroundColor: "{{{editor.config.mjml.editorBackgroundColor}}}",
canvasBackgroundStyle: "{{{editor.config.mjml.canvasBackgroundStyle}}}", canvasBackgroundStyle: "{{{editor.config.mjml.canvasBackgroundStyle}}}",
canvasLabelsColor: "{{{editor.config.mjml.canvasLabelsColor}}}", canvasLabelsColor: "{{{editor.config.mjml.canvasLabelsColor}}}",
fallbackImagePath: "/editorapi/img?src=&method=placeholder&params={width}%2C{height}"
}; };
c.pluginsOpts['gjs-preset-mjml'] = { c.pluginsOpts['gjs-preset-mjml'] = {
@ -257,18 +258,44 @@
frame.onload = function() { frame.onload = function() {
var imgs = frameDoc.querySelectorAll('img'); var imgs = frameDoc.querySelectorAll('img');
var stats = {
processed: 0,
empties: 0,
failed: 0
}
var counter = 0;
var imagesProcedeed = function () {
//console.dir('total', imgs.length,'empty:', stats.empties, 'failed:', stats.failed, 'processed:', stats.processed, 'counter', counter);
if (stats.processed < (imgs.length - stats.empties) && counter < 10) {
counter++;
setTimeout(imagesProcedeed, 200);
} else {
var toastrOptions = { timeOut: 10000 };
if (stats.empties) { toastr.warning('Found ' + stats.empties + ' empty images found while processing the final document.', 'Empty images found (' + stats.empties + ')', toastrOptions); }
if (stats.failed) { toastr.error(stats.failed + ' errors occured while processing the images in the final document.', 'Image processing errors (' + stats.failed + ')', toastrOptions); }
html = '<!doctype html>' + frameDoc.documentElement.outerHTML;
document.body.removeChild(frame);
callback(html);
}
}
for (var i = 0; i < imgs.length; i++) { for (var i = 0; i < imgs.length; i++) {
var img = imgs[i]; var img = imgs[i];
var m = img.src.match(/\/editorapi\/img\?src=([^&]*)/); var m = img.src.match(/\/editorapi\/img\?src=([^&]*)/);
var encodedSrc = m && m[1] || encodeURIComponent(img.src); var encodedSrc = m && m[1] || encodeURIComponent(img.src);
if ((m && m[1] === '') || img.src.trim() === '' || img.src === window.location.href) { stats.empties++; continue; }
if (isLocalImage(decodeURIComponent(encodedSrc))) { if (isLocalImage(decodeURIComponent(encodedSrc))) {
img.onerror = function() { stats.failed++; };
img.onloadend = function() { stats.processed++; };
img.src = '/editorapi/img?src=' + encodedSrc + '&method=resize&params=' + img.clientWidth + '%2C' + img.clientHeight; img.src = '/editorapi/img?src=' + encodedSrc + '&method=resize&params=' + img.clientWidth + '%2C' + img.clientHeight;
} else {
stats.processed++;
} }
} }
setTimeout(imagesProcedeed, 100);
html = '<!doctype html>' + frameDoc.documentElement.outerHTML;
document.body.removeChild(frame);
callback(html);
}; };
frameDoc.open(); frameDoc.open();