Skip to content

Commit b82c479

Browse files
enyoenyo
committed
Merge pull request dropzone#839 from enyo/extract-thumbnail
feat: add createThumbnailFromUrl() function
2 parents dc77eaf + 202824c commit b82c479

File tree

8 files changed

+101
-82
lines changed

8 files changed

+101
-82
lines changed

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "dropzone",
33
"location": "enyo/dropzone",
4-
"version": "4.0.0",
4+
"version": "4.0.1",
55
"description": "Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars.",
66
"homepage": "http://www.dropzonejs.com",
77
"main": [

‎component.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "dropzone",
33
"repo": "enyo/dropzone",
4-
"version": "4.0.0",
4+
"version": "4.0.1",
55
"description": "Handles drag and drop of files for you.",
66
"scripts": [ "index.js", "dist/dropzone.js" ],
77
"styles": [ "dist/basic.css" ],

‎dist/dropzone-amd-module.js

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1066,44 +1066,52 @@
10661066
fileReader = new FileReader;
10671067
fileReader.onload = (function(_this) {
10681068
return function() {
1069-
var img;
10701069
if (file.type === "image/svg+xml") {
10711070
_this.emit("thumbnail", file, fileReader.result);
10721071
if (callback != null) {
10731072
callback();
10741073
}
10751074
return;
10761075
}
1077-
img = document.createElement("img");
1078-
img.onload = function() {
1079-
var canvas, ctx, resizeInfo, thumbnail, _ref, _ref1, _ref2, _ref3;
1080-
file.width = img.width;
1081-
file.height = img.height;
1082-
resizeInfo = _this.options.resize.call(_this, file);
1083-
if (resizeInfo.trgWidth == null) {
1084-
resizeInfo.trgWidth = resizeInfo.optWidth;
1085-
}
1086-
if (resizeInfo.trgHeight == null) {
1087-
resizeInfo.trgHeight = resizeInfo.optHeight;
1088-
}
1089-
canvas = document.createElement("canvas");
1090-
ctx = canvas.getContext("2d");
1091-
canvas.width = resizeInfo.trgWidth;
1092-
canvas.height = resizeInfo.trgHeight;
1093-
drawImageIOSFix(ctx, img, (_ref = resizeInfo.srcX) != null ? _ref : 0, (_ref1 = resizeInfo.srcY) != null ? _ref1 : 0, resizeInfo.srcWidth, resizeInfo.srcHeight, (_ref2 = resizeInfo.trgX) != null ? _ref2 : 0, (_ref3 = resizeInfo.trgY) != null ? _ref3 : 0, resizeInfo.trgWidth, resizeInfo.trgHeight);
1094-
thumbnail = canvas.toDataURL("image/png");
1095-
_this.emit("thumbnail", file, thumbnail);
1096-
if (callback != null) {
1097-
return callback();
1098-
}
1099-
};
1100-
img.onerror = callback;
1101-
return img.src = fileReader.result;
1076+
return _this.createThumbnailFromUrl(file, fileReader.result, callback);
11021077
};
11031078
})(this);
11041079
return fileReader.readAsDataURL(file);
11051080
};
11061081

1082+
Dropzone.prototype.createThumbnailFromUrl = function(file, imageUrl, callback) {
1083+
var img;
1084+
img = document.createElement("img");
1085+
img.onload = (function(_this) {
1086+
return function() {
1087+
var canvas, ctx, resizeInfo, thumbnail, _ref, _ref1, _ref2, _ref3;
1088+
file.width = img.width;
1089+
file.height = img.height;
1090+
resizeInfo = _this.options.resize.call(_this, file);
1091+
if (resizeInfo.trgWidth == null) {
1092+
resizeInfo.trgWidth = resizeInfo.optWidth;
1093+
}
1094+
if (resizeInfo.trgHeight == null) {
1095+
resizeInfo.trgHeight = resizeInfo.optHeight;
1096+
}
1097+
canvas = document.createElement("canvas");
1098+
ctx = canvas.getContext("2d");
1099+
canvas.width = resizeInfo.trgWidth;
1100+
canvas.height = resizeInfo.trgHeight;
1101+
drawImageIOSFix(ctx, img, (_ref = resizeInfo.srcX) != null ? _ref : 0, (_ref1 = resizeInfo.srcY) != null ? _ref1 : 0, resizeInfo.srcWidth, resizeInfo.srcHeight, (_ref2 = resizeInfo.trgX) != null ? _ref2 : 0, (_ref3 = resizeInfo.trgY) != null ? _ref3 : 0, resizeInfo.trgWidth, resizeInfo.trgHeight);
1102+
thumbnail = canvas.toDataURL("image/png");
1103+
_this.emit("thumbnail", file, thumbnail);
1104+
if (callback != null) {
1105+
return callback();
1106+
}
1107+
};
1108+
})(this);
1109+
if (callback != null) {
1110+
img.onerror = callback;
1111+
}
1112+
return img.src = imageUrl;
1113+
};
1114+
11071115
Dropzone.prototype.processQueue = function() {
11081116
var i, parallelUploads, processingLength, queuedFiles;
11091117
parallelUploads = this.options.parallelUploads;
@@ -1389,7 +1397,7 @@
13891397

13901398
})(Emitter);
13911399

