朝圣言
扫描关注朝圣言

手机扫描二维码

html2canvas与vue-qr的爱与恨

朝圣言2019-09-14前端仕锦 869 0A+A-

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

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

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

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

html2canvas与vue-qr的爱与恨  前端 web vue 第1张

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

html2canvas与vue-qr的爱与恨  前端 web vue 第2张


html2canvas与vue-qr的爱与恨  前端 web vue 第3张

一开始我并没有意识到问题的所在,以为单纯是因为这个插件不能使用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"));
        });
    });
}


文章关键词
前端
web
vue
发表评论