canvas 实现截图展示

1,068 阅读9分钟

之前在业务中有一个在整在图像中扣取指定对角坐标矩形的图片,并展示出来, 用 Canvas 可以很好的实现

  <canvas id="clip" style="display: none"></canvas>
  <canvas id="canvas" width=300 height=300></canvas>
  <img id="clip-img" src=""/>
const clip = document.getElementById('clip');
const canvas = document.getElementById('canvas');
const contextClip = clip.getContext('2d');
const context = canvas.getContext('2d');
const renderImg = document.getElementById('clip-img')

 //渲染图像
const drawImage = () => {
  const img = new Image();
  img.src = 'data:image/jpeg;base64,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';
  img.onload = () => {
    context.drawImage(img, 0, 0, canvas.width, canvas.height);
    clipImage(10, 10, 100, 100)
  }
}

// 裁剪指定区域图像
const clipImage = (x, y, w, h) => {
  const clipImgData = context.getImageData(x, y, w, h)
  clip.width = w
  clip.height = h
  contextClip.putImageData(clipImgData, 0, 0, 0, 0, w, h);
  const imgUrl = clip.toDataURL();
  console.log(imgUrl)

  renderImg.src = imgUrl
}

drawImage()

可以实际体验下

codepen.io/3CrazySpeci…