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

我有一个功能，使任何需要数量的“div”标签与“画布”标签内。现在，我无法将数组中的单张照片加载到这些“画布”标签中。将图像加载到画布标签系统

我有一个数组，其中有各种照片目录存储在其中，我想说的是加载该数组中的第一张图片到第一个画布标记，并将该数组中的第二个图像加载到第二个画布标记，所以上。

我从网络上获得了这些代码片段，然后对它进行编辑以尝试将其粘贴到我的项目中。

这会创建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标签和图像加载相关的方法没有很好的了解。

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

来源

2013-07-31 user2517142

如何从一个数组

创建包含包含图像新建画布新的div假定你把所有的图像加载到一个数组称为IMGS。

那么这个循环将创建一个包含一个新的画布与IMGS图像的新的div：

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]

每个新的画布都被赋予了一个canvas0 - canvas3的id。

下面是如何使用getImageData来操纵像素的示例。

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

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

在该示例中，数据第[i + 3] = 65会降低第一帆布送到二百五十五分之六十五（25％）的alpha。

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-31 05:37:35 markE

非常感谢。另外，不是图像加载到画布中，我将如何使用.getImageData（）;并处理这些数据？ – user2517142

此外，现在*图像加载... – user2517142

我做了一个补充，我的答案显示如何使用getImageData。该示例将其中一个画布图像的不透明度降低到25％。请注意CORS问题，禁止在单独的域中使用getImageData。 – markE

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

回答

相关问题