不同浏览器操作引用文档图片的Canvas元素

结论：在chrome中操作Canvas元素（其中包含对文档图像的引用）时，要保证在脚本文件执行结束时，图像已经加载完成。在 firefox 和 IE11 中不会出现此问题。

情境： 在chrome中，当脚本文件中有操作引用文档图片的

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script defer type="text/javascript" src="1.js"></script>   //defer 立即下载外部文件，同时继续解析渲染文档，在完成文档渲染完成后执行外部脚本文件
</head>
<body>
  <canvas id="canvas" width="1000" height="1000">A drawing of something.</canvas>
  <img src="smile.gif" alt="img">
</body>
</html>

Chrome效果图：

此时，Chrome瀑布图： chromewaterfall-1

首先， Githubissues.

Githubissues is a development platform for aggregating issues.

lbwa / set.sh-stale

不同浏览器操作引用文档图片的Canvas元素 #1

结论：在chrome中操作Canvas元素（其中包含对文档图像的引用）时，要保证在脚本文件执行结束时，图像已经加载完成。在 firefox 和 IE11 中不会出现此问题。