canvas图片裁剪

主要用到的方法

1. ctx.drawimage()
2. ctx.getImageData()
3. ctx.putImageData()
4. canvas.toDataURL()

方法详解：

有待更新...

代码

 let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    
    function getImage() {
      return new Promise((resolve, reject) => {
        let img = new Image()
        img.crossOrigin = '*';
        img.src = 'https://ks3-cn-beijing.ksyun.com/labelmark/fe/000006d08fd3cd8805f173e3e5fbcf96.jpg'
        img.onload = function () {
          resolve(img)
        }
      })
    }
    async function drawImage(){
      let img =await getImage();
      ctx.drawImage(img,0,0);
      let data = ctx.getImageData(0,0,200,200)
      return data;
      
    }
    async function MakeImg(){
      let data = await drawImage();
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      
      ctx.putImageData(data,0,0);
      let dataUrl = canvas.toDataURL('image/png');
      console.log(dataUrl)
    }
    MakeImg()

实现思路

1. 加载图片
2. 创建画布
3. 用drawImage()将图片放入canvas中
4. 通过getImageData()拿去需要的数据
5. 创建一个新的画布
6. 将4中获取到的数据putImageData()到新的画布
7. 用toDataUrl()生成图片

注意事项

1. 操作图片数据，图片链接后端必须设置头：access-control-allow-orign:'*'
2. 前端加载图片需要设置crossOrigin = '*'

持续更新中...