`

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

阅读更多

在自己写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对象
     };
}
 
3
2
分享到:
评论
5 楼 wangzhongquan_ 2014-09-02  
     
4 楼 wuweitiandian 2014-06-20  
请假一下~如果我不是通过new Images()来加入图片,而是通过在dom中get到这个images,那么我又该如何做呢?
比如:
<div id="img" style="display:none;"><img src="" /></div>

javascript:

var patimg = document.getElementById('loadimg');
var pat = context.createPattern(patimg,'no-repeat');
//fill bg
context.fillStyle = pat;
context.fillRect(0,0,owidth,oheight);
3 楼 realic 2012-07-20  
关于图片预加载,很多地方都需要考虑到
2 楼 cookiejj2010 2012-05-16  
zybing 写道
不错不错,至少对我有用

有用就好 :)
1 楼 zybing 2012-05-15  
不错不错,至少对我有用

相关推荐

    html5 canvas 图片压缩

    接下来,我们加载图片到Canvas中,通常使用`Image`对象: ```javascript var img = new Image(); img.src = 'your-image-url'; img.onload = function() { // 在这里处理图片 }; ``` 图片压缩的核心在于将图片...

    node + canvas 例子

    在这个例子中,我们加载了一个名为`image.jpg`的图片文件,将其绘制到新创建的Canvas上,然后进行了90度的旋转,最后保存为`rotated_image.png`。 Node.js与Canvas的结合不仅限于基本的绘图和图像处理,还可以应用...

    js+canvas实现图片格式webp/png/jpeg在线转换

    这可以通过创建一个新的Canvas,设置其宽高与图片相同,然后使用Canvas的`getContext("2d")`获取2D渲染上下文,并调用`drawImage()`方法将图片绘制到Canvas上。这样,图片的信息就被存储在Canvas上了。 3. **格式...

    canvas在高版本浏览器下自适应首屏幕鼠标动画效果.zip

    `images`文件夹可能包含项目中用到的图片资源,这些图片可能通过CSS的`background-image`属性应用到元素上,或者在Canvas上用`drawImage()`方法绘制。 `fonts`文件夹则可能包含自定义字体文件,通过`@font-face`...

    IE11下使用canvas.toDataURL报SecurityError错误的解决方法

    在IE11浏览器中,使用`canvas.toDataURL`方法可能会遇到`SecurityError`的问题,这是因为IE11在处理跨域图像时的安全策略比其他现代浏览器更为严格。在尝试获取canvas对象上的数据URL时,如果canvas上绘制了来自不...

    前端canvas动画如何转成mp4视频的方法

    - **无头浏览器运行**:利用如Puppeteer这样的库在服务器上运行无头Chrome,执行前端的canvas动画脚本,并捕获每帧截图。 - **存储和合并帧**:截图以Base64格式返回后,后端需要将它们保存并准备合并。一个可能的...

    Node.js-Img-trans基于Node-canvas和Express的后台图片转换组件

    ctx.drawImage(img, 0, 0, canvas.width, canvas.height); const out = canvas.toBuffer('image/jpeg'); res.type('image/jpeg').send(out); }); app.listen(3000, () =&gt; console.log('Server running on port ...

    HTML5.Canvas.基础教程教程.pdf

    - **绘制图像**:`drawImage(image, dx, dy)`、`drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)`。 **总结**:通过以上内容的学习,读者可以掌握HTML5 Canvas的基础知识和基本绘图技巧,为...

    详解如何解决canvas图片getImageData,toDataURL跨域问题

    在Web开发中,Canvas是一个非常重要的工具,它允许开发者在网页上动态绘制图像。然而,涉及到跨域操作时,如使用`getImageData()`和`toDataURL()`方法,就会遇到一些安全限制。本文将深入探讨如何解决Canvas图片在...

    跨域图片资源权限(CORS enabled image)

    一旦canvas被污染,就无法通过该canvas元素提取图像数据,如使用toBlob()、toDataURL()和getImageData()等方法会抛出安全错误。这样的措施旨在防止网页在用户不知情的情况下获取用户的图像信息,保护用户的个人隐私...

    JS截图生成图片实用示例

    2. 将页面内容绘制到Canvas:使用`canvas.getContext('2d')`获取2D渲染上下文,然后调用相关方法将网页的部分或全部内容绘制到Canvas上。这通常涉及读取DOM元素的位置和尺寸,以及调用`drawImage()`等方法。 3. 转换...

    web区域生成图片

    一旦绘制完成,可以调用`toDataURL()`方法,将Canvas的内容转换为一个data URL,其格式通常为"data:image/png;base64,",可以直接嵌入到`&lt;img&gt;`标签中显示,也可以通过Ajax发送到服务器。 2. 屏幕捕获技术 在现代...

    js 压缩图片上传

    - 使用`drawImage()`方法将图片绘制到Canvas上,可以通过调整源图像的宽高比例来实现等比例缩放。 - 调用`toDataURL()`,设置其MIME类型为`image/jpeg`或`image/png`,并指定质量参数(0-1之间,值越小图片质量越...

    HTML5新特性1

    * drawImage(image,x,y) HTML5 Video标签(视频): HTML5 Video标签提供了播放、暂停和音量控件来控制视频。 语法: 视频格式:HTML5 Video标签支持多种视频格式,包括MP4、WebM、Ogg等。 HTML5 Audio标签...

    将网页保存为图片

    此代码片段会将整个网页主体绘制到canvas上,然后转换为图片数据URL。 除了上述方法,还可以借助第三方服务或库,比如html2canvas和PhantomJS,它们同样能将HTML渲染为图片。html2canvas是JavaScript库,能够在...

    js关于getImageData跨域问题的解决方法

    在提供的代码示例中,`createGSCanvas()` 函数试图在本地文件系统上加载图片到Canvas,然后使用 `getImageData()`,这违反了同源策略,因此Chrome浏览器会抛出“Uncaught SecurityError”。 解决这个问题有几种方法...

    imageCropper

    这些概念是通过CSS3的transform属性和Canvas的drawImage方法实现的。 4. **比例与约束**:imageCropper可能支持保持原图比例的裁剪,这涉及到比例计算和边界检查,以确保裁剪区域始终符合预设的比例。 5. **用户...

    【JavaScript源代码】JavaScript 如何在浏览器中使用摄像头.docx

    ### JavaScript在浏览器中使用摄像头的方法 #### 一、获取摄像头权限 在开发Web应用程序时,如果需要使用到用户的摄像头或麦克风,首先需要通过`navigator.mediaDevices.getUserMedia()`方法请求相应的权限。为了...

Global site tag (gtag.js) - Google Analytics