在處理數據之前加載圖像並等待image.complete

這似乎是一個長期存在的問題，我認爲很多人希望一勞永逸地達到底部。在在處理數據之前加載圖像並等待image.complete

image = new Image(); 
image.src = imagePath;

然後暫停鏈存在

的問題等待的東西，如image.complete ...

while(HHGimg.height == 0)

或

while(!image.complete) 
{ 
    setTimeout(function(){ foo },100); 
}

其次畫布轉換爲base64方法。

var canvas = document.createElement('canvas');       
canvas.width = image.width;           
canvas.height = image.height;           
var canvasContext = canvas.getContext('2d');        
canvasContext.drawImage(image, 0, 0, canvas.width, canvas.height); 
imageData = canvas.toDataURL('image/jpeg');

問題是暫停以確保image.complete完成其工作並將有效的對象傳遞給畫布。

我們需要的是，以確保暫停足夠沒有一個循環，攤點腳本（這個「而」法似乎）

如何等待任何想法結束才能完成的方法繼續之前有效的圖像...

我的整個功能如下...

<script type="text/javascript"> 
    function imageFetch(imgpath, imgname)            
{ 
    imgdata = "";          
    image = new Image();               
    image.src = imgpath + imgname;;            
    while(image.height == 0) 
    { 
      setTimeout(function(){imgdata = "";},100);              
    } 
    var canvas = document.createElement('canvas');       
    canvas.width = image.width;           
    canvas.height = image.height;           
    var canvasContext = canvas.getContext('2d');        
    canvasContext.drawImage(image, 0, 0, canvas.width, canvas.height);  
    imgdata = canvas.toDataURL('image/jpeg');             
    return imgdata;                
} 
</script>

...但直到暫停，以確保圖像完全加載一些的回報是簡單的「數據：，「

現在轉交給你。任何想法如何擊敗這一個？

來源

2012-08-26 TJS101

只需使用image.onload！您還需要意識到，只有圖像來自同一個域，才能將圖像轉換爲數據網址。如果不是，則會遇到相同的原產地策略錯誤。另外，你的函數必須等待image.onload才能夠轉換數據，所以你應該改變你的函數來接受回調。

您的代碼應該是這樣的：

<script type="text/javascript"> 
    function imageFetch(imgpath, imgname, callback)            
    { 
    var imgdata = "",          
    image = new Image();               
    image.src = imgpath + imgname; 
    var canvas = document.createElement('canvas');          
    var canvasContext = canvas.getContext('2d');        
    image.onload = function(){       
     canvas.width = image.width;           
     canvas.height = image.height;  
     canvasContext.drawImage(image, 0, 0, canvas.width, canvas.height);  
     imgdata = canvas.toDataURL('image/jpeg'); 
     callback(imgdata); 
    }       
    return;               
} 
</script>

然後，像這樣運行它：

imageFetch("/", "random.jpg", function (imgData){ 
    console.log(imgData); 
    // Do whatever you want with imgData here 
});

我添加了一個demo。請注意，由於具有相同的原始策略，我在那裏爲圖像使用了base64 URL。託管在同一臺服務器和端口上的圖像應該適合您。

來源

2012-08-26 07:32:59

都能跟得上。試過了。畫布寬度和高度設置不正確。你仍然會得到一個null base64輸出。我需要檢查在設置canvas元素之前加載的圖像。 – TJS101

@ TJS101嘗試編輯後的版本。 –

沒有。 image.onload不會觸發。使用FF14.01和Fbug和Safari 6.0。 – TJS101

嘗試一個圖像加載器 - 這裏是一個偉大的tutorial。

這裏給出的代碼：

function loadImages(sources, callback) { 
    var images = {}; 
    var loadedImages = 0; 
    var numImages = 0; 
    // get num of sources 
    for(var src in sources) { 
     numImages++; 
    } 
    for(var src in sources) { 
     images[src] = new Image(); 
     images[src].onload = function() { 
     if(++loadedImages >= numImages) { 
      callback(images); 
     } 
     }; 
     images[src].src = sources[src]; 
    } 
    } 

    window.onload = function(images) { 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 

    var sources = { 
     darthVader: "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg", 
     yoda: "http://www.html5canvastutorials.com/demos/assets/yoda.jpg" 
    }; 

    loadImages(sources, function(images) { 
     context.drawImage(images.darthVader, 100, 30, 200, 137); 
     context.drawImage(images.yoda, 350, 55, 93, 104); 
    }); 
    };

來源

2012-08-26 21:11:17 Jarrod

在處理數據之前加載圖像並等待image.complete

回答

相關問題