將圖像加載到畫布標籤系統

我有一個功能，使任何需要數量的「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

將圖像加載到畫布標籤系統

回答

相關問題