この画像効果を達成する最良の方法は？ PHP GDまたはJS Canvasを使用しますか？

Question

は、私は、この効果（クラウン）を再作成しようとしています：ユーザーが画像をアップロードし、それが黒と光のピクセル明確な暗いピクセルをオン

。これは良い方法でしょうか？

私もSO上でこれを発見：How do you convert an image to black and white in PHP

しかし、私はそれを実装する方法が本当にわかりません。

JS CanvasをこのGDまたはPHPのGDにおすすめしますか？

私は毎回何度もイメージを作成することwouldntは、私はそれを処理し、

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を参照してください。

これはキャンバスが動作するように要求しているため、古いキャンバスではサポートされません（Googleの置き換えキャンバスを使用していない限り、これらのメソッドのサポートは不明です）。利点は、すべてのユーザーのサーバー上でなく、各ユーザーに負担をかけることです。

Answer 2

ドローイングにはraphaeljsを使用することをお勧めします。クラウンのようなオブジェクトの場合は描画するか、イメージを使用できます。これで2bitイメージを作るのも簡単です！