javascript - html2canvas 插件不捕获图像

Question

这个问题之前已经被问过，但我似乎无法让它发挥作用。希望你能看到我的方法的错误。下面的代码将捕获文本和灰色 div，但不捕获图像。

<div id="snapshot" style="left: -60px; height: 1000px; width: 1000px;">
    <p>THIS IS A TEXT TEST</p>
    <div style="width: 100px; height: 100px; float: left; background: #f0f0f0">

    </div>

    <img src="http://photos.capturemyarizona.com/photos/LnnOEyWSV4fh846ohaIAQg/display.jpg" />
</div>




$("#myBtn").click ->
    html2canvas $("#snapshot"),
      background: "red"
      onrendered: (canvas) ->
        imgSrc = canvas.toDataURL()
        popup = window.open(imgSrc)
        return

    return


<button id="myBtn">Click Me</button>

这是 fiddle jsfiddle

Answer 1

好的，我知道问题出在哪里了。如果图像不是来自同一来源，则 html2canvas 无法捕获图像。我的图像来自 CDN。

html2canvas docs