vue实现图片和生成二维码的合成-创新互联

本文主要讲述生成二维码并合并二维码与图片的功能。

东兴网站建设公司成都创新互联,东兴网站设计制作，有大型网站制作公司丰富经验。已为东兴近1000家提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱，请找那个售后服务好的东兴做网站的公司定做！

第一步：生成二维码图片
安装：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) {
                //错误写法，此处会触发坑二
                //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  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;
        });
});

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章名称：vue实现图片和生成二维码的合成-创新互联
分享路径：https://www.cdcxhl.com/article46/dssdeg.html

成都网站建设公司_创新互联，为您提供ChatGPT、网页设计公司、域名注册、响应式网站、建站公司、微信小程序

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联