莉丝前端

手上有个重构项目，原来的邀请二维码页面做的比较赶，现在重构以后，需要美化一下二维码的页面。当然除了美化二维码以外，还需要用户可以保存，所以这就不仅仅是生成二维码，而是整个二维码卡片。

本来这部分是可以交给后端生存的，但是考虑到后端进行的美化未必方便，本质上写法与canvas一样，所以并没有交由后端处理。

在思考了一个白天后，我觉得用常规的网页写法写出卡片样式，使用html2canvas转化为base64。

因为样式的写法对我来说并不困难。所以很快就完成了如下的成品。当然这里用的二维码生成是用了vue-qr。主要是他支持很多自定义内容。

引入依赖，得赖于vue-qr的生成回调功能，我可以在二维码生成以后去调用html2canvas，问题来了载入图片错误。

一开始我并没有意识到问题的所在，以为单纯是因为这个插件不能使用base64，虽然持有怀疑的态度，但是依旧使用跨域等思路去解决这个问题。当然如果解决了我也不会写这篇了。

直到第二天早上，一个很神奇的想法出现了，如果，如果我给他做一个延迟，那么会出现什么情况。

所以，二维码真的出现了。

事后诸葛了一下，其实原理很简单。vue-qr的回调仅仅是计算出二维码的base64后回调的方法，这时候未必会赋予img的src属性，所以会显示载入图片错误。正常我们仅仅需要在用户点击的时候去生存base64即可，所以大多数依旧可以避免这样问题出现。

修改后代码如下。

private qrSuccess(url: string) {
    this.$nextTick(() => {
        const html2canvas = require("html2canvas");
        html2canvas(this.$refs.shareCard, {allowTaint: true, useCORS: true}).then(function(canvas: any) {
            console.log(canvas.toDataURL("image/png"));
        });
    });
}