Skip to content

Commit aed0424

Browse files
zhanziyangzhanziyang
committed
1.3.5 build
1 parent 045a44d commit aed0424

File tree

6 files changed

+96
-67
lines changed

6 files changed

+96
-67
lines changed

‎README.md‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
# vue-croppa
22

3-
> A simple straightforward customizable lightweight mobile-friendly image cropper for Vue 2.0.
3+
> A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.
44
55
<a href="https://zhanziyang.github.io/vue-croppa/"><img src="https://zhanziyang.github.io/vue-croppa/static/preview2.png?v=3" width="400" alt="try it out" /></a>
66

77
## Features
88

99
* **Straightforward**: What you see is what you get
1010
* **Highly customizable**: You can almost customize anything except the core functionalities
11-
* **Lightweight**: 28kb in total
1211
* **Mobile-friendly**: Supports drag to move and pinch with two fingers to zoom on mobile devices
1312
* **EXIF orientation**: v0.2.0+ Support correctly show image with EXIF orientation
1413

@@ -455,6 +454,14 @@ These states will be synced:
455454
* default: `false`
456455
* [Demo](https://codepen.io/zhanziyang/pen/bvVKzL)
457456

457+
458+
#### video-enabled
459+
460+
(**1.3.1**) If it is set to `true`, you can choose a video file. If the video is supported by the browser, the first frame will be drawn on the canvas. You can play/pause the video by dbclick croppa. This feature is not fully developed yet, but you can still play around with it.
461+
462+
* type: `boolean`
463+
* default: `false`
464+
458465
---
459466

460467
### 🌱 Slots

‎dist/vue-croppa.js‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* vue-croppa v1.3.4
2+
* vue-croppa v1.3.5
33
* https://github.com/zhanziyang/vue-croppa
44
*
55
* Copyright (c) 2018 zhanziyang
@@ -548,20 +548,20 @@ var component = { render: function render() {
548548
currentPointerCoord: null,
549549
currentIsInitial: false,
550550
loading: false,
551-
realWidth: 0,
552-
realHeight: 0,
551+
realWidth: 0, // only for when autoSizing is on
552+
realHeight: 0, // only for when autoSizing is on
553553
chosenFile: null
554554
};
555555
},
556556

557557

558558
computed: {
559559
outputWidth: function outputWidth() {
560-
var w = this.autoSizing ? this.realWidth : this.width;
560+
var w = this.useAutoSizing ? this.realWidth : this.width;
561561
return w * this.quality;
562562
},
563563
outputHeight: function outputHeight() {
564-
var h = this.autoSizing ? this.realHeight : this.height;
564+
var h = this.useAutoSizing ? this.realHeight : this.height;
565565
return h * this.quality;
566566
},
567567
computedPlaceholderFontSize: function computedPlaceholderFontSize() {
@@ -577,6 +577,9 @@ var component = { render: function render() {
577577
right: '15px',
578578
bottom: '10px'
579579
};
580+
},
581+
useAutoSizing: function useAutoSizing() {
582+
return this.autoSizing && this.$refs.wrapper && getComputedStyle;
580583
}
581584
},
582585

@@ -619,10 +622,14 @@ var component = { render: function render() {
619622
});
620623
}
621624

622-
this._autoSizingInit();
625+
if (this.useAutoSizing) {
626+
this._autoSizingInit();
627+
}
623628
},
624629
beforeDestroy: function beforeDestroy() {
625-
this._autoSizingRemove();
630+
if (this.useAutoSizing) {
631+
this._autoSizingRemove();
632+
}
626633
},
627634

628635

