Skip to content

Commit 21719df

Browse files
keligijuslinkesch
keligijus
authored and
linkesch
committed
perf: Use object url for image previews (linkesch#487)
1 parent 36b7b94 commit 21719df

6 files changed

+56
-30
lines changed

‎.jshintrc

+2-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
"jasmine": false,
2525
"spyOn": false,
2626
"placeCaret": false,
27-
"require": false
27+
"require": false,
28+
"dataURItoBlob": false
2829
},
2930

3031
"jquery" : true,

‎dist/js/medium-editor-insert-plugin.js

+11-9
Original file line numberDiff line numberDiff line change
@@ -1820,7 +1820,7 @@ this["MediumInsert"]["Templates"]["src/js/templates/images-toolbar.hbs"] = Handl
18201820
file = data.files[0],
18211821
acceptFileTypes = this.options.fileUploadOptions.acceptFileTypes,
18221822
maxFileSize = this.options.fileUploadOptions.maxFileSize,
1823-
reader;
1823+
previewImg;
18241824

18251825
if (acceptFileTypes && !acceptFileTypes.test(file.type)) {
18261826
uploadErrors.push(this.options.messages.acceptFileTypesError + file.name);
@@ -1863,13 +1863,15 @@ this["MediumInsert"]["Templates"]["src/js/templates/images-toolbar.hbs"] = Handl
18631863
data.process().done(function () {
18641864
// If preview is set to true, let the showImage handle the upload start
18651865
if (that.options.preview) {
1866-
reader = new FileReader();
1867-
1868-
reader.onload = function (e) {
1869-
$.proxy(that, 'showImage', e.target.result, data)();
1866+
previewImg = document.createElement('img');
1867+
window.URL = window.URL || window.webkitURL;
1868+
previewImg.src = window.URL.createObjectURL(data.files[0]);
1869+
previewImg.onload = function () {
1870+
$.proxy(that, 'showImage', this.src, data)();
1871+
setTimeout(function () {
1872+
window.URL.revokeObjectURL(this.src);
1873+
});
18701874
};
1871-
1872-
reader.readAsDataURL(data.files[0]);
18731875
} else {
18741876
data.submit();
18751877
}
@@ -2104,7 +2106,7 @@ this["MediumInsert"]["Templates"]["src/js/templates/images-toolbar.hbs"] = Handl
21042106
// Is backspace pressed and caret is at the beginning of a paragraph, get previous element
21052107
if (e.which === 8 && caretPosition === 0) {
21062108
$sibling = $current.prev();
2107-
// Is del pressed and caret is at the end of a paragraph, get next element
2109+
// Is del pressed and caret is at the end of a paragraph, get next element
21082110
} else if (e.which === 46 && caretPosition === $current.text().length) {
21092111
$sibling = $current.next();
21102112
}
@@ -2166,7 +2168,7 @@ this["MediumInsert"]["Templates"]["src/js/templates/images-toolbar.hbs"] = Handl
21662168
// try to run it as a callback
21672169
if (typeof this.options.deleteScript === 'function') {
21682170
this.options.deleteScript(file, $el);
2169-
// otherwise, it's probably a string, call it as ajax
2171+
// otherwise, it's probably a string, call it as ajax
21702172
} else {
21712173
$.ajax($.extend(true, {}, {
21722174
url: this.options.deleteScript,

‎dist/js/medium-editor-insert-plugin.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎spec/helpers/util.js

+21
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,24 @@ function placeCaret(el, position) {
1616
sel.removeAllRanges();
1717
sel.addRange(range);
1818
}
19+
20+
// https://gist.github.com/davoclavo/4424731
21+
function dataURItoBlob(dataURI) {
22+
// convert base64 to raw binary data held in a string
23+
var byteString = atob(dataURI.split(',')[1]),
24+
// separate out the mime component
25+
mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0],
26+
// write the bytes of the string to an ArrayBuffer
27+
arrayBuffer = new ArrayBuffer(byteString.length),
28+
_ia = new Uint8Array(arrayBuffer),
29+
i, dataView, blob;
30+
31+
for (i = 0; i < byteString.length; i++) {
32+
_ia[i] = byteString.charCodeAt(i);
33+
}
34+
35+
dataView = new DataView(arrayBuffer);
36+
blob = new Blob([dataView], { type: mimeString });
37+
38+
return blob;
39+
}

‎spec/images.spec.js

+10-10
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@ describe('Images addon', function () {
2525

2626
this.addon.uploadAdd(null, {
2727
autoUpload: true,
28-
files: [new Blob([''], { type: 'image/jpeg' })],
28+
files: [dataURItoBlob('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=')],
2929
submit: function () {
3030
expect(this.$el.find('.medium-insert-images').length).toEqual(1);
3131
expect(this.$el.find('.medium-insert-images img').length).toEqual(1);
3232
expect(this.$el.find('.medium-insert-images .medium-insert-images-progress').length).toEqual(1);
33-
expect(this.$el.find('.medium-insert-images img').attr('src').match(/^data:/).length).toEqual(1);
33+
expect(this.$el.find('.medium-insert-images img').attr('src').match(/^(data|blob):/)).toBeTruthy();
3434
done();
3535
}.bind(this),
3636
process: function () {
@@ -100,7 +100,7 @@ describe('Images addon', function () {
100100
this.$el.prepend('<div class="medium-insert-images medium-insert-active">' +
101101
'<figure></figure>' +
102102
'<figure></figure>' +
103-
'</div>');
103+
'</div>');
104104

105105
this.addon.uploadAdd(null, {
106106
autoUpload: true,
@@ -130,7 +130,7 @@ describe('Images addon', function () {
130130
this.addon.options.preview = false;
131131
this.$el.prepend('<div class="medium-insert-images medium-insert-active">' +
132132
'<figure></figure>' +
133-
'</div>');
133+
'</div>');
134134

135135
this.addon.uploadAdd(null, {
136136
autoUpload: true,
@@ -163,7 +163,7 @@ describe('Images addon', function () {
163163
});
164164

165165
this.addon.showImage(null, {
166-
submit: function () {}
166+
submit: function () { }
167167
});
168168
});
169169

@@ -172,7 +172,7 @@ describe('Images addon', function () {
172172
stubbedImage = jasmine.createSpy('image'),
173173
context = this.$el.prepend('<div class="medium-insert-images medium-insert-active">' +
174174
'<figure><img src="data:" alt=""></figure>' +
175-
'</div>');
175+
'</div>');
176176

177177
spyOn(this.addon, 'getDOMImage').and.returnValue(stubbedImage);
178178

@@ -195,7 +195,7 @@ describe('Images addon', function () {
195195
var stubbedImage = jasmine.createSpy('image'),
196196
context = this.$el.prepend('<div class="medium-insert-images medium-insert-active">' +
197197
'<figure><img src="data:" alt=""></figure>' +
198-
'</div>');
198+
'</div>');
199199

200200
spyOn(this.addon, 'getDOMImage').and.returnValue(stubbedImage);
201201

@@ -219,7 +219,7 @@ describe('Images addon', function () {
219219
};
220220

221221
this.addon.showImage(null, {
222-
submit: function () {}
222+
submit: function () { }
223223
});
224224
});
225225

@@ -481,7 +481,7 @@ describe('Images addon', function () {
481481
this.$el.find('p').click();
482482

483483
this.addon.uploadAdd(null, {
484-
files: [{type: 'image/jpeg', size: 1001}]
484+
files: [{ type: 'image/jpeg', size: 1001 }]
485485
});
486486
});
487487

@@ -497,7 +497,7 @@ describe('Images addon', function () {
497497
this.$el.find('p').click();
498498

499499
this.addon.uploadAdd(null, {
500-
files: [{type: 'image/jpeg', size: 1001}]
500+
files: [{ type: 'image/jpeg', size: 1001 }]
501501
});
502502
});
503503
});

‎src/js/images.js

+11-9
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,7 @@
242242
file = data.files[0],
243243
acceptFileTypes = this.options.fileUploadOptions.acceptFileTypes,
244244
maxFileSize = this.options.fileUploadOptions.maxFileSize,
245-
reader;
245+
previewImg;
246246

247247
if (acceptFileTypes && !acceptFileTypes.test(file.type)) {
248248
uploadErrors.push(this.options.messages.acceptFileTypesError + file.name);
@@ -285,13 +285,15 @@
285285
data.process().done(function () {
286286
// If preview is set to true, let the showImage handle the upload start
287287
if (that.options.preview) {
288-
reader = new FileReader();
289-
290-
reader.onload = function (e) {
291-
$.proxy(that, 'showImage', e.target.result, data)();
288+
previewImg = document.createElement('img');
289+
window.URL = window.URL || window.webkitURL;
290+
previewImg.src = window.URL.createObjectURL(data.files[0]);
291+
previewImg.onload = function () {
292+
$.proxy(that, 'showImage', this.src, data)();
293+
setTimeout(function () {
294+
window.URL.revokeObjectURL(this.src);
295+
});
292296
};
293-
294-
reader.readAsDataURL(data.files[0]);
295297
} else {
296298
data.submit();
297299
}
@@ -526,7 +528,7 @@
526528
// Is backspace pressed and caret is at the beginning of a paragraph, get previous element
527529
if (e.which === 8 && caretPosition === 0) {
528530
$sibling = $current.prev();
529-
// Is del pressed and caret is at the end of a paragraph, get next element
531+
// Is del pressed and caret is at the end of a paragraph, get next element
530532
} else if (e.which === 46 && caretPosition === $current.text().length) {
531533
$sibling = $current.next();
532534
}
@@ -588,7 +590,7 @@
588590
// try to run it as a callback
589591
if (typeof this.options.deleteScript === 'function') {
590592
this.options.deleteScript(file, $el);
591-
// otherwise, it's probably a string, call it as ajax
593+
// otherwise, it's probably a string, call it as ajax
592594
} else {
593595
$.ajax($.extend(true, {}, {
594596
url: this.options.deleteScript,

0 commit comments

Comments
 (0)