视频演示：video
https://ffx0s.github.io/xcrop/dist/crop.html
Install with npm: npm install xcrop --save
import Crop from 'xcrop'
const options = {
width: 300,
height: 300,
target: 'http://7jptea.com1.z0.glb.clouddn.com/test/images/test3.jpg',
cancle: function () {
this.hide()
},
confirm: function () {
this.hide()
console.log(this.get({width: 600}))
}
}
const crop = new Crop(options)或者：
<script src="crop.js"></script>
<script>
var options = {
width: 300,
height: 300,
target: 'http://7jptea.com1.z0.glb.clouddn.com/test/images/test3.jpg',
cancle: function () {
this.hide()
},
confirm: function () {
this.hide()
console.log(this.get({width: 600}))
}
}
var crop = new Crop(options)
</script>Type: Number
Value: 300
width: 300裁剪框宽度.
Type: Number
Value: 300
height: 300裁剪框高度.
Type: String, Element or File
target: 'http://xxx.jpg'
target: 'data:image/jpeg;base64,xxxxxx'
target: 'blob:http://localhost/24dfe01f-d581-4618-b595-f179cadc4e2f'
target: document.getElementById('image')
target: document.getElementById('canvas')裁剪图片目标，支持二进制、base64、imageElement、objectUrl和canvas.
Type: Number
maxScale: 1.5可以缩放的最大比例, 默认值是2倍
Type: Function
created: function () {}节点创建完成，等待渲染到html页面的回调函数
Type: Function
mounted: function () {}渲染到html页面完成的回调函数
Type: Function
loaded: function () {}图片加载完成的回调函数
Type: Function
/**
* 裁剪函数，根据裁剪参数，输出裁剪后的图片
* @param {object} options
* @property {number} options.width - 裁剪宽度，默认值为裁剪框的width
* @property {number} options.height - 裁剪高度，默认值为裁剪框的height
* @property {string} options.type - 图片格式，默认'image/jpeg'
* @property {number} options.quality - 图片质量，默认0.85，取值区间0~1
* @return {object} 裁剪后的图片信息
*/
var options = {
width: 300,
height: 300,
type: 'image/jpeg',
quality: 0.85
}
this.get(options)
输出：
{
// 文件对象
blob: Blob,
// canvas element
canvas: canvas,
// base64图片地址
src: 'data:image/jpeg;base64,/xxxx',
// objectUrl地址
url: 'blob:http://localhost/24dfe01f-d581-4618-b595-f179cadc4e2f'
}Type: Function
/**
* 图片移动函数，以左上角为原点（不是以裁剪框为原点），移动到x，y坐标.
* @param {number} x - x坐标.
* @param {number} y - y坐标.
*/
this.moveTo(x, y)Type: Function
/**
* 加载裁剪图片，实例化之后需要更换图片可以调用这个.
* @param {(string|file|element)} target - 更换的图片，值可以是二进制、base64、imageElement、objectUrl或者canvas.
*/
this.load(target)Type: Function
// 显示，改变css的display为block
this.show()
// 隐藏，改变css的display为none
this.hide()Type: Function
// 从dom节点上移除
this.destroy()Type: Function
/**
* 图片加载函数，会自动更正图片的方向问题.
* @param {(string|file|element)} target - 目标，值可以是二进制、base64、imageElement、objectUrl或者canvas.
* @param {function} callback - 加载完成后的回调函数，function callback(canvas) {...}.
*/
Crop.loadImage(target, callback)const crop = new Crop({
mounted: function () {
const pinch = this.pinch
;['mousewheel', 'touchstart', 'touchmove', 'touchend', 'pinchstart', 'pinchmove'].forEach(value => {
pinch.on(value, function (e) {
console.log(value)
})
})
}
})Android 4+, iOS 6+
calendar is released under the MIT License. Have at it.