search

Home >Web Front-end >HTML Tutorial >html2canvas 保存网页截图 图片不显示_html/css_WEB-ITnose

html2canvas 保存网页截图 图片不显示_html/css_WEB-ITnose

ringa_lee
ringa_leeOriginal
2018-05-12 13:37:265251browse


## 问题描述：两张图片，一张是用户上传的图片，另一张是模板图，中间是透明的，可以制作相框，并保存。使用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.
##代码实例"
<!DOCTYPE html>
<html>
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<script src="js/jquery.js"></script> 
<script src="js/html2canvas.js"></script> 
<script src="js/canvas2image.js"></script></head><style type="text/css"> 
img{ width: 500px; height: 300px; position: fixed; } #p1{ height: 500px; width: 100%; } 
#p2{ position: fixed; bottom: 0; background: red; }
</style><body> <p id="p1"> <img id="img1" src="img/01.jpg"> 
<img id="img2" src="img/02.jpg" style="width:300px"> 
</p> <p id="p2"></p></body><script type="text/javascript"> html2canvas($(&#39;#p1&#39;), 
{   
 onrendered: function(canvas) 
 {      
 var oImgPNG = Canvas2Image.saveAsPNG(canvas, true);       
 $(&#39;#p1&#39;).hide();      
 $(&#39;#p2&#39;).html(oImgPNG);   
 },   
 width: 500,   
 height: 500 });
 </script></html>"
 ## 效果展示- 没有服务器谷歌浏览器下![没有服务器谷歌浏览器下]
 (https://static.oschina.net/uploads/img/201601/08225723_ndxo.png "在这里输入图片标题")
 - 没有服务器火狐浏览器下![没有服务器火狐浏览器下]
 (https://static.oschina.net/uploads/img/201601/08225751_vJBo.png "在这里输入图片标题")
 ## 说明只要火狐浏览器下可以显示图片就可以说明程序几乎没有问题O(∩_∩)O哈哈~## 小弟才疏学浅，如有错误望大神指点，O(∩_∩)O
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Semantic UI 2.1.8 发布，前端界面开发框架_html/css_WEB-ITnoseNext article：css3文本溢出显示控制_html/css_WEB-ITnose

Related articles

See more