[英]Canvas Image not rendering in Chrome (works in FF4 & IE9)
I'm stumped.我难住了。 For the life of me, i have no idea why this is not working in Chrome.对于我的一生,我不知道为什么这在 Chrome 中不起作用。 You can see the code here:你可以在这里看到代码:
http://jsfiddle.net/corydorning/NgXSH/ http://jsfiddle.net/corydorning/NgXSH/
When i pull this code up in FF or IE9 it works great.当我在 FF 或 IE9 中提取此代码时,它工作得很好。 You'll notice that the fiddle WILL work in Chrome with the rendered element, but it DOES NOT work outside of fiddle.您会注意到小提琴将在 Chrome 中与渲染元素一起使用,但在小提琴之外无法使用。
Any help is greatly appreciated.任何帮助是极大的赞赏。 This is my first attempt with canvas.这是我第一次尝试 canvas。
The problem appears to be that you're not waiting for the original image element to get loaded.问题似乎是您没有等待加载原始图像元素。 If you change it around a little, it works fine:如果你稍微改变一下,它工作正常:
$(function() {
var canvas = document.createElement('canvas'),
canvasExists = !!(canvas.getContext && canvas.getContext('2d')),
oImage = $('img')[0];
if (canvasExists) {
var context = canvas.getContext('2d'), img = new Image();
img.onload = function() {
canvas.height = img.height;
canvas.width = img.width;
$(oImage).replaceWith(canvas);
context.drawImage(oImage, 0, 0);
}
img.src = oImage.src;
} else {
// apply MS filters
}
It could be hard to use img.onload if you have plenty of them.如果你有很多 img.onload,可能很难使用它们。 An easy way in chrome to wait for image loading is to use:在 chrome 中等待图像加载的一种简单方法是使用:
$(window).load(function () {
instead of代替
$(document).ready(function () {
as $(window).load is actually waiting for all image to be loaded.因为 $(window).load 实际上正在等待加载所有图像。
It's work perfecly for using the image in the canvas.它非常适合使用 canvas 中的图像。 (work also in firefow and IE) (也可以在 firefow 和 IE 中工作)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.