Question

有一种众所周知且简单的方法可以将数据库绘制到画布中：

var img = new Image();
img.onload = function () {
    context.drawImage(this, 0, 0, canvas.width, canvas.height);
}
img.src = "data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==";

这种方式是异步的，我的问题是有一种方法可以实现异步。

Answer 1

现代浏览器都异步加载img元素＆amp; new Image()创建了一个img元素。

没有同步方式。

如果您只想确保在开始使用之前加载所有图像，那么您可以像这样编码图像预加载器：

// image preloader--loads all images and then calls the start callback

// put the paths to your images in imageURLs[]
var imageURLs=[];  
// push all your image urls!
imageURLs.push("image1.png");
imageURLs.push("data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM...");

// the loaded images will be placed in images[]
var imgs=[];

var imagesOK=0;
loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

function start(){

    // the imgs[] array now holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]

}

将base64编码数据-uri放入/转换为画布的同步方法

1 个答案: