Skip to content

Commit

Permalink
1.3.5 build
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhanziyang
zhanziyang committed Apr 19, 2018
1 parent 045a44d commit aed0424
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 67 deletions.
11 changes: 9 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
# vue-croppa

> A simple straightforward customizable lightweight mobile-friendly image cropper for Vue 2.0.
> A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.
<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>

## Features

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

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


#### video-enabled

(**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.

* type: `boolean`
* default: `false`

---

### 🌱 Slots
Expand Down
43 changes: 25 additions & 18 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.4
* vue-croppa v1.3.5
* https://github.com/zhanziyang/vue-croppa
*
* Copyright (c) 2018 zhanziyang
Expand Down Expand Up @@ -548,20 +548,20 @@ var component = { render: function render() {
currentPointerCoord: null,
currentIsInitial: false,
loading: false,
realWidth: 0,
realHeight: 0,
realWidth: 0, // only for when autoSizing is on
realHeight: 0, // only for when autoSizing is on
chosenFile: null
};
},


computed: {
outputWidth: function outputWidth() {
var w = this.autoSizing ? this.realWidth : this.width;
var w = this.useAutoSizing ? this.realWidth : this.width;
return w * this.quality;
},
outputHeight: function outputHeight() {
var h = this.autoSizing ? this.realHeight : this.height;
var h = this.useAutoSizing ? this.realHeight : this.height;
return h * this.quality;
},
computedPlaceholderFontSize: function computedPlaceholderFontSize() {
Expand All @@ -577,6 +577,9 @@ var component = { render: function render() {
right: '15px',
bottom: '10px'
};
},
useAutoSizing: function useAutoSizing() {
return this.autoSizing && this.$refs.wrapper && getComputedStyle;
}
},

Expand Down Expand Up @@ -619,10 +622,14 @@ var component = { render: function render() {
});
}

this._autoSizingInit();
if (this.useAutoSizing) {
this._autoSizingInit();
}
},
beforeDestroy: function beforeDestroy() {
this._autoSizingRemove();
if (this.useAutoSizing) {
this._autoSizingRemove();
}
},


