[英]JS - Canvas Image in not working well in chrome ( or how to wait for an image to load properly )
I have a script that draws a QR code with an Image on canvas . 我有一个脚本在画布上绘制带有图像的QR码。
It is using a plugin, and normally - everything works great - but not in chrome . 它正在使用一个插件,通常 - 一切都很好 - 但不是在chrome中。
HTML 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 script is as follows ( ignore the PHP part - it is working great ): 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);
});
Like said , it is working great on all tested browsers - except in chrome - where it works sporadically . 如上所述,它在所有经过测试的浏览器上运行良好 - 除了在chrome中 - 它偶尔可以工作。 more fail than work. 失败多于工作。 ( 90% - 10% ) (90% - 10%)
Observing a bit , I have noticed two things : 稍微观察一下,我注意到两件事:
1 - The jQuery(document).ready(function()
is not really working as form my understaning of what it should be doing ( and my understanding might be wrong of course ) because the script is firing and displaying the image BEFORE the document is finished to load. 1 - jQuery(document).ready(function()
并没有真正起作用我对它应该做什么的理解(当然我的理解可能是错误的)因为脚本在文档发出之前触发并显示图像完成加载。
2 - I assume by observing that the script fails becuase ( related to 1 ) - the image is actually nowhere to be found when the script fires - so it has nowhere to take the source from .. 2 - 我假设通过观察脚本失败了(与1相关) - 当脚本触发时,图像实际上无处可寻 - 所以它无处可去。
At the beginning I blamed the "display:none"
and changed the div to style="width:100px;height:100px;"
在开始时我责怪"display:none"
并将div更改为style="width:100px;height:100px;"
with jQuery("#o99-qrs-img-buffer").hide();
用jQuery("#o99-qrs-img-buffer").hide();
after the script firing . 剧本解雇后。
No good . 不好 。
then I tried to change the jQuery(document).ready
to load
and onLoad
. 然后我尝试将jQuery(document).ready
更改为load
和onLoad
。
Still no go . 仍然没有去。
Reading a LOT of related question here on SE - I found 3 with the hint of my problem : HERE , HERE and HERE . 在SE上阅读了很多相关的问题 - 我发现了3个问题: 这里 , 这里和这里 。
So I tried to implement the first one , which looked like a solid solution : 所以我尝试实现第一个,看起来像一个可靠的解决方案:
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
But chrome seems a lot more persistent than me ... 但铬似乎比我更持久......
Either I am implementing the solution totally wrong ( very possible ) or I am so unfamiliar with JS that I do not understand the problem at the first place . 要么我完全错误地实现解决方案(非常可能),要么我对JS不熟悉,我首先不了解问题。
The fact that the script working with a plugin seems irrelevant because the plugin works great on all browsers (and sometimes chrome too ..) 使用插件的脚本似乎无关紧要,因为插件在所有浏览器上运行良好(有时也是chrome ...)
At any rate , I need help In finding a way to load the Image and be sure it is loaded before the script fires ... 无论如何,我需要帮助在找到加载图像的方法并确保在脚本触发之前加载它...
$(document).ready()
is fired, when DOM is fully loaded. 当DOM完全加载时, $(document).ready()
被触发。 In practice this happens at the time when parser have just met </body>
. 实际上,这在解析器刚刚遇到</body>
。 This doesn't mean that the page would be ready/fully loaded, content of external resources like iframe
s or img
might still be loading. 这并不意味着页面已准备好/完全加载, iframe
s或img
等外部资源的内容可能仍在加载。 $(document).ready()
only guarantees you can refer all elements within the HTML. $(document).ready()
仅保证您可以引用HTML中的所有元素。
If you want to wait untill the whole page and all its resources have been completely loaded, you need to use $(window).load()
. 如果要等到整个页面并且其所有资源都已完全加载,则需要使用$(window).load()
。
Also looks like document
never triggers load
event, $(document).onLoad()
doesn't exist. 看起来像document
永远不会触发load
事件, $(document).onLoad()
不存在。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.