自动裁剪HTML5画布到内容 [英] Automatically Crop HTML5 canvas to contents

问题描述

假设这是我的画布，画上了一张邪恶的脸。我想用 toDataURL（）将我的恶脸导出为PNG;然而，整个画布都是光栅化的，包括邪恶面孔和画布边缘之间的空白。

  + ---- ----------- + 
 | | 
 | | 
 | （.Y。）| 
 | / _ | 
 | \ ____ / | 
 | | 
 | | 
 + --------------- + 
  

裁剪/修剪/缩小我的画布到其内容的最佳方式是什么？因此，我的PNG不会比脸部的边界框更大，如下所示？最好的方式似乎是缩放画布，但假设内容是动态的......？我相信应该有一个简单的解决方案，但它逃避我，用谷歌搜索。

  + --- --- + 
 |（.Y。）| 
 | / _ | 
 | \ ____ / | 
 + ------ + 
  

谢谢！

$ {

var w = canvas.width，$ {




$ b $
h = canvas.height，
pix = {x：[]，y：[]}，
imageData = ctx.getImageData（0,0，canvas.width，canvas.height），
x，y，index; （y = 0; y （x = 0; x index =（y * w）的

+ x）* 4;
if（imageData.data [index + 3]> 0）{

pix.x.push（x）;
pix.y.push（y）;



$ pix.x.sort（function（a，b）{return a-b}）;
pix.y.sort（function（a，b）{return a-b}）;
var n = pix.x.length-1;

w = pix.x [n] - pix.x [0];
h = pix.y [n] - pix.y [0];
var cut = ctx.getImageData（pix.x [0]，pix.y [0]，w，h）;

canvas.width = w;
canvas.height = h;
ctx.putImageData（cut，0，0）;

var image = canvas.toDataURL（）;
var win = window.open（image，'_blank'）;
win.focus（）;

}

Let's say this is my canvas, with an evil-looking face drawn on it. I want to use toDataURL() to export my evil face as a PNG; however, the whole canvas is rasterised, including the 'whitespace' between the evil face and canvas edges.

+---------------+
|               |
|               |
|     (.Y. )    |
|      /_       |
|     \____/    |
|               |
|               |
+---------------+

What is the best way to crop/trim/shrinkwrap my canvas to its contents, so my PNG is no larger than the face's 'bounding-box', like below? The best way seems to be scaling the canvas, but supposing the contents are dynamic...? I'm sure there should be a simple solution to this, but it's escaping me, with much Googling.

+------+
|(.Y. )|
| /_   |
|\____/|
+------+

Thanks!

解决方案

function cropImageFromCanvas(ctx, canvas) {

var w = canvas.width,
h = canvas.height,
pix = {x:[], y:[]},
imageData = ctx.getImageData(0,0,canvas.width,canvas.height),
x, y, index;

for (y = 0; y < h; y++) {
    for (x = 0; x < w; x++) {
        index = (y * w + x) * 4;
        if (imageData.data[index+3] > 0) {

            pix.x.push(x);
            pix.y.push(y);

        }   
    }
}
pix.x.sort(function(a,b){return a-b});
pix.y.sort(function(a,b){return a-b});
var n = pix.x.length-1;

w = pix.x[n] - pix.x[0];
h = pix.y[n] - pix.y[0];
var cut = ctx.getImageData(pix.x[0], pix.y[0], w, h);

canvas.width = w;
canvas.height = h;
ctx.putImageData(cut, 0, 0);

var image = canvas.toDataURL();
var win=window.open(image, '_blank');
win.focus();

}

这篇关于自动裁剪HTML5画布到内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！