如何裁剪 canvas.toDataURL答案

【问题标题】：How to crop canvas.toDataURL如何裁剪 canvas.toDataURL
【发布时间】：2021-09-10 16:41:04
【问题描述】：

你好，
我想在将 canvas.toDataURL() 发送到服务器之前对其进行裁剪，但我没有找到方法 :(
这是我的代码：

TakePhoto: function() {
        var myCanvas = document.getElementById('game');
        var dataURL = myCanvas.toDataURL();
        // crop the dataURL
    }

那么，如何裁剪 dataURL ？
谁能帮我？
提前致谢

【问题讨论】：

您期望裁剪的输出究竟是什么？

标签： javascript canvas

【解决方案1】：

toDataURL 方法将始终捕获整个画布。

因此，要捕获裁剪的部分，您必须创建一个临时画布并将其调整为与裁剪相同的大小。

然后使用drawImage的扩展形式来裁剪原始图像并将其绘制到临时画布上。

示例代码和演示：

var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://i.stack.imgur.com/EUBBt.png";
function start(){
  var croppedURL=cropPlusExport(img,190,127,93,125);
  var cropImg=new Image();
  cropImg.src=croppedURL;
  document.body.appendChild(cropImg);
}

function cropPlusExport(img,cropX,cropY,cropWidth,cropHeight){
  // create a temporary canvas sized to the cropped size
  var canvas1=document.createElement('canvas');
  var ctx1=canvas1.getContext('2d');
  canvas1.width=cropWidth;
  canvas1.height=cropHeight;
  // use the extended from of drawImage to draw the
  // cropped area to the temp canvas
  ctx1.drawImage(img,cropX,cropY,cropWidth,cropHeight,0,0,cropWidth,cropHeight);
  // return the .toDataURL of the temp canvas
  return(canvas1.toDataURL());
}

body{ background-color: ivory; }
img{border:1px solid red; margin:0 auto; }

<h4>Original image</h4>
<img src='https://i.stack.imgur.com/EUBBt.png'>
<h4>Cropped image create from cropping .toDataURL</h4>

【讨论】：

谢谢！自我注意：使用 data-url 填充图像（而不是从 url 加载）时，您仍然需要使用 onload 处理程序，因为它不会按照stackoverflow.com/questions/4773966/… 将图像同步绘制到画布上

【解决方案2】：

这是另一个例子。

假设你已经有一个画布并且想要做一些修改。

例如，您可以使用html2canvas.js，它会为您返回canvas，但您可能需要对其进行编辑...

但是作为一个例子，我不想涉及太多无关的包，所以在我的例子中，我使用一个简单的方法来生成一个画布

示例

<img id="original">
<br>
<button>click me</button>
<br>

<script>
  window.onload = () => {
    // Create a canvas to represent a canvas generated by your programs.
    const img = document.querySelector(`#original`)
    const orgCanvas = document.createElement(`canvas`)
    const orgCanvasCtx = orgCanvas.getContext(`2d`)
    img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA1JJREFUaEPtmlmoTVEYx3/nTRkiUaYHSoREhgwpU3gwhjdPXkik3IQkbombBykPhjwoeaHMmQsvIkOIMpYnmZIhTxL9b9+qbd+99j777rOds0971e109lrrW9//+/+/b629zq1Q8FYpuP80FYCzwHigf4Oz8g64DyySn46BPw3utM+9igDsBjYXFECbADwHhhUUwAsBKKp82mNeAqi39EoGSgYyRqCUUMYAZp6eloHPwC5gCTAt8+o1MJAWwFjgA/AS6Bax/ozQM40ZaUeVnjXwt4OJNABuAnJwB7Dd44zveD4GOAcMqjWIagDorDQEuA18AiYA34HREc7I3nTghvWdBx4a6LXA/v8JQFJZDNyxRWcCj4Av9l2OHgMGBpwKA1DXM2CUHRgVDLUnATv6LltqYlltHNA9YNc9HwAMDQYhjoGlwKmYiI0ATpjG3bAoAOqT9OSEDo4ngXWWS26ek6U+W4HrwCzr/GGABgNXwv74AHwFeiXQfdoYCgckKCH1icHJxoBk2NsmHAC6AAeBu8BlQIk+ySrdFht3FZgLtAGbqgXgEjYOwzegR2hAmIF9wC3gDKAcWGGOaporBMft+R5gIzDRZOnY3wlsA+7ZK+8/S/oYqAbA05B8ZDhNFdIar4GPwNZAdZOMjhgr0vxCk5tY6tB8AFRt+iZIaB5wycOAexy1D7SYxpXIWkN/CobLAzkqGYkBSU8leKXJqmoAGijdSX9xLax3XxI7Gw9MBnJ2viVn1P6iV1wVESXybOCafaYCcAhYnQBAVzGi2LUkAKowcl6b2gKbJEb2hjZIJavAKkBHgVc+ecaVUcloiuk0CsdyK6NJVSjY7xiYCqwHLgI/rbQGd3hVrjnGkNhQpYpsSTuxNL7GFpHmVZNVUfpY8oWNJjGg8RsAleC3pnVd60QdUfoB7w3css4CcPMUpa72RXtE1oPZL+ANMDxGotq4fgOP4/akJAYSUiC37sPAKjs7af/wtkYEENxLEu+sGhGAKpWakjxRqo0IIJUuSwCpwpXD4JKBHIKaymTJQKpw5TC4KRgo/E9McRdVOZBeU5Ot7tyhiyh3N1PTFXI01v4mFzw4BV/zclw3s2m9FF2wN7jm+leDzKGphwHfPU49fOnUmn8Bhg+5xswBadMAAAAASUVORK5CYII="
    img.onload = e => {
      orgCanvasCtx.drawImage(e.target, 0, 0)
    }

    document.querySelector(`button`).onclick = () => {
      // Getting start crop after orgCanvas is ready.
      const quality = 1.0
      const blobURL = orgCanvas.toDataURL(`image/png`, quality)
      const cropImg = new Image()
      cropImg.src = blobURL
      cropImg.dataset.cropOptions = JSON.stringify({  // like <img data-crop-options="...">
        x: 3, y: 10, width: 15, height: 26
      })
      cropImg.onload = () => {
        URL.revokeObjectURL(cropImg.src)
        if (cropImg.dataset.cropOptions === "") {
          return
        }
        const {x, y, width, height} = JSON.parse(cropImg.dataset.cropOptions)
        const cropCanvas = document.createElement(`canvas`);
        [cropCanvas.width, cropCanvas.height] = [width, height]

        const cropCanvasCtx = cropCanvas.getContext(`2d`)
        cropCanvasCtx.drawImage(cropImg,
          x, y, width, height,
          0, 0, width, height, // paste it to the left upper corner
        )

        cropImg.dataset.cropOptions = "" // stop callback
        cropImg.src = cropCanvas.toDataURL(`image/png`, quality) // it will do cropImg.onload again ...
      }
      document.body.append(cropImg)
    }
  }
</script>

【讨论】：