canvas 实现绘制名片并上传至服务器
# install dependencies
npm install
# serve with hot reload at localhost:8346
npm start
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report- 填充背景
ctx.fillStyle = "#fff";
- 创建文字
//text x y maxwidth
ctx.textAlign = 'top|bottom|left|right';
ctx.fillText(this.card.Name, 30, 20, 290);
- 创建图片
let img = new Image();
img.onload = function (e) {
//img x y w h
ctx.drawImage(img, 30, 120, 18,18);
}
img.src = "./static/images/xxx.jpg";
- 渐变
createLinearGradient(x0,y0,x1,y1);
createRadiaGradient(x0,y0,r0,x1,y1,r1);
- base64
canvas.toDataURL("image/png");
- 保存名片
- 查看服务器上已经存在的名片
来源：ImageServer
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent