微信H5實現網頁長按儲存圖片及識別二維碼

MrZss發表於2018-08-19
H5網頁

實現微信H5實現網頁長按儲存圖片及識別二維碼

使用工具

html2canvas 官方文件

html2canvas.hertzen.com/

canvas2image

github.com/hongru/canv…

實施方案

  • 將DOM 使用html2canvas轉化成cavas物件 再將cavas物件使用canvas2image(封裝toDataUR方法L)轉化為png、jpeg等格式

操作步驟

1.引入html2canvas.js canvas2image.js

  • 可通script標籤引入
webpack引入（vue react）
npm install --save html2canvas
或
yarn add html2canvas
// 目前我安裝的版本 package.json中顯示的
// html2canvas": "^1.0.0-alpha.12",
複製程式碼
npm install --save canvas2image
// "canvas2image": "^1.0.5",
複製程式碼

網上大多中文教程版本與官方版本不一致，寫法也有出入，最好在實際使用時檢視官方文件

npm 安裝成功後還在需要使用的vue元件中用import引入

import html2canvas from 'html2canvas';
import Canvas2Image from 'canvas2image';
// 並且在components中聲名
export default {
    data(){
      return{
      }
    },
    components: {
      Canvas2Image,
      html2canvas
    },
}
複製程式碼

我這直接使用import引入Canvas2Image 可能會報錯需修改原始碼

./node_moduler/canvas2image/canvas2image.js

在最後一行加入export default Canvas2Image;
var Canvas2Image = function (){
    ...
}
export default Canvas2Image;

複製程式碼

接下來就可以安排上了

first第一步 html 轉為 canvas

選中dom物件（記住是dom物件非jquery物件）

jquery物件轉dom物件方法

document.getElementById (“id”)獲取的是dom物件
alert(document.getElementById(“div”))得到的是[object HTMLDivElement]
$(“#id”)獲取jquery物件
alert($(“#div”))得到的是[object Object]
jquery物件可通過 得到dom物件
var $v =$("#v") ; //jQuery物件 
var v=$v[0]; //DOM物件 
var v=$v.get(0);

複製程式碼

基於html2canvas.js可將一個元素渲染為canvas，只需要簡單的呼叫html2canvas(element[, options]);即可。下列html2canvas方法會返回一個包含有<canvas>元素的promise：

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
    // 把body內包含的內容全部轉化為canvas
});
複製程式碼

第二部把canvas物件轉化為image物件 並且使用dom操作把img標籤插入即可

清晰度解決方案

將canvas物件的屬性width和height屬性放大為2倍，最後將canvas的CSS樣式width和height設定為原先正常的大小。

全部操作程式碼

    convert2canvas() {
      // 獲取需要轉化的dom物件 直接使用$('.wrap')選取的為jquery物件 無法繼續操作
      var cntElem = $('.wrap')[0];

      var shareContent = cntElem; //需要截圖的包裹的（原生的）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; //定義canvas高度 *縮放
      //放大後再縮小提高清晰度
      canvas.getContext("2d").scale(scale, scale); 
      
      console.log(width)
      console.log(height)
      // 設定html2canvas方法的配置
      var opts = {
        scale: scale, // 新增的scale 引數
        canvas: canvas, //自定義 canvas
        // allowTaint: true, //允許畫布上有跨域圖片 不建議使用 後面詳細補充
        // logging: true, //日誌開關，便於檢視html2canvas的內部執行流程
        width: width, //dom 原始寬度
        height: height,
        useCORS: true // 【重要】開啟跨域配置
      };
      // 開始轉化為canvs物件
      html2canvas(shareContent, opts).then(function(canvas) {

        var context = canvas.getContext('2d');
        // 【重要】關閉抗鋸齒
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;

        // 【重要】預設轉化的格式為png,也可設定為其他格式
        var img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);
        //轉化後放哪 最好放在與 .wrap 父級下
        var detail = document.getElementsByName(".wrap");
        detail.appendChild(img);
        // 最後設定img標籤為正常高度寬度 提高清晰度
        $(img).css({
          "width": canvas.width / 2 + "px",
          "height": canvas.height / 2 + "px",
        }).addClass('f-full');

      });
    }
複製程式碼

注意事項

移動端截圖 只擷取到瀏覽器當前顯示的畫面即一屏高度

可能原因

  • 擷取元件設定高度為height:100%;
  • 如若在擷取的div中使用background-image：url() 設定背景圖請使用img標籤設定背景把需擷取的dom撐開

如下結構設定

.main{
    height: auto;
    width: 100%;
}
img{
    width:100%;
}

<div class="main"><img><div>
複製程式碼

含有跨域圖片（如微信頭像等）

如直接使用微信頭像url 放入img標籤中 設定html2canvas useCORS 可汙染畫布 allowTaint: true 雖然可轉成畫布 但是 cavas通過Canvas2Image 或者 toDataURL 是無法無法轉化成base64 圖片的

解決方法通過

  • 服務端的代理轉發(forward)實現
  • nginx 反向代理

如果對跨域這個問題有深究的可以檢視

canvas drawImage()方法

或者 這篇文章

圖片載入完成後執行截圖

img 標籤 有 onload 屬性 把方法繫結在onload上即可（vue中 @load）

js生成二維碼圖片

(vue) 使用qrcodejs2

npm install qrcodejs2 --save
複製程式碼

頁面中引入

import QRCode from 'qrcodejs2'

components: {QRCode}
複製程式碼

頁面填充

<div id="qrcode" ref="qrcode"></div>
複製程式碼

頁面呼叫

qrcode () {
  let qrcode = new QRCode('qrcode', {  
      width: 232,  // 設定寬度 
      height: 232, // 設定高度
      text: 'https://baidu.com'
  })  
},
/*
    @  在需要呼叫的地方  這樣必須這樣呼叫  否則會出現  appendChild  null  就是id為qrcode的dom獲取不到 返回結果為null
*/
this.$nextTick (function () {
   this.qrcode();
})
複製程式碼

如果新增二維碼成功 長按無識別二維碼選項 請把二維碼設定的長寬放大

相關文章