在自己写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对象
};
}

转载:http://johncookie.iteye.com/blog/1289982

加载图片相关的文章:http://www.jb51.net/article/32761.htm

(转载) Chrome中canvas上drawImage无法画出image的解决办法的更多相关文章

  1. 转载 tomcat6下项目移植到tomcat7下出问题的解决办法

    转载,原文地址  http://hw1287789687.iteye.com/blog/1817865 org.apache.catalina.core.ContainerBase addChildI ...

  2. es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  3. Eclipse中js文件修改后浏览器不能及时更新的解决办法

    项目中js文件修改后浏览器不能及时更新的解决办法 转载:http://www.codeweblog.com/%E9%A1%B9%E7%9B%AE%E4%B8%ADjs%E6%96%87%E4%BB%B ...

  4. uploadify上传控件中文的乱码解决办法

    uploadify上传控件中文的乱码解决办法 网站用的gb2312的编码,用uploadify上传控件上传中文时在IE能部分成功,FF,Chrome则完全失败,查找了一天原因,结果发现是页面编码问题, ...

  5. Visual studio 2017中 Javascript对于Xrm对象模型没有智能提示的解决办法

    Visual studio 2017中 Javascript对于Xrm对象模型没有智能提示的解决办法 先上个图.语法提示支持到 Microsoft Dynamics xRM API 8.2 也就是cr ...

  6. Android中View类OnClickListener和DialogInterface类OnClickListener冲突解决办法

    Android中View类OnClickListener和DialogInterface类OnClickListener冲突解决办法 如下面所示,同时导入这两个,会提示其中一个与另一个产生冲突. 1i ...

  7. .NET在IE9中页面间URL传递中文变成乱码的解决办法

     在.Net的项目中,鼠标点击查询按钮,转到查询页面,但URL中包含中文时,传到服务器端后,中文变成了乱码(只有IE9出现该问题).       尝试使用Server.UrlEncode()进行编码, ...

  8. 【转】Ubuntu 上编译Android出现cannot find -lstdc++解决办法

    [转]Ubuntu 上编译Android出现cannot find -lstdc++解决办法 在Ubuntu 12.04 x86_64机器上编译Android出现下面错误,是因为找不到32bit的li ...

  9. electron-vue中使用iview 报错this. is readonly的解决办法

    title: electron-vue中使用iview 报错this. is readonly的解决办法 toc: false date: 2019-02-12 19:33:28 categories ...

随机推荐

  1. 20145316《Java程序设计》第9周学习总结

    20145316<Java程序设计>第9周学习总结 教材学习内容总结 数据库本身是个独立运行的应用程序 撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增删查找 JDBC(Ja ...

  2. 关于URL和http协议,http消息格式

    转自:http://crystal2012.iteye.com/blog/1447845 在WWW(全球资讯网)中想要连结到某个网页,便需要给浏览器一个位址,而URL在此的功能就是告知浏览器某个资源在 ...

  3. docker基本用法和命令

    1.安装docker 检查有没有curl which curl 如果没有用以下命令可安装:sudo apt-get install curl 通过官方提供的脚本安装最新docker curl -sSL ...

  4. matlab基本操作总结

    1.clear;//清除工作平台变量2.close all;//关闭打开的图形窗口3.I = imread('C:\Users\dell\Desktop\rice.jpg');//读取图像,存储在I数 ...

  5. 自动配置@Resource与@Autowired

    总结自:https://www.cnblogs.com/kuotian/p/8795812.html 试用情形:bean的某个成员变量是另一个bean 如果使用配置: <bean id=&quo ...

  6. char、varchar与text

    总结自:https://www.cnblogs.com/mjbrian/p/6866263.html char:       定长,长度范围是0~255. 当长度不足255时,用空格来填充剩下的字符. ...

  7. 照着官网来安装openstack pike之neutron安装

    neutron组件安装分为控制节点和计算节点,还是先从控制节点安装 1.前提条件,数据库为nova创建库和账户密码来连接数据库 # mysql -u root -p MariaDB [(none)]& ...

  8. linux 块设备-整理(一)

    1. 基本概念: linux设备驱动开发详解(宋宝华): 字符设备与块设备 I/O 操作的不同如下. (1)块设备只能以块为单位接受输入和返回输出,而字符设备则以字节为单位. 大多数设备是字符设备,因 ...

  9. python-作用域和装饰器

    Python 作用域 学习的时机: 基本的数据类型 Python的运算 数字运算 + - * / // ** 逻辑运算 And or not 比较运算 > < == >= <= ...

  10. 解决IE6已终止操作问题

    令人崩溃的IE6问题再次出现,打开某个页面时,弹出提示框“Internet Explorer无法打开Internet 站点...已终止操作”.    查了一下资料,感觉“因为js(一个比较复杂的js) ...