Javascript 如何从保存的base64图像裁剪未使用的画布空间？

是否有办法在保存之前裁剪base64图像

• 目前我使用html5画布来创建图像
• 整个画布被保存，这是低效的
• 画布可以调整大小，我想知道未使用的 可以从保存的图像中裁剪透明像素

---

JAVASCRIPT（JQUERY）

画布保存到dataUrl函数：

save.addEventListener('click', function (event) {
  var dataUrl = canvas.toDataURL();
  $('txtbx').val(dataUrl);
});

---

是的，这里有一个方法：

• 使用

  context.getImageData

  获取画布的RGBA像素数组

• 注意：透明像素的alpha数组值==0

• 从上往下检查每一行像素，得到第一个不透明行（var top）

• 从底部向上检查每一行像素，得到第一个不透明行（var bottom）

• 从左向右检查每一列像素，得到第一个不透明列（var left）

• 从右向左检查每一列像素，得到第一个不透明列（var right）

• 创建内存画布并使用计算值调整其大小：

  var width=right-left;
  var height=bottom-top;
  
  var canvas1=document.createElement('canvas');
  canvas1.width=width;
  canvas1.height=height;
  

• 仅在内存画布上绘制不透明像素

  var ctx1=canvas1.getContext('2d');
  
  // clip just the non-transparent pixels and draw them to the in-memory canvas
  ctx1.drawImage(yourOnScreeCanvas, left,top,width,height, 0,0,width,height);
  

• 将内存画布保存到图像中

试试看

---

它找到空像素并根据它们的位置裁剪图像

咯咯笑@“你真了不起”找到了一个脚本，它符合我在这里的建议。：-）你能告诉我你是如何树立自己的形象的吗？因为在新画布上绘制一个大小合适的画布可能更简单，然后保存这个画布。@gamealchest请参见上面的编辑。

var ctx1=canvas1.getContext('2d');

// clip just the non-transparent pixels and draw them to the in-memory canvas
ctx1.drawImage(yourOnScreeCanvas, left,top,width,height, 0,0,width,height);