这篇文章将为大家详细讲解有关html2canvas保存网页截图图片不显示怎么办，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了封丘免费建站欢迎大家使用！
## 问题描述：两张图片，一张是用户上传的图片，另一张是模板图，中间是透明的，可以制作相框，并保存。使用html2canvas对两个img标签进行截图。在写demo的时候html2canvas没有报错但是所截的是空白，若换成文字就可以。
## 原因分析：找了半天才知道，如果截图部分包含图片的话，程序必须放在服务器下面进行，不然的话就是空图片。
- It will not work if you run this html file without any web server .
If you are playing around on your PC then install XAMPP or any
other web server (Easiest option http://www.apachefriends.org/en/xampp.html) and put the image ,
JavaScript and HTML code in C:\xampp\htdocs (if C dirive is your installation drive) and run using the server.
I have tested it in Chrome and its working.
##代码实例"
Document
img{ width: 500px; height: 300px; position: fixed; } #p1{ height: 500px; width: 100%; }
#p2{ position: fixed; bottom: 0; background: red; }
html2canvas($('#p1'),
{
onrendered: function(canvas)
{
var oImgPNG = Canvas2Image.saveAsPNG(canvas, true);
$('#p1').hide();
$('#p2').html(oImgPNG);
},
width: 500,
height: 500 });
"
## 效果展示- 没有服务器谷歌浏览器下![没有服务器谷歌浏览器下]
(/upload/otherpic60/2849.jpg "在这里输入图片标题")
- 没有服务器火狐浏览器下![没有服务器火狐浏览器下]
(/upload/otherpic60/2850.jpg "在这里输入图片标题")
## 说明只要火狐浏览器下可以显示图片就可以说明程序几乎没有问题O(∩_∩)O哈哈~
关于“html2canvas保存网页截图图片不显示怎么办”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
网站标题：html2canvas保存网页截图图片不显示怎么办
文章起源：
http://cdxtjz.cn/article/jcjgeg.html
