Как получить данные Pixel из Canvas

Question

Как получить данные Pixel из Canvas

0

Я генерирую изображение из введенного текста в текстовое поле. Мне нужно получить пиксель от сгенерированного изображения. Сейчас я делаю следующее

      tCtx.fillText(entered_text, 20, 40);
      imageElem.src = tCtx.canvas.toDataURL("image/png");

      var imageData = tCtx.getImageData(0, 0, tCtx.canvas.width, tCtx.canvas.height);
      var px = imageData.data;      
      var len = px.length;

      for (var i = 0; i < len; i+=4) {
          var redPx = px[i];
          var greenPx = px[i+1];
          var bluePx = px[i+2];
          var alphaPx = px[i+3];
          console.log(redPx,greenPx,bluePx);
      }

Здесь консоль печатает все 0 только для каждого пикселя. Но в Canvas я вижу изображение, когда я дал это toDataURL(), в теге изображения также вижу изображение. Не знаю, как это сделать.

Когда я использую пользовательские изображения, отличные от текста, я получаю данные пикселов, например, 34 45 255 255 54 56 210 255...

Mallikarjuna 20 нояб. 2015, в 12:53

Источник

Теги:

javascript

html

angularjs

html5

2 ответа

0

Я нашел решение. То, что я сделал прямо сейчас, это

tCtx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);

из-за этого я показываю изображение на стороне холста. Таким образом, это не видно. Затем я изменил его на

tCtx.putImageData(imageData, 0, 0);

теперь это нормально. Возможность получения данных пикселя

Mallikarjuna 20 нояб. 2015, в 13:01

Ещё вопросы

Access Denied · Accepted Answer · 2015-11-20T15-05-00.000Z

Вам также нужно распечатать альфа-канал для консоли. Я также получил 0,0,0 для всех пикселей. Поскольку фоновый фон холста (0,0,0,0) является прозрачным. И черный шрифт (0,0,0, noneZeroValue): (может быть не 255 из-за антисериализации). Если вы не будете печатать альфа-канал, все они будут 0,0,0.

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="100" height="20" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
window.onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    //ctx.font = "48px serif";
ctx.fillText("A lot of text", 0, 10);
//ctx.drawImage(ocanvas,0,0,c.width,c.height);
var imageData = ctx.getImageData(0, 0, c.width, c.height);
      var px = imageData.data;      
      var len = px.length;

      for (var i = 0; i < len; i+=4) {
          var redPx = px[i];
          var greenPx = px[i+1];
          var bluePx = px[i+2];
          var alphaPx = px[i+3];
          //if (redPx!=0 || greenPx!=0 ||bluePx!=0 || alphaPx!=0){
          console.log(redPx,greenPx,bluePx,alphaPx);


}                  

};


</script>

</body>
</html>