Question

我有一个由用户编辑的画布（一些拖放的东西），并且它上面有一些用文本打印的指令。我想保存没有该文本的图像。

我正在使用KeneticJS。大小将始终相同，文本位于图像的底部，所以我在想是否可以将其裁剪出来，这样可以正常工作。我将图像作为dataURL传递给我的解决方案，是否可以在将图像作为数据网址发送之前裁剪图像？

如果我可以说dataURL.crop（高度，宽度），那就太好了;什么的。

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

＆＃13;

     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();
             }});
     
     });

＆＃13;

Answer 1

没有剪切文字的直接方法，但这并不困难：

从dataURL创建图像（如果您仍然可以访问它，则使用发短信图像）。
创建一个新的内存中画布：document.createElement（'canvas'）;
将画布调整为所需的剪裁大小：canvas.width = 10; canvas.height = 10;
将图像从＃1绘制到画布上：context.drawImage
由于内存中的画布小于传入的图像，因此图像底部的文本将自动剪裁。
拉出内存中画布的dataurl：canvas.toDataURL

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

1 个答案: