圆形头像
HTML：
<canvas id="myCanvas" width="640" height="1008" style="display:none">
<!-- 圆形头像嵌套canvas -->
<canvas id="cCanvas" style="display:none"></canvas>
// canvas画海报
var loading;
function imageToCanvas() {
if(activity_exist()) {
turnguanzhu();
return;
}
// if($("#c_class").val()==0){
// layer.open({
// content: "请选择生成证书的课程",
// btn: '确定'
// });
// $('#popup_reg').popup();
// return;
// }
loading = layer.open({
shadeClose:false,
type:2,
content:'正在生成海报'
});
var canvas =document.getElementById("myCanvas");
var element =poster_item[poster_id]['c_data'];
var ctx = canvas.getContext("2d");
var image_arr = {};
var text_arr = {};
for(var iin element) {
if(['bg','roundhead','qr'].indexOf(i) > -1) {
image_arr[i]=element[i];
if(i=='roundhead'){
element[i]['src'] =$('.make-poster .wx_photo').attr('src');
}
}else if(['c_class','realname','mobile','c_date'].indexOf(i) > -1) {
text_arr[i]=element[i];
if(i=='c_class' || i=='c_date'){
element[i]['value'] =$('.make-poster .'+i).html();
}else{
element[i]['value'] =$('.make-poster .wx_'+i).html();
}
}
}
drawImage(ctx,image_arr,text_arr);
}
function drawImage(ctx,image_arr,text_arr) {
var rank = ['bg','roundhead','qr'];
draw(0,image_arr[rank[0]]);
function draw(i,item) {
if(i <= rank.length) {
i++;
if(item&&item.src) {
var image =new Image();
image.setAttribute('crossOrigin','anonymous');
image.src = item.src;
image.onload =function() {
if(rank[i-1]=='roundhead'){
var canvasTemp =document.getElementById("cCanvas");
canvasTemp.width =640;
canvasTemp.height =1008;
var contextTemp = canvasTemp.getContext('2d');
contextTemp.drawImage(image,item.left,item.top,item.width,item.height);
var ptn = ctx.createPattern(canvasTemp,'no-repeat');
let min =Math.min(item.width/2, item.height/2);
let r = min;
ctx.fillStyle = ptn;
ctx.arc(item.left+r, item.top+r, r, 0, Math.PI *2);
ctx.fill();
}else{
ctx.drawImage(image,item.left,item.top,item.width,item.height);
}
draw(i,image_arr[rank[i]]);
}
}else {
draw(i,image_arr[rank[i]]);
}
}else {
drawText(ctx,text_arr);
}
}
}
function drawText(ctx,text_arr) {
console.log(text_arr);
for(var iin text_arr) {
var item = text_arr[i];
if(item.value) {
ctx.textBaseline ='top';
ctx.textAlign = item.align;
ctx.font = item.size+"px Arial";
ctx.fillStyle = item.color;
if(item.align=='right'){
item.left = item.left+item.width;
}else if(item.align=="center"){
item.left =320;
}
ctx.fillText(item.value,item.left,item.top+item.size*0.5);
}
}
convertCanvasToImage()
}
// 转成图片
function convertCanvasToImage() {
var base64ImgSrc =document.getElementById("myCanvas").toDataURL("image/png");
submitForm(base64ImgSrc);
}
