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

Question

有没有一种方法在保存之前裁剪base64图片？

目前，我使用html5画布创建图像。

整个画布都被保存了，这是低效的。

画布可以调整大小，我想知道未使用的透明像素是否可以从保存的图像中裁剪。

var wrapper = document.getElementById('Pad'),
    save = wrapper.querySelector('[data-btn=save]'),
    canvas = wrapper.querySelector('canvas'),
    pad = new SignaturePad(canvas);

function resizeCanvas() {
  var ratio = window.devicePixelRatio || 1;
  canvas.width = canvas.offsetWidth * ratio;
  canvas.height = canvas.offsetHeight * ratio;
  canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

将Canvas保存为数据URL的函数：

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

- DreamTeK

---

你能否给一些提示关于如何构建图像？因为在一个新的画布上绘制恰当大小的图像，然后保存这个图像可能会更简单。 - GameAlchemist

@GameAlchemist 请查看上面的修改。 - DreamTeK

Answer 1

是的，这里有一种方法：

是的，这里有一种方法：

使用context.getImageData获取画布的RGBA像素数组。 注意：透明像素的alpha数组值为0； 从上到下检查每一行像素并获取第一个非透明行（变量top）； 从下往上检查每一行像素并获取第一个非透明行（变量bottom）； 从左到右检查每一列像素并获取第一个非透明列（变量left）； 从右到左检查每一列像素并获取第一个非透明列（变量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');

// 仅裁剪非透明像素并将其绘制到内存画布上
ctx1.drawImage(yourOnScreeCanvas, left,top,width,height, 0,0,width,height);

将内存画布保存为图像。

- markE

---

笑！“@你真棒”找到了一个能做我建议的事情的脚本。 :-) - markE

Answer 2

尝试 https://gist.github.com/remy/784508

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

- Marc Guiselin