Public/pics
2
2
Fork 2
Code Issues 6 Pull Requests Releases Wiki Activity

Photo uploader: reduce client memory usage #15

Merged
Roflin merged 1 commits from uploader-optimisation into master 2020-02-25 13:30:49 +01:00
Conversation 1 Commits 1 Files Changed 1 +28 -7
1 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
public/js/upload_queue.js
View File

@ -45,9 +45,8 @@ UploadQueue.prototype.addPreviewForFile = function(file, index, callback) {
return false; return false;
} }
var preview = document.createElement('img'); var preview = document.createElement('canvas');
preview.title = file.name; preview.title = file.name;
preview.style.maxHeight = '150px';
var preview_box = document.getElementById('upload_preview_' + index); var preview_box = document.getElementById('upload_preview_' + index);
preview_box.appendChild(preview); preview_box.appendChild(preview);
@ -55,12 +54,34 @@ UploadQueue.prototype.addPreviewForFile = function(file, index, callback) {
var reader = new FileReader(); var reader = new FileReader();
var that = this; var that = this;
reader.addEventListener('load', function() { reader.addEventListener('load', function() {
preview.src = reader.result; var original = document.createElement('img');
if (callback) { original.src = reader.result;
preview.addEventListener('load', function() {
original.addEventListener('load', function() {
// Preparation: make canvas size proportional to the original image.
preview.height = 150;
preview.width = preview.height * (original.width / original.height);
// First pass: resize to 50% on temp canvas.
var temp = document.createElement('canvas'),
tempCtx = temp.getContext('2d');
temp.width = original.width * 0.5;
temp.height = original.height * 0.5;
tempCtx.drawImage(original, 0, 0, temp.width, temp.height);
// Second pass: resize again on temp canvas.
tempCtx.drawImage(temp, 0, 0, temp.width * 0.5, temp.height * 0.5);
// Final pass: resize to desired size on preview canvas.
var context = preview.getContext('2d');
context.drawImage(temp, 0, 0, temp.width * 0.5, temp.height * 0.5,
0, 0, preview.width, preview.height);
if (callback) {
callback(); callback();
}); }
} });
}, false); }, false);
reader.readAsDataURL(file); reader.readAsDataURL(file);
}; };