最近的项目开发中有这样一个需求：

需求比较明确，这篇文章就来说下需求里面的第二步是如何实现的以及实现过程中需要注意的一些问题。

如今的社会中，二维码随处可见，其实二维码就是将一段文字信息用特定的算法规则计算之后以图片的形式展示出来。基于相同的规则，就可以制作和解析二维码，而不用局限于单纯的文字表现形式。

现在前端环境下，要生成二维码，可用的工具库有很多，我这里用的是 qrcode，首先安装

安装完之后 import 导入就能使用了

使用的话有二种方法可以达到生成二维码的效果

二维码生成好后，有需要的话可以调整下 canvas 的大小等属性，因为 qrcode 生成的二维码会带有一些默认样式，需要调整下。

上面两种方式都可以生成二维码并显示在界面上，区别在于第一种是以 canvas 标签显示，在微信中长按是无法识别的。第二种是以 img 标签显示，在微信中长按会自动识别并可以直接以图片形式分享出去。

做到这一步，需求已经完成了一半，下一步就是按设计图要求把二维码定位到海报背景上，将二维码和海报合成为一张图片。之所以要合成为一张图片还是为了让用户在微信中操作方便。合成为一张图片后，用户在微信中直接长按合成后的海报就可以分享或者识别二维码。

合成海报时需要用到另一个工具库 html2canvas ，基本使用方法也很简单，先获取要合成图片的 dom 对象，然后调用 html2canvas ，它会返回一个 promise，里面的 canvas 就是合成后的图片信息，同样的，这里的 canvas 可以直接显示出来，也可以转成 base64 之后放到 img 标签里显示，但是为了分享或者下载方便，基本都是转成了 base64

到这里，基本需求就完成了。然而世界上的事情往往都不会是一帆风顺的，在测试的时候发现出了问题。

我前面二维码是用上面说的第二种方法显示的，将二维码的 canvas 转成了 base64 显示在 img 标签上，再将这个二维码 img 和海报背景 img 合成。这样的实现方式在 iOS 和浏览器中都没有问题，然而在安卓版微信里面却是只有海报背景而没有二维码。

在查了N多资料和尝试了好多遍之后终于发现，是因为我的二维码是 base64 的，如果二维码是以 canvas 形式显示，再去合成海报，将合成后的海报转为 base64 就没有问题了。 所以我在前面写生成二维码的时候写了二种方法。至此，整个需求也就真正的完成了。

下面是完整代码

这次做这个需求的过程中，查到了一些 html2canvas 的资料，有很多文章都提到 html2canvas 有一些坑，我是没碰到，现在将这些文章列出来，给需要的人。 html2canvas 用法详解 Html2canvas - 项目中遇到的那些坑点汇总(更新中…) 一次 H5 「保存页面为图片」 的踩坑之旅 微信H5实现网页长按保存图片及识别二维码 基于html2canvas实现网页保存为图片及图片清晰度优化 Vue.js结合Canvas制作二维码和图片的合成（qrcanvas + html2canvas）

然后就是 canvas 转 base64 的 .toDataURL()] 这个方法，这个方法里面其实是可以配置参数的，有需要的可以去看下这个文档 HTMLCanvasElement.toDataURL()