div顯示圖檔_vue2實作動态生成二維碼和将網頁合成圖檔并在微信内置浏覽器長按儲存

一. url轉為二維碼

1. 需要的庫

qrcodejs2

2. 安裝

npm install qrcodejs2 --save
           

3. 引入

import QRCode from "qrcodejs2"
           

4. 實作

<template>
    <div>
    <div id="qrcode"></div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";

export default {
  methods: {
    GenerateQRcode() {
      new QRCode("qrcode", { // 此處的qrcode為上面div的id
        text: 目标url,
        width: 200,
        height: 200,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
    }
  },
  mounted() {
    this.GenerateQRcode();
  }
}
</script>
           

二. 網頁儲存為網頁

1. 需要的庫

html2canvas

2. 安裝

npm install html2canvas --save
           

3. 引入

import html2canvas from "html2canvas"
           

4. 實作

<template>
    <div>
    <div id="container"></div>
    </div>
</template>

<script>
import html2canvas from "html2canvas";
import QRCode from "qrcodejs2";

export default {
  methods: {
    outputImg() {
        const targetDom = document.getElementById("container");
        html2canvas(targetDom).then(canvas => {
        console.log(canvas);
        console.log(canvas.toDataURL());
        });
    }
  },
  mounted() {
    this.outputImg();
  }
}
</script>
           

三. 整合

關于小程式内置浏覽器的圖檔下載下傳，需要一個用來生成圖檔的塊，還需要一個

img

，先将其隐藏。實作步驟就是首先生成二維碼，然後再将html生成圖檔，最後在html2canvas回調中替換

img

的

src

，并将生成圖檔的塊隐藏，将

img

顯示。

當然關于這個實作方式，我看到的技術分享文章中，還有兩種不同的解決方式：

• 不需要html來寫生成圖檔的塊，而是使用js直接建立；
• 不需要替換隐藏，将生成的圖檔覆寫到html生成圖檔的塊之前；

這裡我隻記錄一下我使用的，後期會再去研究這兩種實作方式。

<template>
    <div>
    <!--合成的圖檔，預設隐藏，合成之後顯示-->
    <div v-show="imgUrl.length">
      <img :src="imgUrl" alt="生成的圖檔" class="image" />
    </div>
    <!--合成圖檔需要的html塊，預設顯示，合成之後隐藏-->
    <div id="container" v-show="!imgUrl.length">
        <div id="qrcode"></div>
      <p>長按識别二維碼</p>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";

export default {
  data() {
    return {
      imgUrl: ""
    }
  },
  methods: {
    outputImg() {
        const targetDom = document.getElementById("container");
        html2canvas(targetDom).then(canvas => {
        // 将圖檔src替換為canvas生成之後轉換的url
        this.imgUrl = canvas.toDataURL();
        });
    },
    GenerateQRcode() {
      new QRCode("qrcode", {
        text: 目标url,
        width: 200,
        height: 200,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
    }
  },
  mounted() {
    new Promise(resolve => {
      // 先生成二維碼
      this.GenerateQRcode();
      resove();
    })
    .then(() => {
      // 再合成圖檔
      this.outputImg();
    })
  }
}
</script>

<style scoped>
  // 生成之後的圖檔有點放肆，可以設定寬度來适應手機螢幕
 .image {
    width: 100%;
 }
</style>
           

由此即可實作需要的功能了。

關于後續的優化，需要解決的圖檔清晰度問題、跨域圖檔問題等，可以參考這篇文章，這位大佬寫得很詳細。