canvas生成图片所遇到的坑

133 阅读 0 评论 88 点赞

我是靠谱客的博主爱撒娇曲奇，这篇文章主要介绍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);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
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);
}