VUE画像を実現し、2次元コードの合成を生成します

この論文は、二次元コードや二次元コードの生成について説明し、画像をマージ。

ステップ1：2次元コード画像を生成し
、インストール：yarn add qrcanvas --save
コンポーネントの導入：import { qrcanvas } from 'qrcanvas';
コンポーネントが使用しています。

<template>
    <div>
        <div v-else>
            <img src="./poster.png">
            <div id="qrcode" class="vue_img" ref="box"></div>
        </div>
    </div>
</template>

スクリプトコード：

let that = this;
that.appSrc = "www.baidu.com";
that.$nextTick(function () {
        //生成二维码
        var canvas1 = qrcanvas({
                data: decodeURIComponent(that.appSrc),
                size:80
        });
        document.getElementById("qrcode").innerHTML = '';
        document.getElementById('qrcode').appendChild(canvas1);
});

ステップ2：二次元コード画像との合成
インストール：yarn add html2canvas --save
導入コンポーネント：import html2canvas from 'html2canvas';
コンポーネントを使用します：

<template>
    <div>
        <img v-if="imgUrl" :src="imgUrl" alt="分享图片">
    </div>
</template>

スクリプトコード：

let that = this;
that.appSrc = "www.baidu.com";
that.$nextTick(function () {
        //合成分享图
        html2canvas(that.$refs.box).then(function(canvas) {
                //错误写法，此处会触发坑二
                //that.imgUrl =  URL.createObjectURL(that.base64ToBlob(canvas.toDataURL())) 
                //正确写法
                let dataURL = canvas.toDataURL("image/png");
                that.imgUrl = dataURL;
        });
});

メソッドbase64ToBlob：

base64ToBlob(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;

        let uInt8Array = new Uint8Array(rawLength);

        for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {type: contentType});
}

坑一：使用canvas生成二维码以便之后实现合成
坑二：生成的图片需要转化为base64格式才能保存

完全なコードをプレゼンツ：

<template>
    <div class="productShare">
        <img v-if="imgUrl" :src="imgUrl" alt="分享图片">
        <div v-else style="position: relative" ref="box">
            <img :src=""./poster.png"">
            <div id="qrcode"></div>
        </div>
    </div>
</template>

スクリプトコード：

let that = this;   
that.appSrc = "www.baicu.com";
that.$nextTick(function () {
        //生成二维码
        var canvas1 = qrcanvas({
                data: decodeURIComponent(that.appSrc),
                size:80
        });
        document.getElementById("qrcode").innerHTML = '';
        document.getElementById('qrcode').appendChild(canvas1);

        //合成分享图
        html2canvas(that.$refs.box).then(function(canvas) {
                let dataURL = canvas.toDataURL("image/png");
                that.imgUrl = dataURL;
        });
});