3回答

张轩

2020-11-16

可以在组件生命周期 onMounted 的时候初始化 copper，这时候只要有 dom （img） 节点就可以进行初始化，

// 这是一个 image 元素
const image = document.getElementById('processed-image')
const cropper = new Cropper(image, {
    checkCrossOrigin: false,
    crop (event) {
    const { x, y, width, height } = event.detail
    cropperData = {
        x: Math.floor(x),
        y: Math.floor(y),
        width: Math.floor(width),
        height: Math.floor(height)
    }
})

0

0

慕侠3371156

提问者

2020-11-16

在vue  中怎么cropper.js呢 ？

0

0

张轩

2020-11-14

同学你好 

同学你好 先上传基本图片完毕，然后裁剪，裁剪使用的库一般是 cropper.js 可以看一下它的demo https://fengyuanchen.github.io/cropperjs/ 使用这个库裁剪完毕以后 回调函数中有对应的数据 比如坐标之类。之后有两种方法，根据你选用的不同的图片服务。

1 自己的图片服务，使用 getCroppedCanvas 获得 canvas 对象，然后重新上传，具体例子请看 https://github.com/fengyuanchen/cropperjs/blob/master/README.md#getcroppedcanvasoptions  这里有很详细的代码

2 阿里云等 oss，自带裁剪功能，往图片后面添加参数即可，刚才回调中可以拿到坐标，直接拼接在原来的 url 后面即可，不需要重新上传图片。文档：https://help.aliyun.com/document_detail/44688.html

0

0