Skip to content

Commit

Permalink
v1.3.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhanziyang
zhanziyang committed Apr 6, 2018
1 parent 2d86594 commit 8bd7b16
Show file tree
Hide file tree
Showing 6 changed files with 224 additions and 86 deletions.
182 changes: 139 additions & 43 deletions dist/vue-croppa.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* vue-croppa v1.3.0
* vue-croppa v1.3.1
* https://github.com/zhanziyang/vue-croppa
*
* Copyright (c) 2018 zhanziyang
Expand Down Expand Up @@ -248,8 +248,11 @@ var u = {
}
return -1;
},
parseDataUrl: function parseDataUrl(url) {
var reg = /^data:([^;]+)?(;base64)?,(.*)/gmi;
return reg.exec(url)[3];
},
base64ToArrayBuffer: function base64ToArrayBuffer(base64) {
base64 = base64.replace(/^data:([^;]+);base64,/gmi, '');
var binaryString = atob(base64);
var len = binaryString.length;
var bytes = new Uint8Array(len);
Expand Down Expand Up @@ -422,7 +425,8 @@ var props = {
type: [Number, String],
default: 0
},
autoSizing: Boolean
autoSizing: Boolean,
videoEnabled: Boolean
};

var events = {
Expand Down Expand Up @@ -468,6 +472,8 @@ var component = { render: function render() {
$event.stopPropagation();$event.preventDefault();_vm._handleDrop($event);
} } }, [_c('input', _vm._b({ ref: "fileInput", staticStyle: { "height": "1px", "width": "1px", "overflow": "hidden", "margin-left": "-99999px", "position": "absolute" }, attrs: { "type": "file", "accept": _vm.accept, "disabled": _vm.disabled }, on: { "change": _vm._handleInputChange } }, 'input', _vm.inputAttrs)), _c('div', { staticClass: "slots", staticStyle: { "width": "0", "height": "0", "visibility": "hidden" } }, [_vm._t("initial"), _vm._t("placeholder")], 2), _c('canvas', { ref: "canvas", on: { "click": function click($event) {
$event.stopPropagation();$event.preventDefault();_vm._handleClick($event);
}, "dblclick": function dblclick($event) {
$event.stopPropagation();$event.preventDefault();_vm._handleDblClick($event);
}, "touchstart": function touchstart($event) {
$event.stopPropagation();_vm._handlePointerStart($event);
}, "mousedown": function mousedown($event) {
Expand Down Expand Up @@ -515,6 +521,7 @@ var component = { render: function render() {
ctx: null,
originalImage: null,
img: null,
video: null,
dragging: false,
lastMovingCoord: null,
imgData: {
Expand Down Expand Up @@ -542,17 +549,20 @@ var component = { render: function render() {
currentIsInitial: false,
loading: false,
realWidth: 0,
realHeight: 0
realHeight: 0,
chosenFile: null
};
},


computed: {
outputWidth: function outputWidth() {
return (this.realWidth || this.width) * this.quality;
var w = this.autoSizing ? this.realWidth : this.width;
return w * this.quality;
},
outputHeight: function outputHeight() {
return (this.realHeight || this.height) * this.quality;
var h = this.autoSizing ? this.realHeight : this.height;
return h * this.quality;
},
computedPlaceholderFontSize: function computedPlaceholderFontSize() {
return this.placeholderFontSize * this.quality;
Expand Down Expand Up @@ -608,6 +618,8 @@ var component = { render: function render() {
deep: true
});
}

this._autoSizingInit();
},


Expand Down Expand Up @@ -715,6 +727,11 @@ var component = { render: function render() {
} else {
this.$emit(events.LOADING_END);
}
},
autoSizing: function autoSizing(val) {
if (val) {
this._autoSizingInit();
}
}
},

Expand All @@ -726,7 +743,7 @@ var component = { render: function render() {
return this.ctx;
},
getChosenFile: function getChosenFile() {
return this.$refs.fileInput.files[0];
return this.chosenFile || this.$refs.fileInput.files[0];
},
move: function move(offset) {
if (!offset || this.passive) return;
Expand Down Expand Up @@ -891,6 +908,11 @@ var component = { render: function render() {
this.userMetadata = null;
this.imageSet = false;
this.loading = false;
this.chosenFile = null;
if (this.video) {
this.video.pause();
this.video = null;
}

if (hadImage) {
this.$emit(events.IMAGE_REMOVE_EVENT);
Expand All @@ -906,6 +928,19 @@ var component = { render: function render() {
throw Error('Clip plugins should be functions');
}
},
_autoSizingInit: function _autoSizingInit() {
var _this3 = this;

var setContainerSize = function setContainerSize() {
_this3.realWidth = +getComputedStyle(_this3.$refs.wrapper).width.slice(0, -2);
_this3.realHeight = +getComputedStyle(_this3.$refs.wrapper).height.slice(0, -2);
};
var useAutoSizing = this.autoSizing && this.$refs.wrapper && getComputedStyle;
if (useAutoSizing) {
setContainerSize();
window.addEventListener('resize', setContainerSize);
}
},
_initialize: function _initialize() {
this.canvas = this.$refs.canvas;
this._setSize();
Expand All @@ -914,23 +949,13 @@ var component = { render: function render() {
this.originalImage = null;
this.img = null;
this.imageSet = false;
this.chosenFile = null;
this._setInitial();
if (!this.passive) {
this.$emit(events.INIT_EVENT, this);
}
},
_setSize: function _setSize() {
var _this3 = this;

var setContainerSize = function setContainerSize() {
_this3.realWidth = +getComputedStyle(_this3.$refs.wrapper).width.slice(0, -2);
_this3.realHeight = +getComputedStyle(_this3.$refs.wrapper).height.slice(0, -2);
};
var useAutoSizing = this.autoSizing && this.$refs.wrapper && getComputedStyle;
if (useAutoSizing) {
setContainerSize();
window.addEventListener('resize', setContainerSize);
}
this.canvas.width = this.outputWidth;
this.canvas.height = this.outputHeight;
this.canvas.style.width = (this.realWidth || this.width) + 'px';
Expand Down Expand Up @@ -1062,11 +1087,60 @@ var component = { render: function render() {
this.$emit(events.INITIAL_IMAGE_LOADED_EVENT);
}
},
_onVideoLoad: function _onVideoLoad(video, initial) {
var _this6 = this;

this.video = video;
var canvas = document.createElement('canvas');
var videoWidth = video.videoWidth,
videoHeight = video.videoHeight;

canvas.width = videoWidth;
canvas.height = videoHeight;
var ctx = canvas.getContext('2d');
this.loading = false;
var drawFrame = function drawFrame(initial) {
if (!_this6.video) return;
ctx.drawImage(_this6.video, 0, 0, videoWidth, videoHeight);
var frame = new Image();
frame.src = canvas.toDataURL();
frame.onload = function () {
_this6.img = frame;
// this._placeImage()
if (initial) {
_this6._placeImage();
} else {
_this6._draw();
}
};
};
drawFrame(true);
var keepDrawing = function keepDrawing() {
_this6.$nextTick(function () {
drawFrame();
if (!_this6.video || _this6.video.ended || _this6.video.paused) return;
requestAnimationFrame(keepDrawing);
});
};
this.video.addEventListener('play', function () {
requestAnimationFrame(keepDrawing);
});
},
_handleClick: function _handleClick() {
if (!this.hasImage() && !this.disableClickToChoose && !this.disabled && !this.supportTouch && !this.passive) {
this.chooseFile();
}
},
_handleDblClick: function _handleDblClick() {
if (this.videoEnabled && this.video) {
if (this.video.paused || this.video.ended) {
this.video.play();
} else {
this.video.pause();
}
return;
}
},
_handleInputChange: function _handleInputChange() {
var input = this.$refs.fileInput;
if (!input.files.length || this.passive) return;
Expand All @@ -1075,11 +1149,12 @@ var component = { render: function render() {
this._onNewFileIn(file);
},
_onNewFileIn: function _onNewFileIn(file) {
var _this6 = this;
var _this7 = this;

this.currentIsInitial = false;
this.loading = true;
this.$emit(events.FILE_CHOOSE_EVENT, file);
this.chosenFile = file;
if (!this._fileSizeIsValid(file)) {
this.loading = false;
this.$emit(events.FILE_SIZE_EXCEED_EVENT, file);
Expand All @@ -1091,21 +1166,39 @@ var component = { render: function render() {
var type = file.type || file.name.toLowerCase().split('.').pop();
return false;
}

if (typeof window !== 'undefined' && typeof window.FileReader !== 'undefined') {
var fr = new FileReader();
fr.onload = function (e) {
var fileData = e.target.result;
var orientation = 1;
try {
orientation = u.getFileOrientation(u.base64ToArrayBuffer(fileData));
} catch (err) {}
if (orientation < 1) orientation = 1;
var img = new Image();
img.src = fileData;
img.onload = function () {
_this6._onload(img, orientation);
_this6.$emit(events.NEW_IMAGE);
};
var base64 = u.parseDataUrl(fileData);
var isVideo = /^video/.test(file.type);
if (isVideo) {
var video = document.createElement('video');
video.src = fileData;
fileData = null;
if (video.readyState >= video.HAVE_FUTURE_DATA) {
_this7._onVideoLoad(video);
} else {
video.addEventListener('canplay', function () {
console.log('can play event');
_this7._onVideoLoad(video);
}, false);
}
} else {
var orientation = 1;
try {
orientation = u.getFileOrientation(u.base64ToArrayBuffer(base64));
} catch (err) {}
if (orientation < 1) orientation = 1;
var img = new Image();
img.src = fileData;
fileData = null;
img.onload = function () {
_this7._onload(img, orientation);
_this7.$emit(events.NEW_IMAGE);
};
}
};
fr.readAsDataURL(file);
}
Expand All @@ -1117,6 +1210,8 @@ var component = { render: function render() {
return file.size < this.fileSizeLimit;
},
_fileTypeIsValid: function _fileTypeIsValid(file) {
var acceptableMimeType = this.videoEnabled && /^video/.test(file.type) && document.createElement('video').canPlayType(file.type) || /^image/.test(file.type);
if (!acceptableMimeType) return false;
if (!this.accept) return true;
var accept = this.accept;
var baseMimetype = accept.replace(/\/.*$/, '');
Expand Down Expand Up @@ -1332,7 +1427,7 @@ var component = { render: function render() {
this.currentPointerCoord = null;
},
_handleWheel: function _handleWheel(evt) {
var _this7 = this;
var _this8 = this;

if (this.passive) return;
if (this.disabled || this.disableScrollToZoom || !this.hasImage()) return;
Expand All @@ -1344,7 +1439,7 @@ var component = { render: function render() {
this.zoom(!this.reverseScrollToZoom);
}
this.$nextTick(function () {
_this7.scrolling = false;
_this8.scrolling = false;
});
},
_handleDragEnter: function _handleDragEnter(evt) {
Expand Down Expand Up @@ -1410,7 +1505,7 @@ var component = { render: function render() {
}
},
_setOrientation: function _setOrientation() {
var _this8 = this;
var _this9 = this;

var orientation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 6;
var applyMetadata = arguments[1];
Expand All @@ -1419,10 +1514,11 @@ var component = { render: function render() {
if (orientation > 1 || useOriginal) {
if (!this.img) return;
this.rotating = true;
// u.getRotatedImageData(useOriginal ? this.originalImage : this.img, orientation)
var _img = u.getRotatedImage(useOriginal ? this.originalImage : this.img, orientation);
_img.onload = function () {
_this8.img = _img;
_this8._placeImage(applyMetadata);
_this9.img = _img;
_this9._placeImage(applyMetadata);
};
} else {
this._placeImage(applyMetadata);
Expand Down Expand Up @@ -1458,18 +1554,18 @@ var component = { render: function render() {
this.ctx.fillRect(0, 0, this.outputWidth, this.outputHeight);
},
_draw: function _draw() {
var _this9 = this;
var _this10 = this;

this.$nextTick(function () {
if (!_this9.img) return;
if (typeof window !== 'undefined' && window.requestAnimationFrame) {
requestAnimationFrame(_this9._drawFrame);
requestAnimationFrame(_this10._drawFrame);
} else {
_this9._drawFrame();
_this10._drawFrame();
}
});
},
_drawFrame: function _drawFrame() {
if (!this.img) return;
this.loading = false;
var ctx = this.ctx;
var _imgData2 = this.imgData,
Expand Down Expand Up @@ -1511,12 +1607,12 @@ var component = { render: function render() {
ctx.closePath();
},
_createContainerClipPath: function _createContainerClipPath() {
var _this10 = this;
var _this11 = this;

this._clipPathFactory(0, 0, this.outputWidth, this.outputHeight);
if (this.clipPlugins && this.clipPlugins.length) {
this.clipPlugins.forEach(function (func) {
func(_this10.ctx, 0, 0, _this10.outputWidth, _this10.outputHeight);
func(_this11.ctx, 0, 0, _this11.outputWidth, _this11.outputHeight);
});
}
},
Expand Down Expand Up @@ -1548,7 +1644,7 @@ var component = { render: function render() {
ctx.restore();
},
_applyMetadata: function _applyMetadata() {
var _this11 = this;
var _this12 = this;

if (!this.userMetadata) return;
var _userMetadata = this.userMetadata,
Expand All @@ -1570,7 +1666,7 @@ var component = { render: function render() {
}

this.$nextTick(function () {
_this11.userMetadata = null;
_this12.userMetadata = null;
});
},
onDimensionChange: function onDimensionChange() {
Expand Down
4 changes: 2 additions & 2 deletions dist/vue-croppa.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/dist/build.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 8bd7b16

Please sign in to comment.