这篇文章将为大家详细讲解有关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. ##代码实例" <!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://cache.yisu.com/upload/information/20210204/90/2849.jpg "在这里输入图片标题") - 没有服务器火狐浏览器下![没有服务器火狐浏览器下] (https://cache.yisu.com/upload/information/20210204/90/2850.jpg "在这里输入图片标题") ## 说明只要火狐浏览器下可以显示图片就可以说明程序几乎没有问题O(∩_∩)O哈哈~
关于“html2canvas保存网页截图图片不显示怎么办”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
