Question

我创建了一个游戏，用户从4个单独的幻灯片中选择4个图像来创建合成图像，然后我希望能够导出到我网站上的“图库”功能。我试图使用html2canvas但遇到了一些问题

这是我的jquery：

var shotit = function() {
$('.bodyWrap').html2canvas({
onrendered : function(canvas) {
var img = canvas.toDataURL();
    $('<img>',{src:img}).appendTo($('body'));
        }
    }); }

body wrap是一个非常长的html元素，里面有很多子元素，但它基本上都是这样的

<div class="bodyWrap">

        <div class="header">
          <h1>TITLE</h1>
        </div>

            <div class="slideshowWrapper">
              <div class="slideshow">
                    <div class="slideshowWrapper">
                <div class="slideshow">
                    <div class="slide">
                       <img class="img2" src="https://i.imgur.com/mnJDmlS.jpg" alt="head1">
<div class="emailButton">
 <a class="emailLink" href="mailto:emailaddres@email.com?Subject=Let's mail"target="_blank"><br>Name of Artist</a>
</div>
                    </div>
                    <div class="slide">
                        <img https://picture.jpg>
                    </div>
                      <div class="prevControl"></div>
                      <div class="nextControl"></div>
              <div class="slideshow">
                    <div class="slide">
                        <img https://picture.jpg>
                    </div>
                    <div class="slide">
                        <img https://picture.jpg>
                    </div>
                      <div class="prevControl"></div>
                      <div class="nextControl"></div>
              <div class="slideshow">
                    <div class="slide">
                        <img https://picture.jpg>
                    </div>
                    <div class="slide">
                        <img https://picture.jpg>
                    </div>
                      <div class="prevControl"></div>
                      <div class="nextControl"></div>
              <div class="slideshow">
                  <div class="slide">
                        <img https://picture.jpg>
                  </div>
                  <div class="slide">
                        <img https://picture.jpg>
                  </div>
                      <div class="prevControl"></div>
                      <div class="nextControl"></div>
                  </div>
              </div>
            </div>
</div>

图片托管在外部imgur而不是我的网站上。

然后是一个看起来像这样的按钮（用于拍摄照片）

<a href="#" onClick="shotit()">take picture</a>

抱歉，这可能有点多代码，但我不知道问题出在哪里!!

无论如何，任何帮助或指针都感激不尽！感谢

Answer 1

试试这个：

IClaimsContext

Answer 2

您可以通过传递html2canvas函数中的选项之一来实现。

html2canvas(document.body,
{
useCORS: true, //By passing this option in function Cross origin images will be rendered properly in the downloaded version of the PDF
onrendered: function (canvas) {
 //your functions here
}
});

html2canvas无法渲染图像（外部托管图像）

2 个答案: