在做web前端开发的时候，上传用户头像的时候，用户需要将图片进行裁剪等操作，这些什么怎么实现，可以讲解下吗？

Answer 1

张轩 2020-11-16 11:23:23

可以在组件生命周期 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)
    }
})

Answer 2

提问者 慕侠3371156 2020-11-16 09:07:14

在vue  中怎么cropper.js呢 ？

Answer 3

张轩 2020-11-14 09:00:20

同学你好 

同学你好 先上传基本图片完毕，然后裁剪，裁剪使用的库一般是 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