Chrome中canvas上drawImage无法画出image的解决办法

最新推荐文章于 2023-09-27 22:31:49 发布

iteye_3848

最新推荐文章于 2023-09-27 22:31:49 发布

阅读量450

点赞数 1

分类专栏： HTML5 & Android 文章标签： canvas html5

HTML5 & Android 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了在前端开发中遇到图片异步加载问题时，导致drawImage方法无法正常工作的解决方案。通过使用预加载技术确保图片在使用前已经加载完成，有效解决了此问题，并提供了改进后的代码实现。文章还强调了理解异步加载机制的重要性，对于前端开发者具有实际指导意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在自己写demo的过程中碰到了这样一个问题发现drawImage方法没有达到预期的效果图片没办法显示而fillRect等画图形的方法却工作良好

大概的代码如下：

$(function() {
	var $my_canvas=$("#my_canvas");
	var my_canvas=$my_canvas[0];
	var context=my_canvas.getContext("2d");
	// var footprint_img=document.getElementById("footprint");
	var footprint_img=new Image();
	footprint_img.src="footprint.jpg";
	context.drawImage(footprint_img,10,10,20,20);
});

在和伙伴交流的情况下发现在google help下也有人碰到了类似问题

http://www.google.com/support/forum/p/Chrome/thread?tid=29d98538241bc15f&hl=en

描述了该问题发现同样的代码在FireFox下工作良好但是Chrome却无法绘制并且刷新也无用不过如果在地址栏敲一下回车却可以看到绘制的图片（震惊）

之后请教了几位大神被告知是由于image加载是异步的而我在image没有加载完毕时就调用了drawImage造成的（好吧我刚接触前端这些东西都不注意大家别拍脸）

于是上网查了关于image预加载的一些方法最后找到了一篇排版不错说明也很好的文章（有的文章一看就转来的也不写转帖也不重新排版代码就那么混乱着完全不想看啊）

http://apps.hi.baidu.com/share/detail/24712354

别看是百度空间就不看。。觉得说得挺清楚的特别对于我这样的新手

具体的原理在上文中已经说了概括下就是在确保图片加载的情况下再去做相关动作（这是废话，文中更循序渐进）

改进后的代码如下：

$(function() {
	var $my_canvas=$("#my_canvas");
	var my_canvas=$my_canvas[0];
	var context=my_canvas.getContext("2d");
	// var footprint_img=document.getElementById("footprint");
	// var footprint_img=new Image();
	// footprint_img.src="footprint.jpg";
	preImage("footprint.jpg",function(){
		context.drawImage(this,10,10,20,20);
	});
});

function preImage(url,callback){
	 var img = new Image(); //创建一个Image对象，实现图片的预下载
     img.src = url;
   
    if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
         callback.call(img);
        return; // 直接返回，不用再处理onload事件
     }

     img.onload = function () { //图片下载完毕时异步调用callback函数。
         callback.call(img);//将回调函数的this替换为Image对象
     };
}