uniapp 小程序 多張圖片生成海報以及下載海報

1. 上代碼

export default {
	data() {
		return {
			unit: 0,
			imgurl:"", // 海報圖片
			shareimg:"https://eshopfile.zhiyousx.com/2022051811164947691.jpg", //背景圖
			qrcode :"", // 二維碼
			saveTop:80,
		}
	},
	onLoad(option) {
	    let that = this
		uni.getSystemInfo({
		  success: (res) => {
			that.unit = res.screenWidth/750
		  }
		});
	},
	methods:{
       // 獲取二維碼
		getqrcodeImg(){
			this.$https('GET','xxxx/xxxx/xxxx',).then(res => {
				if(res.code === 1){
				// 有現(xiàn)成的可以不用掉接口
					this.qrcode = res.data
					this.genQrFile()
				}
			})
		},
		genQrFile() {
			let unit = this.unit
			uni.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 => {
			// 創(chuàng)建 canvas 繪圖上下文（指定 canvasId）
			let ctx = uni.createCanvasContext('firstCanvas', this);
			// 繪制圖像到畫布  
			/** 
			 * 參數(shù)1  所要繪制的圖片資源 
			 * 參數(shù)2  圖像的左上角在目標canvas上 X 軸的位置
			 * 參數(shù)3  圖像的左上角在目標canvas上 Y 軸的位置
			 * 參數(shù)4  在目標畫布上繪制圖像的寬度，允許對繪制的圖像進行縮放
			 * 參數(shù)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, () => {
					// 把當前畫布指定區(qū)域的內容導出生成指定大小的圖片，并返回文件路徑
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: 375,
						height: 840,
						destWidth: 640,
						destHeight: 1140,
						canvasId: 'firstCanvas',
						success: function(res) {
							// 保存文件路徑
							that.imgurl = res.tempFilePath
							uni.hideLoading()
						},
						fail(e) {
							uni.hideLoading()
						}
					});
				});
			})
		},
		// 圖片轉為本地圖片
		getNetworkImage(url) {
			return new Promise((resolve, reject) => {
				uni.downloadFile({
				url,
				success: (e) => {
					const p = e.tempFilePath
					if (p.indexOf('json') > -1) {
						reject(p)
						return false
					}
					resolve(p)
				},
				fail: (r) => {
					reject(r)
				}
			})
			})
		},
    }
}			     
			

2. 下載海報
   我的上一篇博客有后半部分圖片保存代碼！

3. 搞定！ 日常開發(fā)代碼記錄。文章來源地址http://www.zghlxwxcb.cn/news/detail-857746.html

到了這里，關于uniapp 小程序 多張圖片生成海報以及下載海報的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！