1392-
Dropzone.version = "4.0.0";
1400+
Dropzone.version = "4.0.1";
13931401

13941402
Dropzone.options = {};
13951403

‎dist/dropzone.js

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1054,44 +1054,52 @@
10541054
fileReader = new FileReader;
10551055
fileReader.onload = (function(_this) {
10561056
return function() {
1057-
var img;
10581057
if (file.type === "image/svg+xml") {
10591058
_this.emit("thumbnail", file, fileReader.result);
10601059
if (callback != null) {
10611060
callback();
10621061
}
10631062
return;
10641063
}
1065-
img = document.createElement("img");
1066-
img.onload = function() {
1067-
var canvas, ctx, resizeInfo, thumbnail, _ref, _ref1, _ref2, _ref3;
1068-
file.width = img.width;
1069-
file.height = img.height;
1070-
resizeInfo = _this.options.resize.call(_this, file);
1071-
if (resizeInfo.trgWidth == null) {
1072-
resizeInfo.trgWidth = resizeInfo.optWidth;
1073-
}
1074-
if (resizeInfo.trgHeight == null) {
1075-
resizeInfo.trgHeight = resizeInfo.optHeight;
1076-
}
1077-
canvas = document.createElement("canvas");
1078-
ctx = canvas.getContext("2d");
1079-
canvas.width = resizeInfo.trgWidth;
1080-
canvas.height = resizeInfo.trgHeight;
1081-
drawImageIOSFix(ctx, img, (_ref = resizeInfo.srcX) != null ? _ref : 0, (_ref1 = resizeInfo.srcY) != null ? _ref1 : 0, resizeInfo.srcWidth, resizeInfo.srcHeight, (_ref2 = resizeInfo.trgX) != null ? _ref2 : 0, (_ref3 = resizeInfo.trgY) != null ? _ref3 : 0, resizeInfo.trgWidth, resizeInfo.trgHeight);
1082-
thumbnail = canvas.toDataURL("image/png");
1083-
_this.emit("thumbnail", file, thumbnail);
1084-
if (callback != null) {
1085-
return callback();
1086-
}
1087-
};
1088-
img.onerror = callback;
1089-
return img.src = fileReader.result;
1064+
return _this.createThumbnailFromUrl(file, fileReader.result, callback);
10901065
};
10911066
})(this);
10921067
return fileReader.readAsDataURL(file);
10931068
};
10941069

1070+
Dropzone.prototype.createThumbnailFromUrl = function(file, imageUrl, callback) {
1071+
var img;
1072+
img = document.createElement("img");
1073+
img.onload = (function(_this) {
1074+
return function() {
1075+
var canvas, ctx, resizeInfo, thumbnail, _ref, _ref1, _ref2, _ref3;
1076+
file.width = img.width;
1077+
file.height = img.height;
1078+
resizeInfo = _this.options.resize.call(_this, file);
1079+
if (resizeInfo.trgWidth == null) {
1080+
resizeInfo.trgWidth = resizeInfo.optWidth;
1081+
}
1082+
if (resizeInfo.trgHeight == null) {
1083+
resizeInfo.trgHeight = resizeInfo.optHeight;
1084+
}
1085+
canvas = document.createElement("canvas");
1086+
ctx = canvas.getContext("2d");
1087+
canvas.width = resizeInfo.trgWidth;
1088+
canvas.height = resizeInfo.trgHeight;
1089+
drawImageIOSFix(ctx, img, (_ref = resizeInfo.srcX) != null ? _ref : 0, (_ref1 = resizeInfo.srcY) != null ? _ref1 : 0, resizeInfo.srcWidth, resizeInfo.srcHeight, (_ref2 = resizeInfo.trgX) != null ? _ref2 : 0, (_ref3 = resizeInfo.trgY) != null ? _ref3 : 0, resizeInfo.trgWidth, resizeInfo.trgHeight);
1090+
thumbnail = canvas.toDataURL("image/png");
1091+
_this.emit("thumbnail", file, thumbnail);
1092+
if (callback != null) {
1093+
return callback();
1094+
}
1095+
};
1096+
})(this);
1097+
if (callback != null) {
1098+
img.onerror = callback;
1099+
}
1100+
return img.src = imageUrl;
1101+
};
1102+
10951103
Dropzone.prototype.processQueue = function() {
10961104
var i, parallelUploads, processingLength, queuedFiles;
10971105
parallelUploads = this.options.parallelUploads;
@@ -1377,7 +1385,7 @@
13771385

13781386
})(Emitter);
13791387

