thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Automatically compress and scale large images

Browse source 
Do nothing to other file types. Continue to block files that are too
large even after scaling and compression.
This commit is contained in:
lilia 2015-03-03 17:50:24 -08:00
parent 37d20b986b
commit 8bc77fa02b
2 changed files with 68 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
conversation.html
View file

@ -35,7 +35,7 @@
<form class='send'>
<div class='attachments'>
<div class='paperclip'></div>
<input type='file' name='files[]' multiple class='file-input'>
<input type='file' class='file-input'>
</div>
<input class="send-btn" type='submit' value='' />
<input class='send-message' type='textarea' placeholder="Send a message">

86
js/views/file_input_view.js
View file

@ -46,37 +46,75 @@ var Whisper = Whisper || {};
this.$el.find('.paperclip').append(this.thumb.render().el);
},
autoScale: function(file) {
if (file.type.split('/')[0] !== 'image' || file.size/1024 < 420) {
// nothing to do
return Promise.resolve(file);
}
return new Promise(function(resolve, reject) {
// components/blueimp-load-image
window.loadImage(file, resolve, {
maxWidth: 1920,
maxHeight: 1920,
canvas: true,
contain: true
});
}).then(this.autoCompress.bind(this));
},
autoCompress: function(canvas, numRetries, quality) {
if (numRetries === undefined) { numRetries = 3; }
if (quality === undefined) { quality = 0.95; }
var autoCompress = this.autoCompress.bind(this);
return new Promise(function(resolve, reject) {
canvas.toBlob(function(blob) {
var kb = blob.size/1024;
if (kb < 420 || numRetries === 0) {
resolve(blob);
} else {
quality = quality * 420 / kb;
if (quality < 50) {
quality = 50;
numRetries = 1;
}
resolve(autoCompress(canvas, numRetries - 1, quality));
}
}, 'image/jpeg', quality);
});
},
previewImages: function() {
this.clearForm();
var files = this.$input.prop('files');
for (var i = 0; i < files.length; i++) {
var type = files[i].type.split('/')[0];
var file = this.$input.prop('files')[0];
if (!file) { return; }
var type = file.type.split('/')[0];
switch (type) {
case 'audio': this.addThumb('/images/audio.png'); break;
case 'video': this.addThumb('/images/video.png'); break;
case 'image':
this.oUrl = URL.createObjectURL(file);
this.addThumb(this.oUrl);
break;
}
this.autoScale(file).then(function(blob) {
var limitKb = 1000000;
switch (type) {
case 'image': limitKb = 420; break;
case 'audio': limitKb = 32000; break;
case 'video': limitKb = 8000; break;
}
if ((files[i].size/1024).toFixed(4) >= limitKb) {
if ((blob.size/1024).toFixed(4) >= limitKb) {
new Whisper.FileSizeToast({
model: {limit: limitKb}
}).render();
this.deleteFiles();
}
else {
switch (type) {
case 'audio': this.addThumb('/images/audio.png'); break;
case 'video': this.addThumb('/images/video.png'); break;
case 'image':
var FR = new FileReader();
FR.onload = function(e) {
this.addThumb(e.target.result);
}.bind(this);
FR.readAsDataURL(files[i]);
break;
}
}
}
}.bind(this));
},
hasFiles: function() {
@ -88,12 +126,18 @@ var Whisper = Whisper || {};
var promises = [];
var files = this.$input.prop('files');
for (var i = 0; i < files.length; i++) {
promises.push(this.readFile(files[i]));
promises.push(this.getFile(files[i]));
}
this.clearForm();
return Promise.all(promises);
},
getFile: function(file) {
file = file || this.$input.prop('files')[0];
if (file === undefined) { throw 'No file'; }
return this.autoScale(file).then(this.readFile);
},
readFile: function(file) {
var contentType = file.type;
return new Promise(function(resolve, reject) {
@ -106,6 +150,10 @@ var Whisper = Whisper || {};
},
clearForm: function() {
if (this.oUrl) {
URL.revokeObjectURL(this.oUrl);
this.oUrl = null;
}
this.thumb.remove();
},