搜索
首页 电脑/网络

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

全部回答

2023-03-28

0 0

    ## 问题描述:两张图片,一张是用户上传的图片,另一张是模板图,中间是透明的,可以制作相框,并保存。使用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 id="p2"></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。

类似问题换一批

热点推荐

热度TOP

相关推荐
加载中...

热点搜索 换一换

电脑/网络
电脑/网络
程序设计
电脑装机
操作系统/系统故障
硬件
笔记本电脑
百度
互联网
反病毒
软件
举报
举报原因(必选):
取消确定举报