大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

html2canvas保存网页截图图片不显示怎么办-创新互联

这篇文章将为大家详细讲解有关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 });  "  ## 效果展示- 没有服务器谷歌浏览器下![没有服务器谷歌浏览器下]  (/tupian/20230522/404.html  - 没有服务器火狐浏览器下![没有服务器火狐浏览器下]  (/tupian/20230522/404.html  ## 说明只要火狐浏览器下可以显示图片就可以说明程序几乎没有问题O(∩_∩)O哈哈~

关于“html2canvas保存网页截图图片不显示怎么办”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


分享标题:html2canvas保存网页截图图片不显示怎么办-创新互联
转载来源:http://dzwzjz.com/article/jejhe.html
在线咨询
服务热线
服务热线:028-86922220
TOP