canvas生成图片所遇到的坑

93 阅读 0 评论 62 点赞

我是靠谱客的博主爱撒娇曲奇，最近开发中收集的这篇文章主要介绍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);
//白色矩形部分
_context.moveTo(40,203/603*nHeight);
_context.strokeStyle = 'rgba(255,255,255,1)';
_context.fillStyle = 'rgba(255,255,255,1)';
this.roundedRect(_context,(40/375*nWidth),(70.28/603*nHeight)*2,(335/375*nWidth)*2,489/603*nHeight*2,10*2);
_context.fill();
_context.closePath();
function draw(n){
console.log(n)
if(n==4){//头像
_image2.src=headimgurl;
var _image2 =new Image();
//img.crossOrigin = 'Anonymous'; //解决跨域
_image2.onload =function(e){
_context.save(); // 保存当前_context的状态
_context.beginPath();
_context.moveTo(((nWidth)/2+40/375*nWidth)*2,70.28/603*nHeight*2);
_context.lineWidth="20";
_context.arc(nWidth,70.28/603*nHeight*2,40/375*nWidth*2,0,2*Math.PI,true); //画出圆
_context.lineWidth=20;
_context.strokeStyle = 'rgba(255,197,108,14)';
_context.fill();
_context.stroke();
_context.clip(); //裁剪上面的圆形
_context.drawImage(_image2, (nWidth/2-40/375*nWidth)*2, 30/375*nWidth*2, 80/375*nWidth*2, 80/375*nWidth*2); // 在刚刚裁剪的园上画图
_context.strokeStyle = 'rgba(247,201,115,13)';
_context.closePath();
_context.restore();
_context.fill();
_context.stroke();
draw(n+1);
}
}else if(n==1){
var _imagetext = new Image();
_that.roundedRect(_context,(nWidth-100/375*nWidth*2),160/603*nHeight*2,200/375*nWidth*2,25*2,10*2);
_imagetext.src =require('../../../images/loadpic.png');
_imagetext.onload =function(){
_context.save(); // 保存当前_context的状态
_context.drawImage(_imagetext, (nWidth-200/375*nWidth)/2*2, 160/603*nHeight*2,200/375*nWidth*2,25*2); // 在刚刚裁剪的园上画图
_context.strokeStyle = 'rgba(2,100,30,0)';
_context.stroke();//
_context.closePath();
draw(n+1);
};
}else if(n==2){
var _imagetext2 = new Image();
_that.roundedRect(_context,(nWidth-121/375*nWidth)/2*2,450/603*nHeight*2,121/375*nWidth*2,38/603*nHeight*2,0);
_imagetext2.src = require('../../../images/loadpic.png');
_imagetext2.onload =function(){
_context.save(); // 保存当前_context的状态
_context.drawImage(_imagetext2,(nWidth-193/375*nWidth)/2*2, 205/603*nHeight*2, 193/375*nWidth*2,193/375*nWidth*2); // 在刚刚裁剪的园上画图
_context.strokeStyle = 'rgba(2,100,30,0)';
_context.stroke();//
_context.closePath();
draw(n+1);
}
}else if(n==3){
//二维码图片
var _image = new Image();
_that.roundedRect(_context,(nWidth-193/375*nWidth)/2*2,205/603*nHeight*2,193/375*nWidth*2,193/375*nWidth*2,0);
_image.src =param.qrUrl;
_image.onload =function(){
_context.save(); // 保存当前_context的状态
_context.drawImage(_image, (nWidth-193/375*nWidth)/2*2, 205/603*nHeight*2, 193/375*nWidth*2,193/375*nWidth*2); // 在刚刚裁剪的园上画图
_context.strokeStyle = 'rgba(2,100,30,0)';
_context.stroke();//
_context.closePath();
draw(n+1);
};
}else if(n==5){
//二维码有效期文字
_context.beginPath();
_context.textAlign = "center";
_context.font = '24px Arial'; //设置字体
_context.lineWidth = 1.0;
_context.fillStyle = 'rgb(161,161,161)';
_context.fillText("二维码有效期至", nWidth/2*2, 425/603*nHeight*2);
// 扫描二维码加入文字
_context.beginPath();
_context.textAlign = "center";
_context.font = '26px Arial'; //设置字体
_context.lineWidth = 1.0;
_context.fillStyle = 'rgb(73,73,73)';
_context.fillText("扫描二维码加入", nWidth/2*2, 523/603*nHeight*2);
//保存图片文字
_context.beginPath();
_context.textAlign = "center";
_context.font = '24px Arial'; //设置字体
_context.lineWidth = 1.0;
_context.fillStyle = 'rgb(255,255,255)';
_context.fillText("长按保存图片，发送给好友", nWidth/2*2, (nHeight-18/603*nHeight)*2);
draw(n+1);
}else{
_that.convertCanvasToImage(_canvas,_context);
}
}
draw(1);
}
roundedRect(ctx,x,y,width,height,radius){
ctx.beginPath();
ctx.moveTo(x,y+radius);
ctx.lineTo(x,y+height-radius);
ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
ctx.lineTo(x+width-radius,y+height);
ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
ctx.lineTo(x+width,y+radius);
ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
ctx.lineTo(x+radius,y);
ctx.quadraticCurveTo(x,y,x,y+radius);
ctx.stroke();
};
convertCanvasToImage(canvas,_context) {
var _that =this;
var _imgSrc = canvas.toDataURL("image/png",1);
var myCodeContainer = document.getElementById('myCodeContainer');
var _img = new Image();
_img.src=_imgSrc;
_img.width=_that.state._width;
_img.height=_that.state._height;
myCodeContainer.removeChild(myCodeContainer.childNodes[0]);
myCodeContainer.appendChild(_img);
}

这就是生成该图片的主要代码块，希望能够帮助大家～