HTML5帆布剪辑或裁剪除S形外的任何东西

如何裁剪除S形笔画外的下列图形中的所有内容？换句话说，摆脱所有的透明空间，只保留黑色S形状...提前致谢！HTML5帆布剪辑或裁剪除S形外的任何东西

===帆布===的PNG渲染图像图像位于 - >http://buildasearch.com/ant/s.png

===画布绘制===的实际坐标

var x = '68,67,66,65,64,63,62,61,60,59,57,56,55,54,53,52,51,51,51,51,51,51,51,52,55,56,52,58,60,59,61,62,64,65,66,68,70,71,72,74,75,76,77,78,78,79,79,79,79,79,79,79,79,79,79,79,79,78,76,74,71,67,59,56,54,52,49,47,46,45,43,42,41,40,39'; 

var y = '11,11,11,11,11,12,12,12,12,12,13,14,14,15,17,18,20,21,23,24,27,30,32,32,34,34,33,34,34,34,34,35,35,35,35,35,35,36,36,37,38,38,39,40,41,42,43,44,45,47,48,49,50,51,52,53,54,55,56,57,58,59,59,59,60,60,60,60,60,60,60,60,60,60,60';

来源

2011-07-14 Dango

我不明白你的意思。 –

托管s.png图像有很多空白，但要摆脱它，我想剪裁画布中的所有内容，但S形状的坐标...不知道这是可能的。有点像在Photoshop中的魔杖.... – Dango

我想我现在理解你。你想自动裁剪图像。您是否想要在使用例如PNG格式制作PNG输出时执行此操作？ 'canvas.toDataURL'，还是要静态分析上面给出的数据，以便在绘制之前计算出维度的大小，并调整画布的大小？ –

这将是更容易，如果您的x和y的格式为[6, 3, 19]而不是'6,3,19'。为了这个答案的目的，我会假设你已经这样做了，因为它使代码更容易一些。

事后计算是很有可能的，但是如果得到想要的位然后调整画布的大小，会很麻烦。如果可以的话，最终计算结果会更容易，更快。像这样的东西应该工作：

// Data specification 
var x = [68,67,66,65,64,63,62,61,60,59,57,56,55,54,53,52,51,51,51,51,51,51,51,52,55,56,52,58,60,59,61,62,64,65,66,68,70,71,72,74,75,76,77,78,78,79,79,79,79,79,79,79,79,79,79,79,79,78,76,74,71,67,59,56,54,52,49,47,46,45,43,42,41,40,39], 
    y = [11,11,11,11,11,12,12,12,12,12,13,14,14,15,17,18,20,21,23,24,27,30,32,32,34,34,33,34,34,34,34,35,35,35,35,35,35,36,36,37,38,38,39,40,41,42,43,44,45,47,48,49,50,51,52,53,54,55,56,57,58,59,59,59,60,60,60,60,60,60,60,60,60,60,60]; 

// Work out the extreme points in both dimensions 
var xs = x.slice().sort(), 
    ys = y.slice().sort(), 
    minX = xs[0], 
    maxX = xs[xs.length-1], 
    minY = ys[0], 
    maxY = ys[ys.length-1]; 
// Resize the canvas 
canvas.width = maxX - minX + 1; 
canvas.height = maxY - minY + 1; 
// Shift the points to fit on the shrunk canvas 
x.forEach(function(v, i) { 
    x[i] = v - minX; 
}); 
y.forEach(function(v, i) { 
    y[i] = v - minY; 
});

来源

2011-07-14 08:42:15

HTML5帆布剪辑或裁剪除S形外的任何东西

回答

相关问题