實現這種圖像效果的最佳方法？使用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？

我不會每次都一遍又一遍地被創建的圖像，我會處理它，並將其移動到一個目錄以供將來使用

來源

2012-01-21 benhowdle89

老兄，你能讓這個圖像更小嗎？紅色背景使我的瀏覽器和眼睛崩潰。 –

這是用於任何圖像還是特別用於此圖像？ – 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的替換畫布，但我不確定它是否支持所有這些方法）。優點是它可以減輕每個用戶的負擔，而不是所有用戶的服務器負擔。

來源

2012-01-21 20:37:35 Ktash

我建議你使用raphaeljs進行繪圖，對於像皇冠這樣的物體，你可以繪製它們或者你可以使用圖像。用這個製作2位圖像也會更容易！

來源

2012-01-21 20:49:23

實現這種圖像效果的最佳方法？使用PHP GD或JS Canvas？

回答

相關問題