關於前端截圖爬過的坑！

在不少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端截圖是沒有問題的，配置好，直接保存便可，無需縮放等。