外部からアップロードされた画像のImageDataを取得する方法は？

-1

上記画像のImageDataを取得したいとします。その結果、結果としてデータは取得できません。私が実行しようとしたコードは以下に添付されています。

function drawImage(imageObj) { 
 
     var canvas = document.getElementById('myCanvas'); 
 
     var context = canvas.getContext('2d'); 
 
     var imageX = 69; 
 
     var imageY = 50; 
 
     var imageWidth = imageObj.width; 
 
     var imageHeight = imageObj.height; 
 

 
     context.drawImage(imageObj, imageX, imageY); 
 

 
     var imageData = context.getImageData(10, 10, 50, 50); 
 
     var data = imageData.data; 
 

 
     // iterate over all pixels 
 
     for(var i = 0, n = data.length; i < n; i += 4) { 
 
      var red = data[i]; 
 
      var green = data[i + 1]; 
 
      var blue = data[i + 2]; 
 
      var alpha = data[i + 3]; 
 
      alert(red + " " + green + " " + blue + " " + alpha); 
 
     } 
 

 
     
 
     
 
     } 
 
     var imageObj = new Image(); 
 
     imageObj.onload = function() { 
 
     drawImage(this); 
 
     }; 
 
     imageObj.src = 'Images/graph.gif'

<body> 
 
    <canvas id="myCanvas" width="578" height="400"></canvas> 
 
    </body>

出典

2016-06-16 Mohit Shah

「データを取得していない」とはどういう意味ですか？画像とそのURLに関連する多くのエラーの1つである可能性があるため、コンソールを表示してエラーが発生するかどうかを確認します（ほとんどのブラウザでF12を押します）。 – Blindman67

キャンバスの一部がそれに何の図面を持っていないので、あなたは何のデータを取得されていません。

イメージを右に69ピクセルだけ描画し、左端の60ピクセルだけをフェッチします。

var imageX = 69; 
var imageY = 50; 

// drawing image starting at x=69 
context.drawImage(imageObj, imageX, imageY); 

... 

// fetching image data from x=10 through x=60 (Nothing is drawn here!) 
var imageData = context.getImageData(10, 10, 50, 50);

ところで、あなたは実際にデータを取得しているが、キャンバスの空の部分は常に、赤、緑、青の&アルファ成分のためのゼロを返します。

出典

2016-06-16 16:42:51 markE

外部からアップロードされた画像のImageDataを取得する方法は？

答えて

関連する問題