时间：2021-07-01 10:21:17 帮助过：36人阅读
- ## 问题描述：两张图片，一张是用户上传的图片，另一张是模板图，中间是透明的，可以制作相框，并保存。使用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($('#p1'),
- {
- onrendered: function(canvas)
- {
- var oImgPNG = Canvas2Image.saveAsPNG(canvas, true);
- $('#p1').hide();
- $('#p2').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