免費(fèi)AI編程助手
今天小編為大家分享一篇有關(guān)于：“在html5中怎么實(shí)現(xiàn)頁面截圖？頁面截圖案例分享！ ”這個(gè)問題的相關(guān)內(nèi)容，下面是小編在項(xiàng)目中遇到了相關(guān)問題總結(jié)的內(nèi)容方法分享！
一、導(dǎo)入html2canvas.js
這個(gè)不需要多說，可以從github上獲?。?https://github.com/niklasvh/html2canvas
也可以直接導(dǎo)入鏈接： <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
使用起來也非常簡單，具體的API可以去網(wǎng)上查找，生成png圖片使用“image/png”即可。
其中$("#xxx")為你想要截取的div，外面可以通過jquery獲取它，當(dāng)然document獲取也是可以的。
html2canvas($("#xxx"), {
onrendered: function (canvas) {
var url = canvas.toDataURL("image/png");
window.location.href = url;
}
});其它類型的圖片如jpg，為image/jpeg等等，可自行查詢API。
到這里其實(shí)簡單的截圖已經(jīng)完成了，如果界面稍微復(fù)雜一點(diǎn)的話，可能就會出現(xiàn)各種坑，下面一個(gè)一個(gè)解決。
二、svg無法截取的問題
當(dāng)我們截取一個(gè)div時(shí)，如果這個(gè)div中存在svg標(biāo)簽，一般情況下是截取不到的，比如截取一個(gè)流程圖，得到的是下面這個(gè)樣子：
可以看到，流程圖的線沒有截取到，也就是svg沒有截取到，這時(shí)的解決方法是把svg轉(zhuǎn)換成canvas再進(jìn)行截圖即可，直接上代碼。
這里的each循環(huán)是循環(huán)所有的svg標(biāo)簽，將它們?nèi)哭D(zhuǎn)換為canvas:
if (typeof html2canvas !== 'undefined') {
//以下是對svg的處理
var nodesToRecover = [];
var nodesToRemove = [];
var svgElem = cloneDom.find('svg');
svgElem.each(function (index, node) {
var parentNode = node.parentNode;
var svg = node.outerHTML.trim();
var canvas = document.createElement('canvas');
canvas.width = 650;
canvas.height = 798;
canvg(canvas, svg);
if (node.style.position) {
canvas.style.position += node.style.position;
canvas.style.left += node.style.left;
canvas.style.top += node.style.top;
}
nodesToRecover.push({
parent: parentNode,
child: node
});
parentNode.removeChild(node);
nodesToRemove.push({
parent: parentNode,
child: canvas
});
parentNode.appendChild(canvas);
});
}這里需要用到 ?canvg.js?，以及它的依賴文件?rgbcolor.js?，網(wǎng)上可以直接下載，也可以直接導(dǎo)入。
三、背景透明的問題
這個(gè)其實(shí)很簡單，因?yàn)樗J(rèn)是透明的，html2canvas中有一個(gè)參數(shù)background就可以添加背景色，如下：
html2canvas(cloneDom, {
onrendered: function(canvas) {
var url =canvas.toDataURL("image/png");
},
background:"#fafafa"
}); 四、只能截取可視部分的問題
如果需要截取的div超出了界面，可能會遇到截取不全的問題，如上圖，只有一半的內(nèi)容，這是因?yàn)榭床坏降牟糠直浑[藏了，而html2canvas是無法截取隱藏的dom的。
所以此時(shí)的解決辦法是使用克隆，將需要截取的部分克隆一份放在頁面底層，再使用html2canvas截取這個(gè)完整的div，截取完成后再remove這部分內(nèi)容即可，完整代碼如下：
function showQRCode() {
scrollTo(0, 0);
//克隆節(jié)點(diǎn)，默認(rèn)為false，即不復(fù)制方法屬性，為true是全部復(fù)制。
var cloneDom = $("#d1").clone(true);
//設(shè)置克隆節(jié)點(diǎn)的z-index屬性，只要比被克隆的節(jié)點(diǎn)層級低即可。
cloneDom.css({
"background-color": "#fafafa",
"position": "absolute",
"top": "0px",
"z-index": "-1",
"height": 798,
"width": 650
});
if (typeof html2canvas !== 'undefined') {
//以下是對svg的處理
var nodesToRecover = [];
var nodesToRemove = [];
var svgElem = cloneDom.find('svg');//divReport為需要截取成圖片的dom的id
svgElem.each(function (index, node) {
var parentNode = node.parentNode;
var svg = node.outerHTML.trim();
var canvas = document.createElement('canvas');
canvas.width = 650;
canvas.height = 798;
canvg(canvas, svg);
if (node.style.position) {
canvas.style.position += node.style.position;
canvas.style.left += node.style.left;
canvas.style.top += node.style.top;
}
nodesToRecover.push({
parent: parentNode,
child: node
});
parentNode.removeChild(node);
nodesToRemove.push({
parent: parentNode,
child: canvas
});
parentNode.appendChild(canvas);
});
//將克隆節(jié)點(diǎn)動(dòng)態(tài)追加到body后面。
$("body").append(cloneDom);
html2canvas(cloneDom, {
onrendered: function(canvas) {
var url =canvas.toDataURL("image/png");
window.location.href = url ;
cloneDom.remove(); //清空克隆的內(nèi)容
},
background:"#fafafa"
});
}
}這里外面首先將要截取的 div 克隆一份，并將 z-index 設(shè)置為最小，避免引起界面的不美觀，然后是對 svg 進(jìn)行的處理，上面已經(jīng)分析過了，最后將克隆節(jié)點(diǎn)追加到 body 后面即可。
在 onrendered 中，我們可以直接使用 location.href 跳轉(zhuǎn)查看圖片，可以進(jìn)行保存操作，也可以將 url 寫入 img 的 src 中顯示在界面上，如 ?$('#imgId').attr('src',url);?
最后可以在界面展示剛剛截取到的圖片：
五、上傳圖片保存到數(shù)據(jù)庫，并在界面中獲取該圖片顯示
現(xiàn)在得到 url 了，需要上傳到后端，并存到數(shù)據(jù)庫中，再另一個(gè)展示的界面中加載該圖片。我一般習(xí)慣于使用 url 來存儲圖片路徑，而不是用 blob 存儲。
因?yàn)樾枰诹硪粋€(gè)界面中獲取圖片，所以我把圖片存在了與 webapp 同級的一個(gè) resource 目錄下，代碼如下：
//存儲圖片并返回圖片路徑
BASE64Decoder decoder = new BASE64Decoder();
byte[] b = decoder.decodeBuffer(product.getProPic().substring("data:image/png;base64,".length()));
ByteArrayInputStream bais = new ByteArrayInputStream(b);
BufferedImage bi1 = ImageIO.read(bais);
String url = "user_resource" + File.separator + "img" + File.separator + "product_"+UUID.randomUUID().toString().replace("-", "")+".png";
String totalUrl = System.getProperty("root") + url;
File w2 = new File(totalUrl);
ImageIO.write(bi1, "png", w2);
product.setProPic(url); //將圖片的相對路徑存儲到數(shù)據(jù)庫中
int res = productMapper.insertSelective(product); //添加到數(shù)據(jù)庫這里因?yàn)樯婕暗狡渌壿?，所以只放一部分代碼。
這里使用的是 BASE64Decoder 來存儲圖片，我們獲取到圖片后，需要使用 substring 將“data:image/png;base64,”的內(nèi)容截取掉，因?yàn)椤埃焙竺娌攀菆D片的url， url.substring("data:image/png;base64,".length()) 。
對于路徑，上面代碼中的url是我存儲到數(shù)據(jù)庫中的內(nèi)容，而 totalUrl 就是實(shí)際進(jìn)行 ImageIO 的 write 操作時(shí)存儲的真實(shí)路徑， getProperty() 方法獲取的項(xiàng)目的根目錄，可以在 web.xml 中配置如下內(nèi)容，然后 System.getProperty("root") 即可。
<!-- 配置系統(tǒng)獲得項(xiàng)目根目錄 -->
<context-param>
<param-name>webAppRootKey</param-name>
<param-value>root</param-value>
</context-param>
<listener>
<listener-class>
org.springframework.web.util.WebAppRootListener
</listener-class>
</listener>現(xiàn)在圖片的 url 就存到數(shù)據(jù)庫里了，而圖片本身就存儲在 tomcat 下該項(xiàng)目的這個(gè)目錄下。
最后外面在界面上獲取，只需要在當(dāng)前的url前面加上項(xiàng)目名即可 < img class ="depot-img" src ="<%=request.getContextPath()%>/`+e.proPic+`" > 。
然后就可以看到界面上顯示的圖片了：
以上就是有關(guān)于：“在html5中怎么實(shí)現(xiàn)頁面截圖？頁面截圖案例分享！ ”這個(gè)方面的相關(guān)內(nèi)容，當(dāng)然小編也希望大家可以在遇到困難的時(shí)候進(jìn)行一個(gè)總結(jié)，那么今天的分享就到這邊了，更多有關(guān)于html5這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！
