php - 实现这种图像效果的最佳方式？使用 PHP GD 还是 JS Canvas？

Question

我正在尝试重现这种效果(皇冠):

用户上传图片后，暗像素变为黑色，亮像素变为透明。这是一个好方法吗？

我还在 SO 上发现了这个:How do you convert an image to black and white in PHP

但我不太确定如何实现它。

人们会为此推荐 JS Canvas 还是 PHP 的 GD？

我不会每次都一遍又一遍地创建图像，我会处理它并将它移动到一个目录以备将来使用

Answer 1

下面是在JS中的做法。请注意，图像必须来自同一域才能正常工作:

var img = document.getElementById( 'imagebase' );
var canvas = document.getElementById( 'canvasEl' );

// Set Canvas widht and height
canvas.width = img.width;
canvas.height = img.height;

var ctx = canvas.getContext( '2d' );
ctx.drawImage( img, 0, 0, canvas.width, canvas.height );

// The loop
for ( var x = 0, l = canvas.width; x < l; x++ ) {
    for ( var y = 0, lh = canvas.height; y < lh; y++ ) {
        // Returns array [Red, Green, Blue, Alpha] each out of 255
        var data = ctx.getImageData(x,y,1,1);
        // Thresholding: More black than white, and more transparent than not
        if ( ( data[0]+data[1]+data[2] ) / 3 < ( 255 / 2 ) && data[3] > 255 / 2 ) {
            // Set to black with full opacity
            data[0] = 0, data[1] = 0, data[2] = 0, data[3] = 255;
        } else {
            // Set to transparent
            data[3] = 0;
        }
        ctx.putImageData( data, x, y );
    }
}

我使用虚拟 ID 向您展示了事情是如何运作的。另外，查看 this page有关像素操作的更多信息。

也就是说，这需要 Canvas 才能工作，因此旧版 IE 不支持它(除非您使用 Google 的替换 Canvas ，但我不确定它是否支持所有这些方法)。好处是它把负担放在每个用户身上，而不是给所有用户放在你的服务器上。