微信H5页面用Html2canvas生成图片的几种方式
生活随笔
收集整理的這篇文章主要介紹了
微信H5页面用Html2canvas生成图片的几种方式
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Demo：僅供參考，實(shí)際業(yè)務(wù)場(chǎng)景請(qǐng)根據(jù)自己的需求修改（本案例提供的是思路和實(shí)現(xiàn)方式）
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Demo</title><link rel="stylesheet" type="text/css" href="/js/test_css/reset.css"/><link rel="stylesheet" type="text/css" href="/js/test_css/index.css"/>//上面兩個(gè)是頁(yè)面的樣式，可以不用借用，用自己的即可。<script src="/js/jquery-1.10.1.min.js?>"></script><script src="/js/html2canvas.js?>"></script><style>* {margin: 0;}canvas {margin-right: 5px;}</style> </head> <body> <div class="tablexqys"><table><tbody><tr><th>開團(tuán)時(shí)間</th><th>開團(tuán)人</th><th>開團(tuán)人數(shù)</th><th>開團(tuán)詳情</th></tr><tr><td class="ckan">2018.09.02 14:34</td><td class="ckan">6/6</td><td class="ckan">3人團(tuán)</td><td class="ckan">查看</td></tr><tr><td colspan="4" style="height: 200px"><img id="short" style="position:absolute; z-index:1; height: 15%;width: 30%" src="/web_style/web_img/v325/weichat-logo.png" /></td></tr></tbody></table> </div> <!--頁(yè)面最終生成的圖片--> <!--<div id="predict_img"><div id="box" hidden style="position:absolute; z-index:1; height: 100px;width: 100px;padding:0px"></div> </div>--> <div style="width: 100%;height: 100%;"><img src="" alt="" id="predict_img" style="width:100%;height:100%;"> </div> <script>//首先將內(nèi)容生成一張圖片$(document).ready(function () {createImg();setTimeout(function(){var predict_img = $("#predict_img").attr('src');if(predict_img.length<=0){location.href='/dev/standard/test_img';}},3000);});function createImg() {//直接選擇要截圖的dom，就能截圖，但是因?yàn)閏anvas的原因，生成的圖片模糊/*html2canvas(document.querySelector('div')).then(function(canvas) {document.body.appendChild(canvas);});*///創(chuàng)建一個(gè)新的canvasvar canvas2 = document.createElement("canvas");//選擇生成內(nèi)容的容器let _canvas = document.querySelector('.tablexqys');//獲取寬高var w = parseInt(window.getComputedStyle(_canvas).width);var h = parseInt(window.getComputedStyle(_canvas).height);//將canvas畫布放大若干倍，然后盛放在較小的容器內(nèi)，就顯得不模糊了canvas2.width = w * 2;canvas2.height = h * 2;canvas2.style.width = w + "px";canvas2.style.height = h + "px";//可以按照自己的需求，對(duì)context的參數(shù)修改,translate指的是偏移量// var context = canvas.getContext("2d");// context.translate(0,0);var context = canvas2.getContext("2d");context.scale(2, 2);//觸發(fā)截圖方式一/*html2canvas(document.querySelector('.tablexqys'), { canvas: canvas2 }).then(function(canvas) {//將生成的頁(yè)面追加到body后面document.body.appendChild(canvas);//生成以后，隱藏內(nèi)容容器document.querySelector('.tablexqys').style.display = 'none';});*///觸發(fā)截圖方式二/*html2canvas(document.querySelector('.tablexqys'), { canvas: canvas2 }).then(function(canvas) {//canvas轉(zhuǎn)換成url，然后利用a標(biāo)簽的download屬性，直接下載，繞過上傳服務(wù)器再下載document.querySelector(".down").setAttribute('href', canvas.toDataURL());//生成以后，隱藏內(nèi)容容器document.querySelector('.tablexqys').style.display = 'none';});*///觸發(fā)截圖方式三html2canvas(document.querySelector('.tablexqys'), { canvas: canvas2 }).then(function(canvas) {//賦值的方式getBase64Image(canvas.toDataURL());//生成以后，隱藏內(nèi)容容器document.querySelector('.tablexqys').style.display = 'none';});//觸發(fā)截圖方式四/*html2canvas(document.querySelector('.tablexqys')).then(function(canvas) {var dataUrl = canvas.toDataURL();var newImg = document.createElement("img");newImg.src = dataUrl;newImg.height = $(window).height();newImg.width = $(window).width();newImg.height = 300;newImg.width = 300;$("#box").show();$("#box").html(newImg);//生成以后，隱藏內(nèi)容容器document.querySelector('.tablexqys').style.display = 'none';});*/}//轉(zhuǎn)換成圖片function getBase64Image(imgurl) {var img = new Image();img.src = imgurl;img.setAttribute('crossOrigin', 'anonymous');img.οnlοad=function(){var canvas = document.createElement("canvas");canvas.width = 300;//這個(gè)設(shè)置不能丟，否者會(huì)成為canvas默認(rèn)的300*150的大小canvas.height = 300;//這個(gè)設(shè)置不能丟，否者會(huì)成為canvas默認(rèn)的300*150的大小var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, 300, 300);var dataURL = canvas.toDataURL("image/png");$("#predict_img").attr("src",dataURL);}} </script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的微信H5页面用Html2canvas生成图片的几种方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 据报道，Intel 发布 ARC 系列显
- 下一篇： 903. 昂贵的聘礼题解（建图挺有趣的）