Added support for resizing retina images.

Adding a class `retina` or naming an image with @2x resize the image to size 2x.
This commit is contained in:
Dominique Da Silva 2019-11-16 12:29:03 +00:00
parent c50881c098
commit fb1e6525f4
3 changed files with 16 additions and 4 deletions

File diff suppressed because one or more lines are too long

View file

@ -44,7 +44,7 @@ jqueryFileUpload.on('begin', fileInfo => {
fileInfo.name = fileInfo.name
.toLowerCase()
.replace(/ /g, '-')
.replace(/[^a-z0-9+-.]+/g, '');
.replace(/[^a-z0-9@+-.]+/g, '');
});
const listImages = (dir, dirURL, callback) => {
@ -422,7 +422,7 @@ router.post('/upload', passport.csrfProtection, (req, res) => {
try {
JSON.parse(mockres._getData()).files.forEach(file => {
data.push({
src: file.url
src: decodeURIComponent(file.url)
});
});
res.json({

View file

@ -255,6 +255,12 @@
return a1.host === a2.host;
};
var isRetina = function(element) {
if (element.tagName === 'IMG' && element.src.indexOf('@2x') > -1) return true;
if (element.classList.contains('retina')) return true;
return element.parentNode && element.parentNode.tagName !== 'DIV' && isRetina(element.parentNode);
}
frame.onload = function() {
var imgs = frameDoc.querySelectorAll('img');
@ -290,7 +296,13 @@
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;
var w = img.clientWidth;
var h = img.clientHeight;
if (isRetina(img)) {
w = w * 2;
h = h * 2;
}
img.src = '/editorapi/img?src=' + encodedSrc + '&method=resize&params=' + w + '%2C' + h;
} else {
stats.processed++;
}