首先须要在template中写入这两个元素
canvas(id="canvas")
div(id='qrcode')
引入上传阿里云用的js、fabric.js、qrcodejs2
import { upload } from '~/static/js/upload.js';
import { fabric } from 'fabric';
import QRCode from 'qrcodejs2';
const QRCode = require('qrcodejs2');
//这两种形式都能够引入 qrcodejs2在nuxt中间接引入会报错。须要判断为浏览器环境之后用require引入
而后就是合成图片
async groupImg() {
return new Promise((resolve, reject) => {
try {
// 创建对象
var img = new Image();
// 扭转图片的src(这个图片地址是底图)
img.src = '图片地址';
//加载实现执行
img.onload = () => {
// 打印
console.log('-----开始合成图片');
const imgW = img.width;
const imgH = img.height;
const canvas = new fabric.Canvas('canvas');
canvas.setWidth(imgW);
canvas.setHeight(imgH); //设置canvas宽高为底图宽高,保障最初合成的图片是底图的尺寸
canvas.skipTargetFind = true; //整个画板元素不能被选中
const qrCodeUrl = '二维码地址'
const qrcode = new QRCode(document.getElementById('qrcode'), {
width: 240,
height: 240,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: 0 //容错率 最好是调为0,要不然生成的二维码会很密
});
qrcode.makeCode(qrCodeUrl); // make another code.
//合成完之后立刻获取二维码的url可能会获取不到,得加个延时器
console.log('qrcode', qrcode);
fabric.Image.fromURL(
底图url,
img => {
var img1 = img.set({
left: 0,
top: 0
});
fabric.Image.fromURL(
头像图片url,
img => {
var img2 = img.scale(0.6).set({
left: 6.7, //头像地位
top: 20,
clipPath: new fabric.Circle({
radius: 50, //圆形
originX: 'center',
originY: 'center'
})
});
fabric.Image.fromURL(
document.getElementById('qrcode').querySelector('canvas').toDataURL('image/png'),
async img => {
var img3 = img.scale(1).set({ left: 105, top: 423 });
//合并图片
canvas.add(
new fabric.Group([img1, img2, img3], {
left: 0,
top: 0
})
);
const name = `.png`;
//canvas.toDataURL()这个办法是将canvas转换成base64
// dataURLtoFile()这个办法是将bsae64转成文件流
const file = this.dataURLtoFile(
canvas.toDataURL('image/png'),
name
);
console.log('file', file);
let config = {
typeName: 'png',
type: 'img'
};
//这里就开始上传文件了
const sharImageUrl = await upload(this, file, config);
console.log(
'---------------sharImageUrl',
sharImageUrl
);
resolve(sharImageUrl);
},
{ crossOrigin: 'anonymous' }
);
},
{ crossOrigin: 'anonymous' }
);
},
{ crossOrigin: 'anonymous' }
);
};
} catch (error) {
console.error(error);
reject(error);
}
});
},
bsae64转文件的办法
dataURLtoFile(dataurl, filename) {
//将base64转换为文件,dataurl为base64字符串,filename为文件名(必须带后缀名,如.jpg,.png)
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}
有不妥之处欢送大家指出~
fabric.js是能够简化canvas编写的js库,提供canvas短少的对象模型,蕴含事件监听、动画、数据序列号和反序列化等高级性能的js库,有趣味的能够看看官网的例子