我有一个 Canvas 标签:
<canvas width="321" height="240" id="img_source"></canvas>
我想添加裁剪功能，所以我制作了一个可调整大小的div，它可以通过使用鼠标拖动div 的 Angular 来识别裁剪图像的边界。它看起来像下图:
我目前正在使用“toDataURL()”将 Canvas 中的数据转换为可以由 <img> 显示的图像标签。我的问题是，如何将可调整大小的 div 识别的 Canvas 的一部分转换为图像？
最佳答案
使用方法getImageData与选定的矩形坐标。例如:
let imageData = ctx.getImageData(65, 60, 100, 100);
然后创建一个具有所需尺寸的辅助 Canvas 并使用 putImageData设置像素:
let canvas1 = document.createElement("canvas");
canvas1.width = 100;
canvas1.height = 100;
let ctx1 = canvas1.getContext("2d");
ctx1.rect(0, 0, 100, 100);
ctx1.fillStyle = 'white';
ctx1.fill();
ctx1.putImageData(imageData, 0, 0);
最后使用toDataURL更新图片:
dstImg.src = canvas1.toDataURL("image/png");
在 CodePen 中查看我为您准备的完整示例
关于javascript - 裁剪 Canvas 中显示的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28538913/