个人中心
gpt4 book ai didi

JavaScript 将图像数据放在 Canvas 上

转载 作者：太空宇宙 更新时间：2023-11-03 22:30:11 25 4
gpt4 key购买 nike

我有以下代码创建一个矩形，如下图所示:

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

  <script>

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = 'black';
    ctx.fillRect(20, 20, 40, 40)
    var imgData = ctx.createImageData(100, 100);
    var i;
    for (i = 0; i < imgData.data.length; i += 16) {
      imgData.data[i + 0] = 255;
      imgData.data[i + 1] = 0;
      imgData.data[i + 2] = 0;
      imgData.data[i + 3] = 255;
    }
    // ctx.putImageData(imgData, 10, 10);

  </script>
</body>
</html>

enter image description here


当我通过不注释 ctx.putImageData 确保添加了图像数据时，我只得到如下图所示的图像数据:

enter image description here


如何确保图像创建在黑色矩形的顶部，即在红线之间的空白区域？
我希望能够看到黑色矩形。我尝试更改 alpha channel 但没有做任何事情。

提前致谢:)。

最佳答案

putImageData 会将目标像素替换为您的 ImageData 中包含的像素，无论它们是什么。
这意味着如果您的 ImageData 包含透明像素，那么一旦您将 ImageData 放在 Canvas 上，这些透明像素就会存在。

虽然有几种方法可以完成您想要的。

需要较少代码更改的是从上下文的当前状态进行像素操作。调用getImageData您将拥有一个 ImageData，而不是 createImageData，其中包含您所选区域中当前绘制的像素。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = 'black';
ctx.fillRect(20, 20, 40, 40);
// get the current pixels at (x, y, width, height)
var imgData = ctx.getImageData(10, 10, 100, 100);
var i;
// and do the pixel manip over these pixels
for (i = 0; i < imgData.data.length; i += 16) {
  imgData.data[i + 0] = 255;
  imgData.data[i + 1] = 0;
  imgData.data[i + 2] = 0;
  imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 10, 10);
<canvas id="myCanvas"></canvas>

主要的警告是 getImageData 比 createImageData 更慢并且需要更多的内存，所以如果你要在动画中的每一帧都这样做，它可能不适合.

在这种情况下(动画)的另一种解决方案是使用第二个离屏 Canvas ，您将在其上绘制一次 ImageData，然后使用 drawImage< 在主 Canvas 上绘制这个离屏 Canvas .

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = 'black';
var gridImage = generateGrid(100, 100);

var x = 0;
anim();

/* 
  Makes your pixel manip on an off-screen canvas
  Returns the off-screen canvas
*/
function generateGrid(width, height){
  var canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  var off_ctx = canvas.getContext('2d');
  var imgData = off_ctx.createImageData(width, height);
  for (i = 0; i < imgData.data.length; i += 16) {
    imgData.data[i + 0] = 255;
    imgData.data[i + 1] = 0;
    imgData.data[i + 2] = 0;
    imgData.data[i + 3] = 255;
  }
  off_ctx.putImageData(imgData, 0,0);
  return canvas;
}
function anim(){
  ctx.clearRect(0,0,c.width, c.height);
  x = (x + 1) % (c.width + 100);
  ctx.fillRect(x, 20, 40, 40);
  // and here you draw your generated canvas
  ctx.drawImage(gridImage, x - 10, 0);
  requestAnimationFrame(anim);
}
<canvas id="myCanvas"></canvas>

您还可以重构您的代码，以便正常绘图(这里是 fillRect)在您确实绘制了 ImageData，但是 < strong>背后 当前图纸，感谢 globalCompositeOperation您上下文的属性:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// do first your pixel manip
var imgData = ctx.createImageData(100, 100);
var i;
for (i = 0; i < imgData.data.length; i += 16) {
  imgData.data[i + 0] = 255;
  imgData.data[i + 1] = 0;
  imgData.data[i + 2] = 0;
  imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 10, 10);

// change the gCO to draw behind current non-transparent pixels
ctx.globalCompositeOperation = 'destination-over';
// now make your normal drawings
ctx.fillStyle = 'black';
ctx.fillRect(20, 20, 40, 40);
// reset the gCO
ctx.globalCompositeOperation = 'source-over';
<canvas id="myCanvas"></canvas>

最后，如果您只定位 next-gen browsers , 那么你可以使用 ImageBitmap object ，这将产生与屏幕外 Canvas 相同的结果，代码行更少:

(async () => {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = 'black';
  var gridImage = await generateGrid(100, 100);
  var x = 0;
  anim();

  /* 
    Makes your pixel manip on an empty ImageData
    Returns an Promise resolving to an ImageBitmap
  */
  function generateGrid(width, height) {
    var imgData = ctx.createImageData(width, height);
    for (i = 0; i < imgData.data.length; i += 16) {
      imgData.data[i + 0] = 255;
      imgData.data[i + 1] = 0;
      imgData.data[i + 2] = 0;
      imgData.data[i + 3] = 255;
    }
    return createImageBitmap(imgData);
  }

  function anim() {
    ctx.clearRect(0, 0, c.width, c.height);
    x = (x + 1) % (c.width + 100);
    ctx.fillRect(x, 20, 40, 40);
    // and here you draw your generated canvas
    ctx.drawImage(gridImage, x - 10, 0);
    requestAnimationFrame(anim);
  }
})();
<canvas id="myCanvas"></canvas>

关于JavaScript 将图像数据放在 Canvas 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48858220/

25 4 0
文章推荐： angularjs - NodeJs中间件设置头
文章推荐： c++ - 多线程opencv视频处理Qt/C++
文章推荐： javascript - 如何在 Angular Controller 中检索从 Node 服务器发送的 ejs 数据？
文章推荐： opencv - 在 OpenCV 中寻找小轮廓
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com