html2canvas 无法渲染图像（外部托管图像）-image-IT问答社区-解决你的IT疑问

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

NaiveBayesian 2月前

我创建了一个游戏，用户从 4 个单独的幻灯片中挑选 4 张图片来创建一个合成图像，然后我希望能够将其导出到我网站上的“图库”功能。我正在尝试...

我创建了一个游戏，用户从 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:[email protected]?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>

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

无论如何，任何帮助或指点都会得到感激！谢谢

帖子版权声明 1、本帖标题：html2canvas 无法渲染图像（外部托管图像）
本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由NaiveBayesian在本站《image》版块原创发布，转载请注明出处！

最新回复 (0)

最新倒序只看楼主

GTpy 2月前 0 只看Ta

引用 2楼

@Murtuza - 我发这个帖子已经 5 年了。好像链接已经失效了。我建议你参考一下

Danish Shakeel 2月前 0 只看Ta

3楼

尝试这个：

<div class="bodyWrap">
  <div class="header">
    <h1>TITLE</h1>
  </div>
  <div class="slideshowWrapper">
    <div class="slideshow">
      <div class="slide">
        <img src="https://picture.jpg">
      </div>
      <div class="slide">
        <img src="https://picture.jpg">
      </div>
      <div class="prevControl"></div>
      <div class="nextControl"></div>
      <div class="slideshow">
        <div class="slide">
          <img src="https://picture.jpg">
        </div>
        <div class="slide">
          <img src="https://picture.jpg">
        </div>
        <div class="prevControl"></div>
        <div class="nextControl"></div>
        <div class="slideshow">
          <div class="slide">
            <img src="https://picture.jpg">
          </div>
          <div class="slide">
            <img src="https://picture.jpg">
          </div>
          <div class="prevControl"></div>
          <div class="nextControl"></div>
          <div class="slideshow">
            <div class="slide">
              <img src="https://picture.jpg">
            </div>
            <div class="slide">
              <img src="https://picture.jpg">
            </div>
            <div class="prevControl"></div>
            <div class="nextControl"></div>
          </div>
        </div>
      </div>
    </div>
    <a href="#" onClick="shotit(event)">take picture</a>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="html2canvas.js"></script>
    <script>
      var shotit = function(e)
      {
        e.preventDefault();
        html2canvas($('.bodyWrap'), {
          onrendered: function(canvas)
          {
            document.body.appendChild(canvas);
          },
          logging:true
        });
      };
    </script>

c mou 2月前 0 只看Ta

引用 4楼

嘿！啊，谢谢，差不多完成了，但是它不包括“.slideshow”或“.slide”元素...有什么想法吗？我需要将它们添加到 jquery 中吗？
Zum Dummi 2月前 0 只看Ta

引用 5楼

另外我忘了提一下，幻灯片使用 jquery 来运行，这有影响吗？（抱歉，我不知道如何在这里编写代码）$(document).ready(function () { $('.slideshow').cycle({ timeout: 0, slides: \'> div.slide\', speed: 500, fx: \'scrollHorz\' }); $('.nextControl').on('click', function(e) { $(this).closest('.slideshow').cycle('next'); }); $('.prevControl').on('click', function(e) { $(this).closest('.slideshow').cycle('prev'); }); $('.aboutToggle').on('click', function(e) { $(\'.sidebarright\').toggleClass(\'sidebarrightactive\'); }); });
Dharmendrasinh Chudasama 2月前 0 只看Ta

引用 6楼

请在 img 标签中放入相对路径...这样就可以了...如果它满足了您的疑问，请接受答案...
Rafaela 2月前 0 只看Ta

引用 7楼

嗨，真的很抱歉，但我不知道相对路径是什么！我对编码还很陌生，正在努力边学边做，谢谢！
Abhijit Sarkar 2月前 0 只看Ta

引用 8楼

@Phoebe19，我们无法绘制属于不同主机的图像。您必须拥有一个托管图像的服务器，并且该服务器具有适当的 Access-Control-Allow-Origin 标头。
Azzarrel 2月前 0 只看Ta

引用 9楼
您可以通过传递 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
}
});
```
Frank Hileman 2月前 0 只看Ta

引用 10楼

也可以使用代理库 github.com/niklasvh/html2canvas-proxy-nodejs