我有一个脚本,可以在 Canvas 上绘制带有图像的二维码。
它使用插件,通常 - 一切都很好 - 但在 chrome 中不行。
HTML
<img id="#o99-qrs-img-buffer" src="http://localhost/www.beta.com/logo1.png"
style="display:none">
<div id="o99_qrcode" class="code"></div>
JS 脚本如下(忽略 PHP 部分 - 它运行良好):
jQuery(document).ready(function() {
var options = {
render: "'.$qr_render.'", // Canvas, Div ,Image
size: '.$qr_size.',
radius: '. ($qr_corner_r * 0.1) .',
.... tons of other options....
// Image Label -> the problem is here
image: jQuery("#o99-qrs-img-buffer")[0], // taken as example
};
jQuery("#o99_qrcode").empty().qrcode(options);
});
正如所说,它在所有经过测试的浏览器上都工作得很好 - 除了 Chrome - 它偶尔可以工作。失败多于工作。 ( 90% - 10% )
观察了一下,我注意到两件事:
1 - jQuery(document).ready(function()
并没有真正按照我对它应该做什么的理解工作(当然我的理解可能是错误的),因为脚本在文档加载完成之前触发并显示图像。
2 - 我认为通过观察脚本失败是因为(与 1 相关) - 当脚本触发时实际上无处可找到图像 - 因此它无处可获取源代码..
一开始,我责怪 "display:none"
并使用 jQuery 将 div 更改为
脚本触发后。 style="width:100px;height:100px;"
("#o99-qrs-img-buffer").hide();
不好。
然后我尝试将 jQuery(document).ready
更改为 load
和 onLoad
。
还是不行。
在 SE 上阅读了很多相关问题 - 我发现 3 个问题暗示了我的问题:HERE , HERE和 HERE 。
所以我尝试实现第一个,它看起来是一个可靠的解决方案:
var imagetest = new Image();
imagetest.onload = function() {
// wrap the firing in a function only when the image loads
jQuery("#o99_qrcode").empty().qrcode(options);
};
imagetest.src: jQuery("#o99-qrs-img-buffer")[0]; // taken as example
但是chrome看起来比我执着多了......
要么是我完全错误地实现了解决方案(很可能),要么是我对 JS 太不熟悉,以至于我一开始就不明白这个问题。
与插件一起使用的脚本似乎无关紧要,因为该插件在所有浏览器上都可以很好地工作(有时 chrome 也可以..)
无论如何,我需要帮助找到加载图像的方法并确保在脚本触发之前加载它......
最佳答案
$(document).ready()
当 DOM 完全加载时被触发。实际上,这发生在解析器刚刚遇到</body>
时。 。这并不意味着页面已准备好/完全加载,外部资源的内容如 iframe
或img
可能仍在加载。 $(document).ready()
仅保证您可以引用 HTML 中的所有元素。
如果你想等到整个页面及其所有资源都已完全加载,则需要使用 $(window).load()
.
看起来也像document
从不触发load
事件,$(document).onLoad()
不存在。
关于javascript - JS - Canvas Image 在 Chrome 中无法正常工作(或如何等待图像正确加载),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20775359/