Skip to content

Commit 3012aa5

Browse files
zhanziyangzhanziyang
committed
v1.3.4
1 parent 92e45c9 commit 3012aa5

File tree

3 files changed

+58
-47
lines changed

3 files changed

+58
-47
lines changed

‎dist/vue-croppa.js

+53-43
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* vue-croppa v1.3.3
2+
* vue-croppa v1.3.4
33
* https://github.com/zhanziyang/vue-croppa
44
*
55
* Copyright (c) 2018 zhanziyang
@@ -621,6 +621,9 @@ var component = { render: function render() {
621621

622622
this._autoSizingInit();
623623
},
624+
beforeDestroy: function beforeDestroy() {
625+
this._autoSizingRemove();
626+
},
624627

625628

626629
watch: {
@@ -931,26 +934,33 @@ var component = { render: function render() {
931934
emitNativeEvent: function emitNativeEvent(evt) {
932935
this.$emit(evt.type, evt);
933936
},
937+
_setContainerSize: function _setContainerSize() {
938+
if (this.$refs.wrapper && getComputedStyle) {
939+
this.realWidth = +getComputedStyle(this.$refs.wrapper).width.slice(0, -2);
940+
this.realHeight = +getComputedStyle(this.$refs.wrapper).height.slice(0, -2);
941+
}
942+
},
934943
_autoSizingInit: function _autoSizingInit() {
935-
var _this3 = this;
936-
937-
var setContainerSize = function setContainerSize() {
938-
if (getComputedStyle && _this3.$refs.wrapper instanceof Element) {
939-
_this3.realWidth = +getComputedStyle(_this3.$refs.wrapper).width.slice(0, -2);
940-
_this3.realHeight = +getComputedStyle(_this3.$refs.wrapper).height.slice(0, -2);
941-
}
942-
};
943-
var useAutoSizing = this.autoSizing;
944-
if (useAutoSizing) {
945-
setContainerSize();
946-
window.addEventListener('resize', setContainerSize);
944+
if (this.useAutoSizing) {
945+
this._setContainerSize();
946+
window.addEventListener('resize', this._setContainerSize);
947+
}
948+
},
949+
_autoSizingRemove: function _autoSizingRemove() {
950+
if (this.useAutoSizing) {
951+
window.removeEventListener('resize', this._setContainerSize);
947952
}
948953
},
949954
_initialize: function _initialize() {
950955
this.canvas = this.$refs.canvas;
951956
this._setSize();
952957
this.canvas.style.backgroundColor = !this.canvasColor || this.canvasColor == 'default' ? 'transparent' : typeof this.canvasColor === 'string' ? this.canvasColor : '';
953958
this.ctx = this.canvas.getContext('2d');
959+
this.ctx.mozImageSmoothingEnabled = true;
960+
this.ctx.imageSmoothingQuality = "high";
961+
this.ctx.webkitImageSmoothingEnabled = true;
962+
this.ctx.msImageSmoothingEnabled = true;
963+
this.ctx.imageSmoothingEnabled = true;
954964
this.originalImage = null;
955965
this.img = null;
956966
this.imageSet = false;
@@ -991,7 +1001,7 @@ var component = { render: function render() {
9911001
this._setOrientation(orientation);
9921002
},
9931003
_setImagePlaceholder: function _setImagePlaceholder() {
994-
var _this4 = this;
1004+
var _this3 = this;
9951005

9961006
var img = void 0;
9971007
if (this.$slots.placeholder && this.$slots.placeholder[0]) {
@@ -1007,7 +1017,7 @@ var component = { render: function render() {
10071017
if (!img) return;
10081018

10091019
var onLoad = function onLoad() {
1010-
_this4.ctx.drawImage(img, 0, 0, _this4.outputWidth, _this4.outputHeight);
1020+
_this3.ctx.drawImage(img, 0, 0, _this3.outputWidth, _this3.outputHeight);
10111021
};
10121022

10131023
if (u.imageLoaded(img)) {
@@ -1032,7 +1042,7 @@ var component = { render: function render() {
10321042
this._setTextPlaceholder();
10331043
},
10341044
_setInitial: function _setInitial() {
1035-
var _this5 = this;
1045+
var _this4 = this;
10361046

10371047
var src = void 0,
10381048
img = void 0;
@@ -1067,11 +1077,11 @@ var component = { render: function render() {
10671077
this.loading = true;
10681078
img.onload = function () {
10691079
// this.$emit(events.INITIAL_IMAGE_LOADED_EVENT)
1070-
_this5._onload(img, +img.dataset['exifOrientation'], true);
1080+
_this4._onload(img, +img.dataset['exifOrientation'], true);
10711081
};
10721082

10731083
img.onerror = function () {
1074-
_this5._setPlaceholders();
1084+
_this4._setPlaceholders();
10751085
};
10761086
}
10771087
},
@@ -1093,7 +1103,7 @@ var component = { render: function render() {
10931103
}
10941104
},
10951105
_onVideoLoad: function _onVideoLoad(video, initial) {
1096-
var _this6 = this;
1106+
var _this5 = this;
10971107

10981108
this.video = video;
10991109
var canvas = document.createElement('canvas');
@@ -1105,25 +1115,25 @@ var component = { render: function render() {
11051115
var ctx = canvas.getContext('2d');
11061116
this.loading = false;
11071117
var drawFrame = function drawFrame(initial) {
1108-
if (!_this6.video) return;
1109-
ctx.drawImage(_this6.video, 0, 0, videoWidth, videoHeight);
1118+
if (!_this5.video) return;
1119+
ctx.drawImage(_this5.video, 0, 0, videoWidth, videoHeight);
11101120
var frame = new Image();
11111121
frame.src = canvas.toDataURL();
11121122
frame.onload = function () {
1113-
_this6.img = frame;
1123+
_this5.img = frame;
11141124
// this._placeImage()
11151125
if (initial) {
1116-
_this6._placeImage();
1126+
_this5._placeImage();
11171127
} else {
1118-
_this6._draw();
1128+
_this5._draw();
11191129
}
11201130
};
11211131
};
11221132
drawFrame(true);
11231133
var keepDrawing = function keepDrawing() {
1124-
_this6.$nextTick(function () {
1134+
_this5.$nextTick(function () {
11251135
drawFrame();
1126-
if (!_this6.video || _this6.video.ended || _this6.video.paused) return;
1136+
if (!_this5.video || _this5.video.ended || _this5.video.paused) return;
11271137
requestAnimationFrame(keepDrawing);
11281138
});
11291139
};
@@ -1156,7 +1166,7 @@ var component = { render: function render() {
11561166
this._onNewFileIn(file);
11571167
},
11581168
_onNewFileIn: function _onNewFileIn(file) {
1159-
var _this7 = this;
1169+
var _this6 = this;
11601170

11611171
this.currentIsInitial = false;
11621172
this.loading = true;
@@ -1185,11 +1195,11 @@ var component = { render: function render() {
11851195
video.src = fileData;
11861196
fileData = null;
11871197
if (video.readyState >= video.HAVE_FUTURE_DATA) {
1188-
_this7._onVideoLoad(video);
1198+
_this6._onVideoLoad(video);
11891199
} else {
11901200
video.addEventListener('canplay', function () {
11911201
console.log('can play event');
1192-
_this7._onVideoLoad(video);
1202+
_this6._onVideoLoad(video);
11931203
}, false);
11941204
}
11951205
} else {
@@ -1202,8 +1212,8 @@ var component = { render: function render() {
12021212
img.src = fileData;
12031213
fileData = null;
12041214
img.onload = function () {
1205-
_this7._onload(img, orientation);
1206-
_this7.$emit(events.NEW_IMAGE);
1215+
_this6._onload(img, orientation);
1216+
_this6.$emit(events.NEW_IMAGE);
12071217
};
12081218
}
12091219
};
@@ -1440,7 +1450,7 @@ var component = { render: function render() {
14401450
this.currentPointerCoord = null;
14411451
},
14421452
_handleWheel: function _handleWheel(evt) {
1443-
var _this8 = this;
1453+
var _this7 = this;
14441454

14451455
this.emitNativeEvent(evt);
14461456
if (this.passive) return;
@@ -1453,7 +1463,7 @@ var component = { render: function render() {
14531463
this.zoom(!this.reverseScrollToZoom);
14541464
}
14551465
this.$nextTick(function () {
1456-
_this8.scrolling = false;
1466+
_this7.scrolling = false;
14571467
});
14581468
},
14591469
_handleDragEnter: function _handleDragEnter(evt) {
@@ -1524,7 +1534,7 @@ var component = { render: function render() {
15241534
}
15251535
},
15261536
_setOrientation: function _setOrientation() {
1527-
var _this9 = this;
1537+
var _this8 = this;
15281538

15291539
var orientation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 6;
15301540
var applyMetadata = arguments[1];
@@ -1536,8 +1546,8 @@ var component = { render: function render() {
15361546
// u.getRotatedImageData(useOriginal ? this.originalImage : this.img, orientation)
15371547
var _img = u.getRotatedImage(useOriginal ? this.originalImage : this.img, orientation);
15381548
_img.onload = function () {
1539-
_this9.img = _img;
1540-
_this9._placeImage(applyMetadata);
1549+
_this8.img = _img;
1550+
_this8._placeImage(applyMetadata);
15411551
};
15421552
} else {
15431553
this._placeImage(applyMetadata);
@@ -1573,13 +1583,13 @@ var component = { render: function render() {
15731583
this.ctx.fillRect(0, 0, this.outputWidth, this.outputHeight);
15741584
},
15751585
_draw: function _draw() {
1576-
var _this10 = this;
1586+
var _this9 = this;
15771587

15781588
this.$nextTick(function () {
15791589
if (typeof window !== 'undefined' && window.requestAnimationFrame) {
1580-
requestAnimationFrame(_this10._drawFrame);
1590+
requestAnimationFrame(_this9._drawFrame);
15811591
} else {
1582-
_this10._drawFrame();
1592+
_this9._drawFrame();
15831593
}
15841594
});
15851595
},
@@ -1626,12 +1636,12 @@ var component = { render: function render() {
16261636
ctx.closePath();
16271637
},
16281638
_createContainerClipPath: function _createContainerClipPath() {
1629-
var _this11 = this;
1639+
var _this10 = this;
16301640

16311641
this._clipPathFactory(0, 0, this.outputWidth, this.outputHeight);
16321642
if (this.clipPlugins && this.clipPlugins.length) {
16331643
this.clipPlugins.forEach(function (func) {
1634-
func(_this11.ctx, 0, 0, _this11.outputWidth, _this11.outputHeight);
1644+
func(_this10.ctx, 0, 0, _this10.outputWidth, _this10.outputHeight);
16351645
});
16361646
}
16371647
},
@@ -1663,7 +1673,7 @@ var component = { render: function render() {
16631673
ctx.restore();
16641674
},
16651675
_applyMetadata: function _applyMetadata() {
1666-
var _this12 = this;
1676+
var _this11 = this;
16671677

16681678
if (!this.userMetadata) return;
16691679
var _userMetadata = this.userMetadata,
@@ -1685,7 +1695,7 @@ var component = { render: function render() {
16851695
}
16861696

16871697
this.$nextTick(function () {
1688-
_this12.userMetadata = null;
1698+
_this11.userMetadata = null;
16891699
});
16901700
},
16911701
onDimensionChange: function onDimensionChange() {

0 commit comments

Comments
 (0)