微信网页内使用canvas生成个性化海报

前言

近期一直在做微信内H5页面，可能是由于自己的不熟悉，微信的jssdk文档一直在翻，几乎是变开发边学习微信的api，然后最近就被一个微信网页内生成一张个性化海报图片的效果给难住了，现虽然是解决了，但是这样的效果估计今后会用到很多，于是写篇博客记录一下。

需求

需求其实很简单，需要在网页内动态生成一张图片，图片内需包含用户头像，用户昵称，一些特定文字还有一张二维码。生成的这张图片使用来转发以及发送朋友圈的。并不是在页面上写一个dom结构就行，只有生成图片用户长按才能够保存或者转发。

解决方案

一开始看到这个需求我的想法是把那些海报上的元素全部画在canvas里面然后将canvas转成图片，实现过程中发现想法太简单了，原生canvas不支持画外链的图片，而用户的微信头像肯定是腾讯给的就必定是外链。然后经过探索就有了下面的方案

1、使用html2canvas插件

先上插件链接html2canvas
用来这个插件不得不叹服github的强大，原本使用原生的canvas画个稍微复杂一点的效果代码就很大一长串，各种函数相当麻烦，而html2canvas可以直接把一个dom结构转化成canvas，使用起来相当方便，只要事先把想要的海报效果用dom结构写出来然后使用html2canvas转一下就可以了，关键是html2canvas支持画外链的图片，但是需要配置一下参数。奉上html2canvas参数列表。其实设置支持外链图片就一个allowTaint参数，设置为true就行了，
看代码：

var convertCanvasToImage = function (canvas) {//将canvas转换成图片
        var src = canvas.toDataURL("image/png");
        return src;
    }
html2canvas(document.querySelector("#poster-canvas"), {
            allowTaint: true,//设置支持外链
            scale: 3
        }).then(canvas => {
            $(".poster-box").append(
                '+ convertCanvasToImage(canvas) + '" alt=""  crossorigin="anonymous">'
            );
        });

但是这仅仅解决了将外链图片画成canvas的问题，我在用这个插件的时候发现，外链的图片确实被画进了canvas，但是在将canvas转成图片的时候出现了问题，canvas.toDataURL这个将canvas转换成图片的接口似乎不允许canvas里面的元素带有外链的图片，好吧，又经了一番周折有了下面的第二步。

2、将微信头像转成base64再插进即将画成canvas的dom结构里面

首先声明，这个方法或许不是最好的方法，但目前我确实用这个方法解决问题了。微信头像的体积并不算大转成base64对网页运行的速度影响不大，将一张图片转成base64的方法大致有两种，一种是先转canvas再转base64，这种显然不适合现在这个场景，而另一种则是使用一个XMLHttpRequest请求来实现转化base64，直接上代码

function getBase64(imgUrl) {//转base64插入用户头像，imgUrl为图片链接
        window.URL = window.URL || window.webkitURL;
        var xhr = new XMLHttpRequest();
        xhr.open("get", imgUrl, true);
        xhr.responseType = "blob";
        xhr.onload = function () {
            if (this.status == 200) {
                var blob = this.response;
                let oFileReader = new FileReader();
                oFileReader.onloadend = function (e) {
                	console.log(e.target.result)//输出转化结果
                };
                oFileReader.readAsDataURL(blob);
            }
        }
        xhr.send();
    }

来到这一步基本上接解决基本问题了，最后还有一个问题，就是上面的那个imgUrl，腾讯拌了我一下，腾讯给的那个头像链接是不带文件后缀的，虽然也能够正常地浏览以及使用，但是在这里需要我们在那个url后面给他加一个图片后缀才能生效。这个真的是血的教训，因为在微信调试工具里面是能够正常看到效果的，但是真机测试上死活出不来，这个小细节还是我项目的后端发现的