Vue.js结合Canvas制作二维码和图片的合成（qrcanvas + html2canvas）

木子Leo

于 2018-11-09 10:38:57 发布

阅读量1.7w

点赞数 6

分类专栏： vue 文章标签： qrcanvas html2canvas canvas合成图片 html页面生成图片

本文链接：https://blog.youkuaiyun.com/zuorishu/article/details/83866234

版权

这篇博客介绍如何在Vue.js项目中结合qrcanvas和html2canvas库，生成包含二维码的合成图片。首先，根据分享链接创建二维码，然后将其与固定图片合并。使用npm安装相关库，通过div和js生成二维码，最后使用html2canvas将DOM转换为canvas并合成图片。由于微信内不支持base64长按操作，解决方案是将base64转为服务器链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(这个有问题，最近会把整理后的更新上去！！！！！！)

需求背景：

分享图片，图片中含有自己分享链接生成的二维码！！

大体思路：

第一步、根据自己的分享链接生成一张二维码；
第二步、结合一张图片合成带分享二维码的大图；

开干：

首先来生成二维码，之前都是使用jQuery.qrcode这个插件进行二维码生成，使用vuejs后不想依赖jQuery，就重新找了一个

qrcanvas，使用方法上篇博客有提到，这里结合图片再来引用一下。

1.npm安装：npm install qrcanvas

2.页面引入：import { qrcanvas } from 'qrcanvas';

3.html：写一个带id(id自定义)的div

<template>
    <div class="container">
        <div class="box" ref="box">
            <div id="qrcode"></div>
        </div>
    </div>
</template>

4.js很简单

    created() {
        let that = this;
        that.$nextTick(function () {
           var canvas1 = qrcanva

最低0.47元/天解锁文章