javascript - 在作为 DataURL 发送之前裁剪图像

Question

我有一个由用户编辑的 Canvas (一些拖放内容)，上面有一些以文本形式打印的说明。我想保存没有该文本的图像。

我正在使用 KeneticJS。大小始终相同，并且文本位于图像的底部，所以我在想是否可以将其裁剪掉，这样效果就很好。我将图像作为 dataURL 传递到我的解决方案，是否可以在将图像作为数据 URL 发送之前裁剪图像？

如果我能直接说 dataURL.crop(height, width); 那就太好了或其他什么。

这是我的代码，按下按钮后，会将图像作为数据 URL 发送到我的 filemaker 解决方案。

     bGroup.on('click touchstart', function(){
      stage.toDataURL({
             callback: function(dataUrl) {
                   var myParam = encodeURIComponent(dataUrl.split(',').pop());
                   theURL = 'fmp://$/" & Get(FileName)& "?script=MoistureMap_Done&param=' + myParam;
                   window.location= theURL;
                   bDone.fill('green');
                   buttonLayer.draw();
             }});
     
     });

Answer 1

没有直接的方法来剪切文本，但这并不困难:

1. 根据 dataURL 创建图像(如果您仍有权访问文本图像，则使用该图像)。
2. 创建一个新的内存 Canvas :document.createElement('canvas');
3. 将 Canvas 大小调整为所需的裁剪尺寸:canvas.width=10； canvas.height=10;
4. 将 #1 中的图像绘制到 Canvas 上:context.drawImage
5. 由于内存中的 Canvas 小于传入的图像，图像底部的文本将被自动剪裁。
6. 拉取内存 Canvas 的dataurl:canvas.toDataURL