裁剪/修剪/缩小我的画布到其内容的最佳方式是什么?因此,我的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; yLet'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画布到内容
发布评论