微信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();
})
複製代碼

若是添加二維碼成功 長按無識別二維碼選項 請把二維碼設置的長寬放大