最近公司需求提出仿淘宝分享生成一张含有图片/二维码/文字的图片
实现方法:
- 采用的canvas 插入图片和生成图片的功能
- 生成二维码采用的是QRCode 插件
实现效果:
实现步骤:
我是在vue环境中实现的
1.引入qrcode
1安装插件 npm install qrcode
2、在main.js中引入
import QRCode from 'qrcode' //定义生成二维码组件
2.dom元素构建
<div id="app">
<button class="btn" @click="drawChart">绘图</button> //点击按钮生成图片
<div class="wrap" v-show="show">
<canvas width="300" height="500" id="container"></canvas>
</div>
</div>
3.js绘制
drawChart() {
this.canvas = document.querySelector('#container')
let ctx = this.canvas.getContext('2d');
ctx.fillStyle = '#fff'
ctx.fillRect(0, 0, 300, 500)
//标题
let title = '这个不错#聚划算团购#宝贝不错:pawinpawing',
price = '¥599'
this.drawText(ctx,title, 10, 390, 170) // 文字我默认显示两行
ctx.fillStyle = '#f34234'
ctx.font = "bold 30px 宋体";
ctx.fillText(price, 10, 480)
//生成的二维码内容,可以添加变量
let QueryDetail = `https://detail.tmall.hk/hk/item.htm?spm=a1z10.1-b-s.w5003-18691032235.7.321f11cbnb03Tv&id=541928730880&rn=f938c20c3d2ec15358e831071db22d38&abbucket=8&scene=taobao_shop`;
let canvsCode = document.createElement('canvas')
canvsCode.width = 100
canvsCode.height = 100
QRCode.toCanvas(canvsCode, QueryDetail, function (error) { })
var image = new Image();
image.src = canvsCode.toDataURL("image/png"); // 将链接转化为图片之后,再绘制到canvas中去
image.onload = () => {
ctx.drawImage(image, 190, 400, 100, 100)
}
// 大图
let imgBig = new Image()
imgBig.setAttribute('crossOrigin', 'anonymous')
imgBig.src = 'https://img.alicdn.com/imgextra/i2/54199406/O1CN012JLzreAxzn1xhNP_!!54199406.jpg'
imgBig.onload = () => {
ctx.drawImage(imgBig, 10, 10, 280, 380)
let img = this.canvas.toDataURL('image/png')
console.log(img) // 最终生成的base64图片
}
},
文字显示两行的方法
drawText (ctx, tit, x, y, width) {
var titArr = tit.split("");
var temp = "";
var row = [];
ctx.font = "20px Arial";
ctx.fillStyle = "black";
ctx.textBaseline = "middle";
for (let i = 0; i < titArr .length; i++) {
if (ctx.measureText(temp).width < w && ctx.measureText(temp + (titArr [i])).width <=width) {
temp += titArr [i];
} //ctx.measureText(text).width 测量文本text的宽度
else {
row.push(temp);
temp = titArr [i];
}
}
row.push(temp);
// 只显示2行,多余的省略 加...
for (let j = 0; j < 2; j++) {
var str = row[j];
if (j == 1) {
str = str.substring(0, str.length - 1) + '...';
}
ctx.fillText(str, x, y + (j + 1) * 24);
}
}