[英]Internet Explorer 9 sometimes draws blank images on canvas
我有一個Web應用程序,它可以動態生成圖像,然后使用畫布在客戶端上渲染(圖像的)片段-通用代碼看起來像這樣(簡化)...
var width = ...
var height = ...
var img = new Image();
img.onload = function(){ // Set onload before setting image source ;)
var canvas = document.createElement("canvas");
canvas.setAttribute('width',width);
canvas.setAttribute('height',height);
var context = canvas.getContext("2d");
context.drawImage(this,0,0,width,height,0,0,width,height);
}
img.src = ...
在Firefox和chrome中,可以正常工作。 在IE9(有時甚至是IE10)中,有時會導致圖像空白。 作為解決方法,我放入...
var width = ...
var height = ...
var img = new Image();
img.onload = function(){
var canvas = document.createElement("canvas");
canvas.setAttribute('width',width);
canvas.setAttribute('height',height);
var context = canvas.getContext("2d");
window.setTimeout(function(){
context.drawImage(img,0,0,width,height,0,0,width,height);
}, 10); // 10 millisecond delay here seems to give IE time to make sure the image is actually ready
}
img.src = ...
顯然,拖延時間讓我感到緊張-我寧願弄清楚為什么會這樣。 圖像上是否還有其他事件類型/方法/屬性? 可能是在HTTP標頭中隨圖像/編碼/傳輸方法一起發送的導致此問題的消息?
由於在畫布上繪制圖像似乎使很多新用戶感到困惑,因此搜索大多會產生實例,其中開發人員在onload方法之前設置了源。 我能夠找到的最接近的其他問題/答復是: https : //stackoverflow.com/a/15186350/470062
編輯:
我已經更新了示例,在開始時就包括了寬度和高度的定義
編輯29 / Apr / 2013:
10毫秒的延遲並不總是足夠-我已經更改了代碼以檢查畫布像素以確定是否已繪制任何內容-盡管這感覺像是一個丑陋的hack-我很想知道是否有更好的方法:
... snip - this is at the end of the image load callback..
if((navigator.appVersion.indexOf("MSIE")) >= 0){
function checkAndRedraw(){
context.clearRect(0,0,width,height);
context.drawImage(img, 0, 0, width, height);
var imageData = context.getImageData(0, 0, width, height),
data = imageData.data,
len = data.length;
for (var i = 0; i < len; i += 4){
if(data[i] || data[i+1] || data[i+2]){
scheduleRedraw = null; // prevent memory leak
return; // A pixel contained some non empty value so something was drawn - done.
}
}
scheduleRedraw();
}
var redrawHackTimeout;
function scheduleRedraw(){
window.clearTimeout(redrawHackTimeout);
redrawHackTimeout = window.setTimeout(checkAndRedraw, 500);
}
scheduleRedraw();
}
//END IE9 Hack
我在IE9中也遇到了同樣的問題,我也必須這樣做:
theImage = new Image();
theImage.onload = function() {
that = this;
setTimeout(function() {
that.onload2();
}, 100);
};
theImage.onload2 = function(){
#your old load function code
}
theImage.src = 'http://....';
我不明白為什么ie9在畫布中尚未實際加載或“不可用”時會觸發加載圖像功能。 它使我拔出頭發。
var img = new Image();
img.src = ...
img.onload = function(){ // Set onload before after setting image source ;)
var canvas = document.createElement("canvas");
canvas.setAttribute('width',width);
canvas.setAttribute('height',height);
var context = canvas.getContext("2d");
context.drawImage(this,0,0,width,height,0,0,width,height);
}
您必須設置src
, 然后等待圖像加載。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.