vue實現(xiàn)圖片和生成二維碼的合成-創(chuàng)新互聯(lián)

本文主要講述生成二維碼并合并二維碼與圖片的功能。

東興網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),東興網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為東興近1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的東興做網(wǎng)站的公司定做！

第一步：生成二維碼圖片
安裝：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>

script中代碼：

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);
});

第二步：合成二維碼和圖片
安裝：yarn add html2canvas --save
組件中引入：import html2canvas from 'html2canvas';
組件使用：

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

script中代碼：

let that = this;
that.appSrc = "www.baidu.com";
that.$nextTick(function () {
        //合成分享圖
        html2canvas(that.$refs.box).then(function(canvas) {
                //錯誤寫法，此處會觸發(fā)坑二
                //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生成二維碼以便之后實現(xiàn)合成
坑二：生成的圖片需要轉(zhuǎn)化為base64格式才能保存

完整代碼呈現(xiàn)：

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

script中代碼：

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;
        });
});

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章名稱：vue實現(xiàn)圖片和生成二維碼的合成-創(chuàng)新互聯(lián)
分享路徑：http://www.muchs.cn/article46/dssdeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)頁設(shè)計公司、域名注冊、響應(yīng)式網(wǎng)站、建站公司、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作