uniapp 小程序多张图片生成海报以及下载海报

ops/2024/10/21 5:37:07/

uniapp 小程序多张图片生成海报以及下载海报

上代码

export default {data() {return {unit: 0,imgurl:"", // 海报图片shareimg:"https://eshopfile.zhiyousx.com/2022051811164947691.jpg", //背景图qrcode :"", // 二维码saveTop:80,}},onLoad(option) {let that = thisuni.getSystemInfo({success: (res) => {that.unit = res.screenWidth/750}});},methods:{// 获取二维码getqrcodeImg(){this.$https('GET','xxxx/xxxx/xxxx',).then(res => {if(res.code === 1){// 有现成的可以不用掉接口this.qrcode = res.datathis.genQrFile()}})},genQrFile() {let unit = this.unituni.showLoading()this.saveTop = parseInt(80*unit)var urlQR = this.getNetworkImage(this.qrcode);//二维码。var bg=this.getNetworkImage(this.shareimg);//背景图片转为本地图片let that = this;Promise.all([bg,urlQR]).then(res => {// 创建 canvas 绘图上下文（指定 canvasId）let ctx = uni.createCanvasContext('firstCanvas', this);// 绘制图像到画布  /** * 参数1  所要绘制的图片资源 * 参数2  图像的左上角在目标canvas上 X 轴的位置* 参数3  图像的左上角在目标canvas上 Y 轴的位置* 参数4  在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放* 参数5  在目标画布上绘制图像的高度，允许对绘制的图像进行缩放*/ctx.drawImage(res[0], 0, 0, parseInt(640*unit), parseInt(1140*unit));ctx.beginPath()// 你也可以插入文字// ctx.fillText('textAlign=right', 150, 100)let x = parseInt(117*unit),y= parseInt(483*unit),w=parseInt(220*unit),h=parseInt(225*unit)ctx.arc(w / 2 + x, w / 2 + y, h / 2, 0, Math.PI * 2, false)ctx.clip()// 绘制第二张图片图像到画布ctx.drawImage(res[1], x,y,w, h);ctx.restore()ctx.draw(false, () => {// 把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径uni.canvasToTempFilePath({x: 0,y: 0,width: 375,height: 840,destWidth: 640,destHeight: 1140,canvasId: 'firstCanvas',success: function(res) {// 保存文件路径that.imgurl = res.tempFilePathuni.hideLoading()},fail(e) {uni.hideLoading()}});});})},// 图片转为本地图片getNetworkImage(url) {return new Promise((resolve, reject) => {uni.downloadFile({url,success: (e) => {const p = e.tempFilePathif (p.indexOf('json') > -1) {reject(p)return false}resolve(p)},fail: (r) => {reject(r)}})})},}
}