Javascript 系统地将图像加载到画布标记中_Javascript_Html_Canvas_For Loop

Javascript 系统地将图像加载到画布标记中

javascript html canvas for-loop

Javascript 系统地将图像加载到画布标记中,javascript,html,canvas,for-loop,Javascript,Html,Canvas,For Loop,我有一个函数，可以生成任意数量的“div”标记，其中包含一个“canvas”标记。现在，我在尝试将单个照片从阵列加载到那些“画布”标记时遇到了问题我有一个数组，其中存储了各种照片目录，我想说的是将该数组中的第一张图片加载到第一个画布标记中，将该数组中的第二张图片加载到第二个画布标记中，依此类推我从网络上获得了这些代码片段，并对其进行了编辑，试图将其加入到我的项目中这将创建div和canvas标记 for (var item = 0; item < 3; item++) { if (i

我有一个函数，可以生成任意数量的“div”标记，其中包含一个“canvas”标记。现在，我在尝试将单个照片从阵列加载到那些“画布”标记时遇到了问题

我有一个数组，其中存储了各种照片目录，我想说的是将该数组中的第一张图片加载到第一个画布标记中，将该数组中的第二张图片加载到第二个画布标记中，依此类推

我从网络上获得了这些代码片段，并对其进行了编辑，试图将其加入到我的项目中

这将创建div和canvas标记

for (var item = 0; item < 3; item++) {
if (item % 5 == 0) {
    document.write(item);
}
var div = document.createElement("div");
div.setAttribute('id', 100+item);
document.body.appendChild(div);

var canv = document.createElement("canvas");
canv.setAttribute('width', 400);
canv.setAttribute('height', 400);
canv.setAttribute('id', item);
div.appendChild(canv);
}

如何创建包含新画布（包含来自数组的图像）的新div

假设您已将所有图像加载到名为imgs的数组中

然后，此循环将创建一个新div，其中包含一个新画布，其中包含来自imgs的图像：

  for(var i=0;i<imgs.length;i++){

      // create a new div
      var newDiv=document.createElement("div");
      newDiv.id="div"+i;
      newDiv.style.width=imgs[i].width+"px";

      // create a new canvas
      var newCanvas=document.createElement("canvas");
      newCanvas.width=imgs[i].width;
      newCanvas.height=imgs[i].height;
      newCanvas.id="canvas"+i;

      // use drawImage to draw the img[i] into the canvas
      newCanvas.getContext("2d").drawImage(imgs[i],0,0);

      // add new new canvas to the new div
      newDiv.appendChild(newCanvas);

      // add the new div to the document body
      document.body.appendChild(newDiv);
  }

（变量i=0；i）的


正文{背景色：象牙色；填充：10px；}
画布{边框：1px纯红；}
$（函数（）{
var-imageurl=[]；
var-imagesOK=0；
var-imgs=[]；
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg");
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg");
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-3.jpg");
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-4.jpg");
加载图像（）；
函数loadAllImages（）{
对于（var i=0；i对于（var i=0；它的存储量很大。另外，并不是说图像已加载到画布中，而是如何使用.getImageData（）；以及如何使用该数据？我在回答中添加了一个说明如何使用getImageData的内容。该示例将其中一幅画布图像的不透明度降低到25%。请仔细注意CORS的问题，该问题禁止在不同的域中使用getImageData。您在编辑中创建的函数会带来错误消息“cannot.getContext of null”在为上下文引用变量时。是因为创建的标记后没有标记吗？在我的示例中，画布id被设置为canvas0、canvas1等。因此请确保使用document.getElementById（“canvas0”）获取对画布的引用；
  for(var i=0;i<imgs.length;i++){

      // create a new div
      var newDiv=document.createElement("div");
      newDiv.id="div"+i;
      newDiv.style.width=imgs[i].width+"px";

      // create a new canvas
      var newCanvas=document.createElement("canvas");
      newCanvas.width=imgs[i].width;
      newCanvas.height=imgs[i].height;
      newCanvas.id="canvas"+i;

      // use drawImage to draw the img[i] into the canvas
      newCanvas.getContext("2d").drawImage(imgs[i],0,0);

      // add new new canvas to the new div
      newDiv.appendChild(newCanvas);

      // add the new div to the document body
      document.body.appendChild(newDiv);
  }

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:10px; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

  var imageURLs=[];
  var imagesOK=0;
  var imgs=[];
  imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg");
  imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg");
  imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-3.jpg");
  imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-4.jpg");
  loadAllImages();

  function loadAllImages(){
      for (var i = 0; i < imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ imagesOK++; imagesAllLoaded(); }; 
        img.src = imageURLs[i];
      }      
  }


  var imagesAllLoaded = function() {
    if (imagesOK==imageURLs.length ) {
        createDivCanvasImages();
    }
  };


  function createDivCanvasImages(){

        for(var i=0;i<imgs.length;i++){
            var newDiv=document.createElement("div");
            newDiv.id="div"+i;
            newDiv.style.width=imgs[i].width+"px";
            var newCanvas=document.createElement("canvas");
            newCanvas.width=imgs[i].width;
            newCanvas.height=imgs[i].height;
            newCanvas.id="canvas"+i;
            newCanvas.getContext("2d").drawImage(imgs[i],0,0);
            newDiv.appendChild(newCanvas);
            document.body.appendChild(newDiv);
        }
  }

}); // end $(function(){});
</script>

</head>

<body>

</body>
</html>

function useGetImageData(){

    var canvas=document.getElementById("canvas0");
    var context=canvas.getContext("2d");
    var imageData = context.getImageData(0,0,canvas.width,canvas.height);
    var data = imageData.data;

    // iterate over all pixels
    for(var i = 0; i<data.length; i+=4) {
      data[i+3]=65;
    }
    context.putImageData(imageData,0,0);        

}