<view v-show='!toPicture'><!-- 頁面的內(nèi)容 --> </view> <canvas v-show='toPicture' canvas-id="save-picture" :disable-scroll="true" style='width:375px;height:580px'></canvas><button @tap="toIMG">轉(zhuǎn)圖片</button> // 變量 toPicture: false// 按鈕點擊事件 toIMG() {this.toPicture = true;uni.showLoading({mask: true,title: "生成中..."});// 開始繪畫const ctx = uni.createCanvasContext("save-picture");ctx.fillText('Hello', 20, 20); //描繪文本ctx.fillText("能不能？圖片啊啊啊啊呀呀呀", 50, 20);// ctx.drawImage(_this.imgs, 50, 50); //描繪圖片// 將繪畫轉(zhuǎn)為圖片const _this = this;ctx.draw(false, () => {uni.canvasToTempFilePath({canvasId: "save-picture",width: 376 * 4,height: 500 * 4,quality: 1,fileType: 'jpg',success: (res) => {console.log(res.tempFilePath);uni.hideLoading();uni.previewImage({urls: [res.tempFilePath],longPressActions: {itemList: ['發(fā)送給朋友', '保存圖片', '收藏'],success(data) {console.log("點擊了第" + (data.tapIndex + 1) + "個按鈕");}}})},}, _this);}); }

總結(jié)

以上是生活随笔為你收集整理的uniapp 微信小程序最简单的生成图片示例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。