import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
export default {
render(h) {
return h('div', { style: this.containerStyle }, [
h('img', {
ref: 'img',
attrs: {
src: this.src,
alt: this.alt || 'image',
style: 'max-width: 100%'
},
style: this.imgStyle
})
])
},
props: {
// Library props
containerStyle: Object,
src: {
type: String,
default: ''
},
alt: String,
imgStyle: Object,
// CropperJS props
viewMode: Number,
dragMode: String,
aspectRatio: Number,
data: Object,
preview: [String, Array, Element, NodeList],
responsive: {
type: Boolean,
default: true
},
restore: {
type: Boolean,
default: true
},
checkCrossOrigin: {
type: Boolean,
default: true
},
checkOrientation: {
type: Boolean,
default: true
},
modal: {
type: Boolean,
default: true
},
guides: {
type: Boolean,
default: true
},
center: {
type: Boolean,
default: true
},
highlight: {
type: Boolean,
default: true
},
background: {
type: Boolean,
default: true
},
autoCrop: {
type: Boolean,
default: true
},
autoCropArea: Number,
movable: {
type: Boolean,
default: true
},
rotatable: {
type: Boolean,
default: true
},
scalable: {
type: Boolean,
default: true
},
zoomable: {
type: Boolean,
default: true
},
zoomOnTouch: {
type: Boolean,
default: true
},
zoomOnWheel: {
type: Boolean,
default: true
},
wheelZoomRatio: Number,
cropBoxMovable: {
type: Boolean,
default: true
},
cropBoxResizable: {
type: Boolean,
default: true
},
toggleDragModeOnDblclick: {
type: Boolean,
default: true
},
// Size limitation
minCanvasWidth: Number,
minCanvasHeight: Number,
minCropBoxWidth: Number,
minCropBoxHeight: Number,
minContainerWidth: Number,
minContainerHeight: Number,
// callbacks
ready: Function,
cropstart: Function,
cropmove: Function,
cropend: Function,
crop: Function,
zoom: Function
},
mounted() {
const { containerStyle, src, alt, imgStyle, ...data } = this.$options.props
const props = {}
for (const key in data) {
if (this[key] !== undefined) {
props[key] = this[key]
}
}
this.cropper = new Cropper(this.$refs.img, props)
},
methods: {
// Reset the image and crop box to their initial states
reset() {
return this.cropper.reset()
},
// Clear the crop box
clear() {
return this.cropper.clear()
},
// Init crop box manually
initCrop() {
return this.cropper.crop()
},
/**
* Replace the image's src and rebuild the cropper
* @param {string} url - The new URL.
* @param {boolean} [onlyColorChanged] - Indicate if the new image only changed color.
* @returns {Object} this
*/
replace(url, onlyColorChanged = false) {
return this.cropper.replace(url, onlyColorChanged)
},
// Enable (unfreeze) the cropper
enable() {
return this.cropper.enable()
},
// Disable (freeze) the cropper
disable() {
return this.cropper.disable()
},
// Destroy the cropper and remove the instance from the image
destroy() {
return this.cropper.destroy()
},
/**
* Move the canvas with relative offsets
* @param {number} offsetX - The relative offset distance on the x-axis.
* @param {number} offsetY - The relative offset distance on the y-axis.
* @returns {Object} this
*/
move(offsetX, offsetY) {
return this.cropper.move(offsetX, offsetY)
},
/**
* Move the canvas to an absolute point
* @param {number} x - The x-axis coordinate.
* @param {number} [y=x] - The y-axis coordinate.
* @returns {Object} this
*/
moveTo(x, y = x) {
return this.cropper.moveTo(x, y)
},
/**
* Zoom the canvas with a relative ratio
* @param {number} ratio - The target ratio.
* @param {Event} _originalEvent - The original event if any.
* @returns {Object} this
*/
relativeZoom(ratio, _originalEvent) {
return this.cropper.zoom(ratio, _originalEvent)
},
/**
* Zoom the canvas to an absolute ratio
* @param {number} ratio - The target ratio.
* @param {Event} _originalEvent - The original event if any.
* @returns {Object} this
*/
zoomTo(ratio, _originalEvent) {
return this.cropper.zoomTo(ratio, _originalEvent)
},
/**
* Rotate the canvas with a relative degree
* @param {number} degree - The rotate degree.
* @returns {Object} this
*/
rotate(degree) {
return this.cropper.rotate(degree)
},
/**
* Rotate the canvas to an absolute degree
* @param {number} degree - The rotate degree.
* @returns {Object} this
*/
rotateTo(degree) {
return this.cropper.rotateTo(degree)
},
/**
* Scale the image on the x-axis.
* @param {number} scaleX - The scale ratio on the x-axis.
* @returns {Object} this
*/
scaleX(scaleX) {
return this.cropper.scaleX(scaleX)
},
/**
* Scale the image on the y-axis.
* @param {number} scaleY - The scale ratio on the y-axis.
* @returns {Object} this
*/
scaleY(scaleY) {
return this.cropper.scaleY(scaleY)
},
/**
* Scale the image
* @param {number} scaleX - The scale ratio on the x-axis.
* @param {number} [scaleY=scaleX] - The scale ratio on the y-axis.
* @returns {Object} this
*/
scale(scaleX, scaleY = scaleX) {
return this.cropper.scale(scaleX, scaleY)
},
/**
* Get the cropped area position and size data (base on the original image)
* @param {boolean} [rounded=false] - Indicate if round the data values or not.
* @returns {Object} The result cropped data.
*/
getData(rounded = false) {
return this.cropper.getData(rounded)
},
/**
* Set the cropped area position and size with new data
* @param {Object} data - The new data.
* @returns {Object} this
*/
setData(data) {
return this.cropper.setData(data)
},
/**
* Get the container size data.
* @returns {Object} The result container data.
*/
getContainerData() {
return this.cropper.getContainerData()
},
/**
* Get the image position and size data.
* @returns {Object} The result image data.
*/
getImageData() {
return this.cropper.getImageData()
},
/**
* Get the canvas position and size data.
* @returns {Object} The result canvas data.
*/
getCanvasData() {
return this.cropper.getCanvasData()
},
/**
* Set the canvas position and size with new data.
* @param {Object} data - The new canvas data.
* @returns {Object} this
*/
setCanvasData(data) {
return this.cropper.setCanvasData(data)
},
/**
* Get the crop box position and size data.
* @returns {Object} The result crop box data.
*/
getCropBoxData() {
return this.cropper.getCropBoxData()
},
/**
* Set the crop box position and size with new data.
* @param {Object} data - The new crop box data.
* @returns {Object} this
*/
setCropBoxData(data) {
return this.cropper.setCropBoxData(data)
},
/**
* Get a canvas drawn the cropped image.
* @param {Object} [options={}] - The config options.
* @returns {HTMLCanvasElement} - The result canvas.
*/
getCroppedCanvas(options = {}) {
return this.cropper.getCroppedCanvas(options)
},
/**
* Change the aspect ratio of the crop box.
* @param {number} aspectRatio - The new aspect ratio.
* @returns {Object} this
*/
setAspectRatio(aspectRatio) {
return this.cropper.setAspectRatio(aspectRatio)
},
/**
* Change the drag mode.
* @param {string} mode - The new drag mode.
* @returns {Object} this
*/
setDragMode(mode) {
return this.cropper.setDragMode(mode)
}
}
}