0

我有一个函数可以制作任意数量的“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);
}

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

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;
}
4

1 回答 1

0

如何创建包含新画布的新 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);        

}
于 2013-07-31T05:37:35.793 回答