我创建了一个游戏,用户从 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>
抱歉,代码可能有点多,但我只是不知道问题出在哪里!!
无论如何,任何帮助或指点都会得到感激!谢谢
html2canvas 无法渲染图像(外部托管图像)
下载声明:
本站所有软件和资料均为软件作者提供或网友推荐发布而来,仅供学习和研究使用,不得用于任何商业用途。如本站不慎侵犯你的版权请联系我,我将及时处理,并撤下相关内容!
帖子版权声明
1、本帖标题:html2canvas 无法渲染图像(外部托管图像) 本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com
除非注明,本帖由NaiveBayesian 在本站《image》 版块原创发布,
转载请注明出处!