在很多web項目中我們保存的圖片都是後臺的我們負責渲染到頁面上，但是前端也是可以截圖的，可是會有很多出人意料的bug，由於工作中遇到過所以就記錄下來吧。 前提：後臺傳一張二維碼的圖片以及個人頭像名稱性別然後在頁面展示，這很簡單，但是我們需要將二維碼個人頭像名稱性別合成一張圖片保存下來。 工具插件：h ...
在很多web項目中我們保存的圖片都是後臺的我們負責渲染到頁面上，但是前端也是可以截圖的，可是會有很多出人意料的bug，由於工作中遇到過所以就記錄下來吧。
前提：後臺傳一張二維碼的圖片以及個人頭像名稱性別然後在頁面展示，這很簡單，但是我們需要將二維碼個人頭像名稱性別合成一張圖片保存下來。
工具插件：html2canvas.js和canvas2images.js,現將頁面轉化成畫布，然後將畫布轉化成圖片，在進行保存。下麵看代碼！
var test = document.getElementsByClassName("box")[0];//你需要截圖的dom元素 var width = test.offsetWidth; //獲取dom 寬度 var height = test.offsetHeight; //獲取dom 高度 var canvas = document.createElement("canvas");//創建一個畫布 var scale = 2;由於手機像素密度所以要對畫布進行一個縮放,來提高截圖的清晰度 canvas.width = width * scale; //定義canvas 寬度 * 縮放 canvas.height = height * scale; //定義canvas高度 *縮放 canvas.getContext("2d").scale(scale, scale); html2canvas(test, { useCORS: true, 是否嘗試使用CORS從伺服器載入圖像,允許跨域，不然後臺數據截圖不到 logging: true, //日誌開關，便於查看html2canvas的內部執行流程 canvas: canvas, width: width, //可選 height: height, //可選 scale:scale, //可選
//以上為基本配置;
onrendered: function(canvas) {
var context = canvas.getContext("2d");
//消除鋸齒,重要
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
var img = new Image();創建一個圖片對象
var url = canvas.toDataURL('image/jpeg');
img.src = canvas.toDataURL('image/jpeg');toDataURL()該方法是將canvas轉成base64編碼的圖片;
document.body.appendChild(img);可選擇是否將圖片渲染到頁面上
//那該如何將截好的圖片保存到手機上呢？這是調用了H5+的方法,自行參考
var bitblmap = new plus.nativeObj.Bitmap('bitblmap');
bitblmap.loadBase64Data(url,function(){
bitblmap.save("路徑",{配置參數},successcallback,errorcalllback)
},function(){mui.toast("保存失敗")}
}
保存圖片的清晰度問題（設置縮放），截圖的圖片有白邊黑邊的問題（消除鋸齒），圖片大小不正確的問題（所截取元素寫好寬高，儘量不要使用定位）；
以上就是前端截圖的使用，學會了趕緊試試吧。pc端截圖是沒有問題的，配置好，直接保存即可，無需縮放等。
