实现这种图像效果的最佳方法？使用PHP GD或JS Canvas？

问题描述：

我试图重建这种效果（冠）：实现这种图像效果的最佳方法？使用PHP GD或JS Canvas？

enter image description here

当用户上传的图像，并将其变成暗黑色的像素和光像素清晰。这会是一个好方法吗？

我也看准了这对SO：How do you convert an image to black and white in PHP

但我真的不知道如何实现它。

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

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

老兄，你能让这个图像更小吗？红色背景使我的浏览器和眼睛崩溃。 –

这是用于任何图像还是特别用于此图像？ – Ktash

@ktash适合任何图像。我知道它可能在某些图像上效果更好...... – benhowdle89

答

以下是如何做到这一点的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了解更多关于像素操作的信息。也就是说，这需要画布工作，所以它不会在旧版IE中支持（除非你使用Google的替换画布，但我不确定它是否支持所有这些方法）。优点是它可以减轻每个用户的负担，而不是所有用户的服务器负担。

答

我建议你使用raphaeljs进行绘图，对于像皇冠这样的物体，你可以绘制它们或者你可以使用图像。用这个制作2位图像也会更容易！

实现这种图像效果的最佳方法？使用PHP GD或JS Canvas？

相关推荐