canvas微信图片生成海报

前言

之前在做项目的时候需要做一个生成海报的功能，最初使用的html2canvas这个工具，在使用过程中发现安卓上的海报是正常的，而苹果上样式有问题，例如错、空白，最终选择直接用canvas自己画。

难点

海报中重要的二维码是一个线上地址，存在于微信服务器上，受同源策略的影响，在调用canvas.toDataURL 是报错，不允许域外资源，防止画布被污染。

解决

因为当前项目使用了Koa，就想到把图片下载到本地。
流程如下图：

*注：koa发送到Java后端这部分属于服务器对服务器发送请求不存在跨域，跨域是针对浏览器来说的。

前端代码

   loadImage(src){
        return new Promise((resolve, reject) => {
            let xhr = null;
            if (window.XMLHttpRequest)
                xhr = new XMLHttpRequest();
            else if (window.ActiveXObject)
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            xhr.onload = () => {
                if (xhr.status === 200) {
                    const reader = new FileReader();
                    reader.addEventListener('load', () => resolve(reader.result), false);
                    reader.addEventListener('error', e => reject(e), false);
                    reader.readAsDataURL(xhr.response);
                    
                } else {
                    reject(`Failed to proxy resource ${src} with status code ${xhr.status}`);
                }
            };
            xhr.onerror = reject;
            xhr.open('GET', src,true);
            // 设置请求头部
            //xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');

            xhr.responseType = 'blob';
            xhr.send();
        });
    }


		//  在react 中使用
        this.loadImage('/httpImg?url='+url).then(res=>{
        	// res 就是 base64
            this.setState({ imgBase64:res });
        }).catch(err=>{
            cb.utils.alert('获取微信二维码失败:'+err,'error');
        })

koa转发请求

    router.get('/httpImg', async function (ctx) {
        ctx.set('Access-Control-Allow-Origin', '*');
        ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
        ctx.set('Access-Control-Allow-Methods', 'GET, OPTIONS');
        try {
            const url = decodeURI(ctx.request.query.url);
            const result = request.get(url);
            ctx.body = result;
        } catch (e) {
            ctx.body = {
                code: 500,
                message: e.message
            }
        }
    })