1380-
Dropzone.version = "4.0.0";
1388+
Dropzone.version = "4.0.1";
13811389

13821390
Dropzone.options = {};
13831391

‎dist/min/dropzone-amd-module.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/min/dropzone.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "dropzone",
3-
"version": "4.0.0",
3+
"version": "4.0.1",
44
"description": "Handles drag and drop of files for you.",
55
"keywords": [
66
"dragndrop",

‎src/dropzone.coffee

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -987,37 +987,40 @@ class Dropzone extends Emitter
987987
callback() if callback?
988988
return
989989

990-
# Not using `new Image` here because of a bug in latest Chrome versions.
991-
# See https://github.com/enyo/dropzone/pull/226
992-
img = document.createElement "img"
990+
@createThumbnailFromUrl file, fileReader.result, callback
993991

994-
img.onload = =>
995-
file.width = img.width
996-
file.height = img.height
992+
fileReader.readAsDataURL file
997993

998-
resizeInfo = @options.resize.call @, file
994+
createThumbnailFromUrl: (file, imageUrl, callback) ->
995+
# Not using `new Image` here because of a bug in latest Chrome versions.
996+
# See https://github.com/enyo/dropzone/pull/226
997+
img = document.createElement "img"
999998

1000-
resizeInfo.trgWidth ?= resizeInfo.optWidth
1001-
resizeInfo.trgHeight ?= resizeInfo.optHeight
999+
img.onload = =>
1000+
file.width = img.width
1001+
file.height = img.height
10021002

1003-
canvas = document.createElement "canvas"
1004-
ctx = canvas.getContext "2d"
1005-
canvas.width = resizeInfo.trgWidth
1006-
canvas.height = resizeInfo.trgHeight
1003+
resizeInfo = @options.resize.call @, file
10071004

1008-
# This is a bugfix for iOS' scaling bug.
1009-
drawImageIOSFix ctx, img, resizeInfo.srcX ? 0, resizeInfo.srcY ? 0, resizeInfo.srcWidth, resizeInfo.srcHeight, resizeInfo.trgX ? 0, resizeInfo.trgY ? 0, resizeInfo.trgWidth, resizeInfo.trgHeight
1005+
resizeInfo.trgWidth ?= resizeInfo.optWidth
1006+
resizeInfo.trgHeight ?= resizeInfo.optHeight
10101007

1011-
thumbnail = canvas.toDataURL "image/png"
1008+
canvas = document.createElement "canvas"
1009+
ctx = canvas.getContext "2d"
1010+
canvas.width = resizeInfo.trgWidth
1011+
canvas.height = resizeInfo.trgHeight
10121012

1013-
@emit "thumbnail", file, thumbnail
1014-
callback() if callback?
1015-
1016-
img.onerror = callback
1013+
# This is a bugfix for iOS' scaling bug.
1014+
drawImageIOSFix ctx, img, resizeInfo.srcX ? 0, resizeInfo.srcY ? 0, resizeInfo.srcWidth, resizeInfo.srcHeight, resizeInfo.trgX ? 0, resizeInfo.trgY ? 0, resizeInfo.trgWidth, resizeInfo.trgHeight
10171015

1018-
img.src = fileReader.result
1016+
thumbnail = canvas.toDataURL "image/png"
10191017

1020-
fileReader.readAsDataURL file
1018+
@emit "thumbnail", file, thumbnail
1019+
callback() if callback?
1020+
1021+
img.onerror = callback if callback?
1022+
1023+
img.src = imageUrl
10211024

10221025

10231026
# Goes through the queue and processes files if there aren't too many already.
@@ -1235,7 +1238,7 @@ class Dropzone extends Emitter
12351238

12361239

12371240

1238-
Dropzone.version = "4.0.0"
1241+
Dropzone.version = "4.0.1"
12391242

12401243

12411244
# This is a map of options for your different dropzones. Add configurations

0 commit comments

Comments
 (0)