html2canvas 保存网页截图图片不显示_html/css

首頁

web前端

html教學

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

ringa_lee

May 12, 2018 pm 01:37 PM

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

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存，這玩意兒，說簡單也簡單，說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章，結果用戶打開還是老版本，這滋味，誰受得了？這篇文章，咱就來扒一扒這背後的彎彎繞繞，以及如何優雅地解決這個問題。讀完之後，你就能輕鬆應對各種緩存難題，讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存，說白了就是瀏覽器或者服務器為了提高訪問速度，把一些靜態資源（比如圖片、CSS、JS）或者頁面內容存儲起來。下次訪問時，直接從緩存裡取，不用再重新下載，速度自然快。但這玩意兒，也是個雙刃劍。新版本上線，