JS - イメージオブジェクトをグレースケールに変換して表示する方法

ボタンをクリックすると、基本的に、ボタンがクリックされると、モバイルデバイスにカメラに行くよう指示されます。カメラが写真を撮ると、画像データが送られます（これはデータURLと呼ばれますか？）。これは、それを処理するために私のコードです：JS - イメージオブジェクトをグレースケールに変換して表示する方法

var imagesrc = "data:image/jpeg;base64," + imageData; 

var myimage = new Image(500, 500); 
myimage.src = imagesrc;   <---- to populate the object with the colored image 
myimage.src = grayscale(myimage); <---- here I set it to the grayscale image

私はgrayscale()というメソッドを呼び出し、それがグレースケールになっていた画像を返すようにしたいです。私はこれを試しました：

function grayscale(image){ 
    var canvasContext = canvas.getContext('2d'); 
    var imgW = image.width; 
    var imgH = image.height; 
    canvas.width = imgW; 
    canvas.height = imgH; 

    canvasContext.drawImage(image, 0, 0); 

    var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH); 


    for(>var y = 0; y < imgPixels.height; y++){ 
     for(>var x = 0; x < imgPixels.width; x++){ 
      var i = (y * 4) * imgPixels.width + x * 4; 
      var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2])/3; 
      imgPixels.data[i] = avg; 
      imgPixels.data[i + 1] = avg; 
      imgPixels.data[i + 2] = avg; 
     } 
    } 

    canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); 

    dataurl = canvas.toDataURL(); 
    var newimg = "data:image/jpeg;base64," + dataurl; 
    return newimg; 
}

しかし、何らかの理由で動作しません。グレースケール画像は表示されません。私はforループコードをオンラインで手に入れました。

出典

2016-05-11 Mingle Li

どのようにそれを微調整？もともと何をしていたのですか？ – Bergi

正確に「機能しない」とは何ですか？デバッグをやりましたか？予期しない動作はどこですか？ – Bergi

['toDataURL']（https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL）はすでに完全なデータURLを返しています。プレフィックスを付ける必要はありません（とにかくjpegにはなりません） – Bergi

これは動作しないいくつかの理由があります。バグを追跡するためにコンソールの出力をチェックすることは良いことです。たとえば、Firefoxの「F12」では、for(>var ...)が問題であることがわかります。 ;）

canvasは、あなたが私たちと共有したコードの外にどこかに宣言しましたか？ dataurlは宣言されていますか？ toDataUrlの接頭辞は必要ありません。

ここでは、forループを入力した基本的なhtmlファイルです。「test.png」はグレーになります。たぶんどこかに保存して、同じフォルダにPNGを入れて、コードをコピーするのではなく、ステップごとに編集作業を開始したいと思うかもしれません。あなたが挑戦を感じる場合は、それを渡すようにしてくださいhttp://jslint.com/！（forループはwhileループで置き換える必要があります。 :)

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <title>Canvas/ImgData Test</title> 
</head> 

<body> 
    <canvas id="output"></canvas> 
    <script> 
     var cnv = document.getElementById('output'); 
     var cnx = cnv.getContext('2d'); 

     function grey(input) { 
      cnx.drawImage(myimage, 0 , 0); 
      var width = input.width; 
      var height = input.height; 
      var imgPixels = cnx.getImageData(0, 0, width, height); 

      for(var y = 0; y < height; y++){ 
       for(var x = 0; x < width; x++){ 
        var i = (y * 4) * width + x * 4; 
        var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2])/3; 
        imgPixels.data[i] = avg; 
        imgPixels.data[i + 1] = avg; 
        imgPixels.data[i + 2] = avg; 
       } 
      } 

      cnx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); 
     } 

     var myimage = new Image(); 
     myimage.onload = function() { 
      grey(myimage); 
     } 
     myimage.src = "test.png"; 
    </script> 
</body> 
</html>

出典

2016-05-11 23:54:42

JS - イメージオブジェクトをグレースケールに変換して表示する方法

答えて

関連する問題