canvas生成图片所遇到的坑

相信很多童鞋都在运用canvas 生成图片过程中遇到了很多问题。因此分享个人在生成过程中遇到的问题。

1.首先：上一张最终生成的效果图

2.分析下该页面的元素

1）用户头像

2）姓名

3）logo语（图片）

4）二维码

5）logo语（图片）

6）用户提示语

3. 具体的生成方法描述

运用canvas的相应api 分别绘制 圆形图片 矩形圆角画布 文字等等

通过canvas.toDataURL 的这个方法会将生成的画布转化成base64的数据流 根据数据流生成img

可能会有两个问题：

1.发现只有文字没有图片

     解决方法运动递归函数执行

2.最终会生成该图片，但是发现无法保存图片，那么问题出在哪里呢？

     解决方法：过程总是痛苦的，经过了6个小时的方法尝试，最终定位了问题的原因，生成的图片上有4张图片，其中头像是由微信的域名（http://wx.qlogo.cn/）返回的，这里会有冲突，会导致无法将生成的图片保存。

4.上代码

drawing(param) {
    var _that = this;
    var nWidth = _that.state._width,
        nHeight = _that.state._height,
        nickname = _that.state.nickname,
        headimgurl=_that.state.headimgurl;
    var _canvas = document.getElementById("mycode_box"),
        _context = _canvas.getContext('2d'),
        _image = new Image(),//二维码
        _image2 = new Image(),//头像
        _imagetext = new Image(),//代言文字
        _imagetext2 = new Image();//文字
        //背景
        _context.fillStyle="#f3af4c";
        _context.fillRect(0,0,nWidth*2,nHeight*2);
        //白色矩形部分