vue中使用canvas画海报
使用ES6新增语法中的canvas画图，在HTML部分插入标签
![]()
然后在methods中写入canvas方法，如果连接后台返回数据的话可以在data中声明后放入方法内
data() {
return {
image: "",
canvas_touxiang: "",
nane: "",
fuwushang: "",
zhiwu: "",
zhengzaizhaoping: "",
canvas_serviceType: "",
convas_salary: "",
canvas_workExperience: "",
canvas_xueli: "",
canvas_sex: "",
canvas_fuwushang: "",
canvas_erweima: "",
canvas_time: "",
}
}
因为我的代码比较多，所以data中不一定是全部的，还是根据需求更改吧
drawPhoto() {
this.canvas_sex = this.sexData[this.tuijian_sex].label;
this.canvas_xueli = this.educationData[this.tuijian_education].label;
this.getImage(this.canvas_touxiang, 200, 200).then((imgUrl) => {
let canvas = document.getElementById("mycanvas"); //创建canvas
let context = canvas.getContext("2d"); //创建画布
let img1 = new Image(); //因为拿不到图片静态资源，所以创建图片标签
let img2 = new Image();
let img3 = new Image();
let img4 = new Image();
img2.setAttribute("crossOrigin", "anonymous"); //解决图片跨域问题,也要放到赋值前，否ze大部分浏览器会报错
img3.setAttribute("crossOrigin", "anonymous"); //解决图片跨域问题,也要放到赋值前，否ze大部分浏览器会报错
img1.src = require("../../../../assets/returnVisit/haibao.png");
img2.src = imgUrl;
img3.src = require("../../../../assets/returnVisit/yinhao.png");
img4.src = "data:image/jpeg;base64," + this.canvas_erweima;
//加载图片
img1.onload = () => {
canvas.setAttribute("width", img1.width);
canvas.setAttribute("height", img1.height);
//绘制图片
context.drawImage(img1, 0, 0, img1.width, img1.height);
context.drawImage(img2, 110, 200, 200, 200);
context.drawImage(img3, 130, 1200, 108, 94);
context.drawImage(img4, 550, 2100, 400, 400);
// context.arc();
// context.drawImage(this.canvas_touxiang, 1, 1);
//字体大小
//字体文字，显示位置 图片上需要n个文字就写n个context.fillText(文字,上下,左右);
context.font = "64px Arial";
context.fillStyle = "white";
context.fillText(this.nane, 354, 260);
context.font = "56px Arial";
context.fillStyle = "white";
context.fillText(this.fuwushang + "服务商 · " + this.zhiwu, 354, 350);
context.font = "56px Arial";
context.fillStyle = "white";
context.fillText(this.zhengzaizhaoping, 130, 550);
context.font = "120px Arial";
context.fillStyle = "white";
context.fillText(
this.serviceTypeData[this.tuijian_valueType].label,
130,
700
);
context.font = "160px Arial";
context.fillStyle = "white";
context.fillText(this.convas_salary, 130, 880);
context.font = "64px Arial";
context.fillStyle = "white";
context.fillText(
this.tuijian_city +
" · " +
this.tuijian_area +
" | " +
this.canvas_workExperience +
" | " +
this.canvas_xueli +
" | " +
this.canvas_sex,
130,
1000
);
context.fillText("—", 130, 1400);
context.font = "56px Arial";
context.fillStyle = "white";
context.fillText(this.canvas_fuwushang, 130, 1500);
context.font = "52px Arial";
context.fillStyle = "white";
context.fillText(this.canvas_time, 130, 1600);
context.font = "48px Arial";
context.fillStyle = "#FF8E5F";
context.fillText("长按识别二维码", 580, 2550);
//合成图片
this.image = canvas.toDataURL("image/jpg", 1.0);
};
});
},需求中需要的海报内容多，有一个头像需要做成圆形的，所以分出一个方法单独画出圆形头像
// 生成图片getImage和drawPhoto
getImage(url, width, height) {
return new Promise((r1, r2) => {
//画布
let canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
// 画笔
let ctx = canvas.getContext("2d");
let img = new Image();
img.src = url;
img.setAttribute("crossOrigin", "anonymous"); //解决图片跨域问题,也要放到赋值前，否ze大部分浏览器会报错
img.onload = function () {
ctx.beginPath();
ctx.arc(100, 100, 100, 0, Math.PI * 2);
ctx.fill();
ctx.clip();
ctx.drawImage(this, 0, 0, width, height);
r1((this.image = canvas.toDataURL("image/jpg", 1.0)));
};
});
},