在很多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 = https://www.cnblogs.com/xiaoyeya/p/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端截圖是沒有問題的，配置好，直接保存即可，無需縮放等，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/174693.html
標籤：JavaScript