Expand Down Expand Up @@ -731,9 +738,11 @@ var component = { render: function render() {
this.$emit(events.LOADING_END);
}
},
autoSizing: function autoSizing(val) {
useAutoSizing: function useAutoSizing(val) {
if (val) {
this._autoSizingInit();
} else {
this._autoSizingRemove();
}
}
},
Expand Down Expand Up @@ -935,21 +944,18 @@ var component = { render: function render() {
this.$emit(evt.type, evt);
},
_setContainerSize: function _setContainerSize() {
if (this.$refs.wrapper && getComputedStyle) {
if (this.useAutoSizing) {
this.realWidth = +getComputedStyle(this.$refs.wrapper).width.slice(0, -2);
this.realHeight = +getComputedStyle(this.$refs.wrapper).height.slice(0, -2);
}
},
_autoSizingInit: function _autoSizingInit() {
if (this.useAutoSizing) {
this._setContainerSize();
window.addEventListener('resize', this._setContainerSize);
}
this._setContainerSize();
window.addEventListener('resize', this._setContainerSize);
},
_autoSizingRemove: function _autoSizingRemove() {
if (this.useAutoSizing) {
window.removeEventListener('resize', this._setContainerSize);
}
this._setContainerSize();
window.removeEventListener('resize', this._setContainerSize);
},
_initialize: function _initialize() {
this.canvas = this.$refs.canvas;
Expand All @@ -963,6 +969,7 @@ var component = { render: function render() {
this.ctx.imageSmoothingEnabled = true;
this.originalImage = null;
this.img = null;
this.$refs.fileInput.value = '';
this.imageSet = false;
this.chosenFile = null;
this._setInitial();
Expand All @@ -973,8 +980,8 @@ var component = { render: function render() {
_setSize: function _setSize() {
this.canvas.width = this.outputWidth;
this.canvas.height = this.outputHeight;
this.canvas.style.width = (this.realWidth || this.width) + 'px';
this.canvas.style.height = (this.realHeight || this.height) + 'px';
this.canvas.style.width = (this.useAutoSizing ? this.realWidth : this.width) + 'px';
this.canvas.style.height = (this.useAutoSizing ? this.realHeight : this.height) + 'px';
},
_rotateByStep: function _rotateByStep(step) {
var orientation = 1;
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.

45 changes: 26 additions & 19 deletions docs/src/croppa/vue-croppa.js
View file

Large diffs are not rendered by default.

58 changes: 33 additions & 25 deletions src/cropper.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,20 +118,20 @@ export default {
currentPointerCoord: null,
currentIsInitial: false,
loading: false,
realWidth: 0,
realHeight: 0,
realWidth: 0, // only for when autoSizing is on
realHeight: 0, // only for when autoSizing is on
chosenFile: null
}
},
computed: {
outputWidth () {
const w = this.autoSizing ? this.realWidth : this.width
const w = this.useAutoSizing ? this.realWidth : this.width
return w * this.quality
},
outputHeight () {
const h = this.autoSizing ? this.realHeight : this.height
const h = this.useAutoSizing ? this.realHeight : this.height
return h * this.quality
},
Expand All @@ -150,6 +150,10 @@ export default {
right: '15px',
bottom: '10px'
}
},
useAutoSizing () {
return this.autoSizing && this.$refs.wrapper && getComputedStyle
}
},
Expand Down Expand Up @@ -190,11 +194,15 @@ export default {
})
}
this._autoSizingInit()
if (this.useAutoSizing) {
this._autoSizingInit()
}
},
beforeDestroy () {
this._autoSizingRemove()
if (this.useAutoSizing) {
this._autoSizingRemove()
}
},
watch: {
Expand Down Expand Up @@ -301,9 +309,11 @@ export default {
this.$emit(events.LOADING_END)
}
},
autoSizing (val) {
useAutoSizing (val) {
if (val) {
this._autoSizingInit()
} else {
this._autoSizingRemove()
}
}
},
Expand Down Expand Up @@ -503,28 +513,25 @@ export default {
}
},
emitNativeEvent(evt) {
emitNativeEvent (evt) {
this.$emit(evt.type, evt);
},
_setContainerSize () {
if (this.$refs.wrapper && getComputedStyle) {
if (this.useAutoSizing) {
this.realWidth = +getComputedStyle(this.$refs.wrapper).width.slice(0, -2)
this.realHeight = +getComputedStyle(this.$refs.wrapper).height.slice(0, -2)
}
},
_autoSizingInit () {
if (this.useAutoSizing) {
this._setContainerSize()
window.addEventListener('resize', this._setContainerSize)
}
this._setContainerSize()
window.addEventListener('resize', this._setContainerSize)
},
_autoSizingRemove () {
if (this.useAutoSizing) {
window.removeEventListener('resize', this._setContainerSize)
}
this._setContainerSize()
window.removeEventListener('resize', this._setContainerSize)
},
_initialize () {
Expand All @@ -539,6 +546,7 @@ export default {
this.ctx.imageSmoothingEnabled = true;
this.originalImage = null
this.img = null
this.$refs.fileInput.value = ''
this.imageSet = false
this.chosenFile = null
this._setInitial()
Expand All @@ -550,8 +558,8 @@ export default {
_setSize () {
this.canvas.width = this.outputWidth
this.canvas.height = this.outputHeight
this.canvas.style.width = (this.realWidth || this.width) + 'px'
this.canvas.style.height = (this.realHeight || this.height) + 'px'
this.canvas.style.width = (this.useAutoSizing ? this.realWidth : this.width) + 'px'
this.canvas.style.height = (this.useAutoSizing ? this.realHeight : this.height) + 'px'
},
_rotateByStep (step) {
Expand Down Expand Up @@ -931,7 +939,7 @@ export default {
},
_handlePointerStart (evt) {
this.emitNativeEvent(evt)
this.emitNativeEvent(evt)
if (this.passive) return
this.supportTouch = true
this.pointerMoved = false
Expand Down Expand Up @@ -968,7 +976,7 @@ export default {
},
_handlePointerEnd (evt) {
this.emitNativeEvent(evt)
this.emitNativeEvent(evt)
if (this.passive) return
let pointerMoveDistance = 0
if (this.pointerStartCoord) {
Expand Down Expand Up @@ -1031,7 +1039,7 @@ export default {
},
_handleWheel (evt) {
this.emitNativeEvent(evt)
this.emitNativeEvent(evt)
if (this.passive) return
if (this.disabled || this.disableScrollToZoom || !this.hasImage()) return
evt.preventDefault()
Expand All @@ -1047,26 +1055,26 @@ export default {
},
_handleDragEnter (evt) {
this.emitNativeEvent(evt)
this.emitNativeEvent(evt)
if (this.passive) return
if (this.disabled || this.disableDragAndDrop || !u.eventHasFile(evt)) return
if (this.hasImage() && !this.replaceDrop) return
this.fileDraggedOver = true
},
_handleDragLeave (evt) {
this.emitNativeEvent(evt)
this.emitNativeEvent(evt)
if (this.passive) return
if (!this.fileDraggedOver || !u.eventHasFile(evt)) return
this.fileDraggedOver = false
},
_handleDragOver (evt) {
this.emitNativeEvent(evt)
this.emitNativeEvent(evt)
},
_handleDrop (evt) {
this.emitNativeEvent(evt)
this.emitNativeEvent(evt)
if (this.passive) return
if (!this.fileDraggedOver || !u.eventHasFile(evt)) return
if (this.hasImage() && this.replaceDrop) {
Expand Down

0 comments on commit aed0424

Please sign in to comment.