@@ -731,9 +738,11 @@ var component = { render: function render() {
731738
this.$emit(events.LOADING_END);
732739
}
733740
},
734-
autoSizing: function autoSizing(val) {
741+
useAutoSizing: function useAutoSizing(val) {
735742
if (val) {
736743
this._autoSizingInit();
744+
} else {
745+
this._autoSizingRemove();
737746
}
738747
}
739748
},
@@ -935,21 +944,18 @@ var component = { render: function render() {
935944
this.$emit(evt.type, evt);
936945
},
937946
_setContainerSize: function _setContainerSize() {
938-
if (this.$refs.wrapper && getComputedStyle) {
947+
if (this.useAutoSizing) {
939948
this.realWidth = +getComputedStyle(this.$refs.wrapper).width.slice(0, -2);
940949
this.realHeight = +getComputedStyle(this.$refs.wrapper).height.slice(0, -2);
941950
}
942951
},
943952
_autoSizingInit: function _autoSizingInit() {
944-
if (this.useAutoSizing) {
945-
this._setContainerSize();
946-
window.addEventListener('resize', this._setContainerSize);
947-
}
953+
this._setContainerSize();
954+
window.addEventListener('resize', this._setContainerSize);
948955
},
949956
_autoSizingRemove: function _autoSizingRemove() {
950-
if (this.useAutoSizing) {
951-
window.removeEventListener('resize', this._setContainerSize);
952-
}
957+
this._setContainerSize();
958+
window.removeEventListener('resize', this._setContainerSize);
953959
},
954960
_initialize: function _initialize() {
955961
this.canvas = this.$refs.canvas;
@@ -963,6 +969,7 @@ var component = { render: function render() {
963969
this.ctx.imageSmoothingEnabled = true;
964970
this.originalImage = null;
965971
this.img = null;
972+
this.$refs.fileInput.value = '';
966973
this.imageSet = false;
967974
this.chosenFile = null;
968975
this._setInitial();
@@ -973,8 +980,8 @@ var component = { render: function render() {
973980
_setSize: function _setSize() {
974981
this.canvas.width = this.outputWidth;
975982
this.canvas.height = this.outputHeight;
976-
this.canvas.style.width = (this.realWidth || this.width) + 'px';
977-
this.canvas.style.height = (this.realHeight || this.height) + 'px';
983+
this.canvas.style.width = (this.useAutoSizing ? this.realWidth : this.width) + 'px';
984+
this.canvas.style.height = (this.useAutoSizing ? this.realHeight : this.height) + 'px';
978985
},
979986
_rotateByStep: function _rotateByStep(step) {
980987
var orientation = 1;

‎dist/vue-croppa.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/dist/build.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.

‎docs/src/croppa/vue-croppa.js‎

Lines changed: 26 additions & 19 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/cropper.vue‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -118,20 +118,20 @@ export default {
118118
currentPointerCoord: null,
119119
currentIsInitial: false,
120120
loading: false,
121-
realWidth: 0,
122-
realHeight: 0,
121+
realWidth: 0, // only for when autoSizing is on
122+
realHeight: 0, // only for when autoSizing is on
123123
chosenFile: null
124124
}
125125
},
126126
127127
computed: {
128128
outputWidth () {
129-
const w = this.autoSizing ? this.realWidth : this.width
129+
const w = this.useAutoSizing ? this.realWidth : this.width
130130
return w * this.quality
131131
},
132132
133133
outputHeight () {
134-
const h = this.autoSizing ? this.realHeight : this.height
134+
const h = this.useAutoSizing ? this.realHeight : this.height
135135
return h * this.quality
136136
},
137137
@@ -150,6 +150,10 @@ export default {
150150
right: '15px',
151151
bottom: '10px'
152152
}
153+
},
154+
155+
useAutoSizing () {
156+
return this.autoSizing && this.$refs.wrapper && getComputedStyle
153157
}
154158
},
155159
@@ -190,11 +194,15 @@ export default {
190194
})
191195
}
192196
193-
this._autoSizingInit()
197+
if (this.useAutoSizing) {
198+
this._autoSizingInit()
199+
}
194200
},
195201
196202
beforeDestroy () {
197-
this._autoSizingRemove()
203+
if (this.useAutoSizing) {
204+
this._autoSizingRemove()
205+
}
198206
},
199207
200208
watch: {
@@ -301,9 +309,11 @@ export default {
301309
this.$emit(events.LOADING_END)
302310
}
303311
},
304-
autoSizing (val) {
312+
useAutoSizing (val) {
305313
if (val) {
306314
this._autoSizingInit()
315+
} else {
316+
this._autoSizingRemove()
307317
}
308318
}
309319
},
@@ -503,28 +513,25 @@ export default {
503513
}
504514
},
505515
506-
emitNativeEvent(evt) {
516+
emitNativeEvent (evt) {
507517
this.$emit(evt.type, evt);
508518
},
509519
510520
_setContainerSize () {
511-
if (this.$refs.wrapper && getComputedStyle) {
521+
if (this.useAutoSizing) {
512522
this.realWidth = +getComputedStyle(this.$refs.wrapper).width.slice(0, -2)
513523
this.realHeight = +getComputedStyle(this.$refs.wrapper).height.slice(0, -2)
514524
}
515525
},
516526
517527
_autoSizingInit () {
518-
if (this.useAutoSizing) {
519-
this._setContainerSize()
520-
window.addEventListener('resize', this._setContainerSize)
521-
}
528+
this._setContainerSize()
529+
window.addEventListener('resize', this._setContainerSize)
522530
},
523531
524532
_autoSizingRemove () {
525-
if (this.useAutoSizing) {
526-
window.removeEventListener('resize', this._setContainerSize)
527-
}
533+
this._setContainerSize()
534+
window.removeEventListener('resize', this._setContainerSize)
528535
},
529536
530537
_initialize () {
@@ -539,6 +546,7 @@ export default {
539546
this.ctx.imageSmoothingEnabled = true;
540547
this.originalImage = null
541548
this.img = null
549+
this.$refs.fileInput.value = ''
542550
this.imageSet = false
543551
this.chosenFile = null
544552
this._setInitial()
@@ -550,8 +558,8 @@ export default {
550558
_setSize () {
551559
this.canvas.width = this.outputWidth
552560
this.canvas.height = this.outputHeight
553-
this.canvas.style.width = (this.realWidth || this.width) + 'px'
554-
this.canvas.style.height = (this.realHeight || this.height) + 'px'
561+
this.canvas.style.width = (this.useAutoSizing ? this.realWidth : this.width) + 'px'
562+
this.canvas.style.height = (this.useAutoSizing ? this.realHeight : this.height) + 'px'
555563
},
556564
557565
_rotateByStep (step) {
@@ -931,7 +939,7 @@ export default {
931939
},
932940
933941
_handlePointerStart (evt) {
934-
this.emitNativeEvent(evt)
942+
this.emitNativeEvent(evt)
935943
if (this.passive) return
936944
this.supportTouch = true
937945
this.pointerMoved = false
@@ -968,7 +976,7 @@ export default {
968976
},
969977
970978
_handlePointerEnd (evt) {
971-
this.emitNativeEvent(evt)
979+
this.emitNativeEvent(evt)
972980
if (this.passive) return
973981
let pointerMoveDistance = 0
974982
if (this.pointerStartCoord) {
@@ -1031,7 +1039,7 @@ export default {
10311039
},
10321040
10331041
_handleWheel (evt) {
1034-
this.emitNativeEvent(evt)
1042+
this.emitNativeEvent(evt)
10351043
if (this.passive) return
10361044
if (this.disabled || this.disableScrollToZoom || !this.hasImage()) return
10371045
evt.preventDefault()
@@ -1047,26 +1055,26 @@ export default {
10471055
},
10481056
10491057
_handleDragEnter (evt) {
1050-
this.emitNativeEvent(evt)
1058+
this.emitNativeEvent(evt)
10511059
if (this.passive) return
10521060
if (this.disabled || this.disableDragAndDrop || !u.eventHasFile(evt)) return
10531061
if (this.hasImage() && !this.replaceDrop) return
10541062
this.fileDraggedOver = true
10551063
},
10561064
10571065
_handleDragLeave (evt) {
1058-
this.emitNativeEvent(evt)
1066+
this.emitNativeEvent(evt)
10591067
if (this.passive) return
10601068
if (!this.fileDraggedOver || !u.eventHasFile(evt)) return
10611069
this.fileDraggedOver = false
10621070
},
10631071
10641072
_handleDragOver (evt) {
1065-
this.emitNativeEvent(evt)
1073+
this.emitNativeEvent(evt)
10661074
},
10671075
10681076
_handleDrop (evt) {
1069-
this.emitNativeEvent(evt)
1077+
this.emitNativeEvent(evt)
10701078
if (this.passive) return
10711079
if (!this.fileDraggedOver || !u.eventHasFile(evt)) return
10721080
if (this.hasImage() && this.replaceDrop) {

0 commit comments

Comments
 (0)