在作为数据URL发送之前裁剪图像

Crop image before sending as DataURL

本文关键字：裁剪 图像 数据 URL      更新时间：2023-09-26

我有一个由用户编辑的画布（一些拖放内容），上面印有一些文本说明。我想保存没有该文本的图像。

我正在使用KeneticJS。大小将始终相同，文本位于图像的底部，所以我在想如果我能裁剪掉它会正常工作。我正在将图像作为数据URL传递给我的解决方案，是否可以在将图像作为数据URL发送之前裁剪图像？

如果我能说dataURL.crop（height，width）或其他什么，那就太好了。

这是我的代码，在按下按钮时，将图像作为数据 URL 发送到我的文件制作器解决方案。

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

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

  1. 从 dataURL 创建图像（如果您仍然可以访问文本图像，请使用该图像）。
  2. 创建一个新的内存中画布：document.createElement（'canvas'）;
    3. 将画布大小
  3. 调整为所需的剪切大小：画布.宽度=10; 画布.高度=10;
  4. 将图像从 #1 绘制到画布上：context.drawImage
  5. 图像底部的文本将自动剪裁，因为内存中的画布小于传入的图像。
  6. 拉取内存中画布的数据网址：canvas.toDataURL
相关文章：