uniapp,图片添加文字下载操作
2022-08-25 本文已影响0人
aE_0ff7
initImg() {
let that = this
uni.getImageInfo({
src: "/static/img/certificate.png",//背景图路径,本地图片
success(res) {
console.log(res.path)
var ctx = uni.createCanvasContext("firstCanvas") // 使用画布创建上下文 图片
ctx.drawImage(res.path, 0, 0, 300,
423) // 设置图片坐标及大小,括号里面的分别是(图片路径,x坐标,y坐标,width,height)
ctx.setFontSize(12) //设置字体大小,默认10
ctx.setFillStyle(that.jin) //文字颜色:默认黑色
ctx.setTextAlign('center')//文本水平居中
ctx.fillText('名字', 68, 170); //文字内容、x坐标,y坐标
ctx.setFontSize(8) //设置字体大小,默认10
ctx.fillText('2022-08-26').format("YYYY"), 190, 351.7); //文字内容、x坐标,y坐标
ctx.save(); //保存
ctx.draw() //绘制
}
})
},
点击下载
downloadCentificate() {
let that = this
uni.canvasToTempFilePath({
destWidth: 300,
destHeight: 423,
canvasId: 'firstCanvas',
success: function(res) {
// 在H5平台下,tempFilePath 为 base64
console.log(res.tempFilePath, "//")
// 保存本地
that.savePicture(res.tempFilePath)
}
})
},
savePicture(base64) {
var arr = base64.split(',');
var bytes = atob(arr[1]);
let ab = new ArrayBuffer(bytes.length);
let ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
var blob = new Blob([ab], { type: 'application/octet-stream' });
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = '下载名字' + ".png";
var e = document.createEvent('MouseEvents');
e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
a.dispatchEvent(e);
URL.revokeObjectURL(url);
},