Question

我有一个函数可以生成任何所需数量的“div”标签，其中包含“canvas”标签。现在，我在尝试将数组中的单个照片加载到那些“画布”标签时遇到了麻烦。

我有一个数组，其中存储了各种照片目录，我想说将该数组中的第一张图片加载到第一个canvas标记中，将该数组中的第二个图像加载到第二个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);
}

这是在指定的canvas标记中加载图像。我知道回答我的问题的关键在于代码的这一部分，但我对这个过程很陌生，而且我对与canvas标签和图像加载相关的方法知之甚少。

var img=new Image();
img.onload=function(){

var can = document.getElementById('0');
var ctx = can.getContext('2d');            //creates canvas and image data
ctx.drawImage(img, 0, 0);
var imgdata = ctx.getImageData(0,0, img.width, img.height);
var data = imgdata.data;
}

Answer 1

如何创建包含包含数组中图像的新画布的新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);
  }

这里的代码包括图像预加载器和小提琴：http://jsfiddle.net/m1erickson/duVYL/

<!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>

[添加：使用getImageData]

每个新画布的id为canvas0 - canvas3。

以下是如何使用getImageData来操作像素的示例。

重要！如果放入画布的图像不是源自同一个域，则会出现CORS安全性错误，并且图像将无法被操纵。参见：

http://www.html5rocks.com/en/tutorials/cors/

在示例中，data [i + 3] = 65会将第一个画布的alpha降低到65/255（25％）。

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);        

}

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

1 个答案: