1. 程式人生 > >js 利用html2canvas實現截圖功能

js 利用html2canvas實現截圖功能

需要匯入的檔案:jquery.min.js,html2canvas.js,canvas2image.js,jquery.qrcode.min.js(如需二維碼)

var shareContent = document.getElementById("imgmodel"); //需要截圖的包裹的(原生的)DOM 物件

var width = shareContent.offsetWidth; //獲取dom 寬度
var height = shareContent.offsetHeight; //獲取dom 高度
var canvas = document.createElement("canvas"); //建立一個canvas節點
var scale = 2; //定義任意放大倍數 支援小數
canvas.width = width * scale; //定義canvas 寬度 * 縮放
canvas.height = height * scale * 1; //定義canvas高度 *縮放
canvas.getContext("2d").scale(scale, scale); //獲取context,設定scale 
var opts = {
scale : scale, // 新增的scale 引數
canvas : canvas, //自定義 canvas
logging : false, //日誌開關
width : width, //dom 原始寬度
height : height//dom 原始高度

};

html2canvas(shareContent, opts).then(function(canvas) {

//生成圖片
var img = Canvas2Image.convertToImage(canvas,canvas.width, canvas.height);

$(".body").append(img);
});

======================================================================

我在移動端開發使用它的時候,遇到了截圖不全的問題,原因是我待截圖部分的內容用的是百分比佈局,後來我換成了固定畫素,藏在最下層

截圖之後,成功的獲取到了全部的內容

這樣做的好處是,上面的scale = 2 ,是放大了兩倍,但是倍數越大導致效能越慢,而且如果包含二維碼,會導致二維碼不清晰

二維碼不清晰的後果是微信長按識別不了

一開始就同時放大待截圖部分,這樣截圖出來的二維碼是很清晰的,大家可以利用藏在背景下面來實現它

這樣我們就能自動生成使用者專屬的二維碼宣傳海報