ภาพวาดบนผืนผ้าใบ HTML5 ของแอปเพล็ต WeChat และบันทึกลงในอัลบั้มระบบ

ก่อนที่จะเริ่มใช้งาน เรามาดูการเรนเดอร์กันก่อน

1. อิมเมจเครือข่ายจำเป็นต้องได้รับการกำหนดค่าด้วยชื่อโดเมนดาวน์โหลดก่อน ซึ่งสามารถแปลงเป็นเส้นทางชั่วคราวผ่าน wx.getImageInfo

2. เนื่องจากนิสัยส่วนตัว ฉันคุ้นเคยกับการใช้ไวยากรณ์ async-await ดังนั้นฉันจึงจำเป็นต้องแนะนำไลบรารีตัวสร้างใหม่ สามารถตรวจสอบวิธีการใช้งานได้ทางออนไลน์

/datas/common.js

 // สรุปข้อมูลรูปภาพ WeChat ส่งออก const getWxImageInfo = (imgPath) => { ส่งคืนสัญญาใหม่ ((แก้ไข, ปฏิเสธ) => { wx.getImageInfo ({ src: imgPath, ความสำเร็จ: res => { แก้ไข (res) }, ล้มเหลว: res => { ปฏิเสธ (res) } }) })}// สรุปการรับข้อมูลตัวเลือกโหนดที่ส่งออก const getSelectQurey = (queryStr) => { ส่งคืนสัญญาใหม่ (แก้ไข => { var query = wx.createSelectorQuery(); query.select(queryStr).boundingClientRect(); query.exec(res => { แก้ไข(res) }) })}// แพ็คเกจส่งออกผืนผ้าใบเพื่อสร้างรูปภาพขนาดที่ระบุ ส่งออก const canvasToTempFilePath = (width, height, canvasId, fileType = 'jpg') => { return new Promise((แก้ไข, ปฏิเสธ) => { wx.canvasToTempFilePath({ width, height, canvasId, fileType, Success: res => { แก้ไข (res) }, ล้มเหลว: res => { ปฏิเสธ (res) } }) })}//ห่อหุ้มและบันทึกรูปภาพลงในอัลบั้มระบบ ส่งออก const saveImageToPhotosAlbum = (filePath) => { return new สัญญา ((แก้ไข, ปฏิเสธ) => { wx.saveImageToPhotosAlbum ({ filePath, ความสำเร็จ: res => { แก้ไข (res) }, ล้มเหลว: res => { ปฏิเสธ (res) } }) })}

.wxml

 <view class=icon-download catchtap=getCanvas>คลิกเพื่อสร้างภาพ</view><!-- รูปภาพโค้ด QR ขนาดใหญ่--><view class='shade' wx:if={{isShowCanvas}}> <view class ='qr-code'> <canvas class='qr-canvas' canvas-id=qrCanvas id=qrCanvas></canvas> <view class='qr-btn'> <view class='qr-btn-save' catchtap='saveImageToPhotosAlbumFunc'>บันทึกภาพและแบ่งปันกับเพื่อน ๆ</view> <view class='qr-btn-cancel' catchtap='hideCanvas'>Cancel</view> < /view view> </view></view><!-- รหัส QR รูปภาพขนาดใหญ่สิ้นสุด -->

.wxss

 /* ดูภาพขนาดใหญ่*/.shade { ความกว้าง: 100%; ความสูง: 100%; สีพื้นหลัง: rgba (240, 235, 235, 0.5); : 0;}.qr-code { ความกว้าง: 600rpx; ความสูง: 1,000rpx; สูงสุด: 50%; ซ้าย: 50%; แปลง: แปล (-50%, -50%); /* ระยะขอบ: 30rpx อัตโนมัติ; ; ระยะขอบ: 0 อัตโนมัติ ความกว้าง: 600rpx; 100rpx; line-height: 100rpx; ระยะขอบ: 0 อัตโนมัติ; ขนาดตัวอักษร: 28rpx; จอแสดงผล: ดิ้น; -align: center; border-right: 1rpx ทึบ #fff;}.qr-btn-cancel { จัดตำแหน่งข้อความ: กึ่งกลาง; ดิ้น: 0 0 100rpx;}

เคล็ดลับ

รูปภาพสินค้าเป็นรูปสี่เหลี่ยมจัตุรัส ดังนั้นความกว้างและความสูงของรูปภาพสินค้าจึงขึ้นอยู่กับความกว้างของผืนผ้าใบ ไม่สามารถตัดข้อความได้

หมายเหตุ: มีประโยคหนึ่งในเอกสารที่คุณต้องใส่ใจเมื่อใช้ wx.canvasToTempFilePath(Object object, Object this) : ส่งออกเนื้อหาของพื้นที่ที่ระบุของผืนผ้าใบปัจจุบันเพื่อสร้างรูปภาพในขนาดที่ระบุ . โดยการเรียกเมธอดนี้ในการเรียกกลับ Draw() เท่านั้นจึงจะสามารถส่งออกรูปภาพได้สำเร็จ

 const app = getApp()const regeneratorRuntime = app.globalData.regeneratorRuntimeconstconst util = need('../../utils/util.js')import { getSelectQurey, getWxImageInfo, canvasToTempFilePath, saveImageToPhotosAlbum} จาก '../../ datas/common.js'Page ({ ข้อมูล: { isShowCanvas: false, // ไม่ว่าจะแสดง canvas wxaCode: 'https://xxx..jpg', // Product applet code goodImageUrl: 'https://xxx..jpg', // Product image canvasTempFilePath: '', //Canvas ส่งออกเส้นทางชั่วคราวเพื่อสร้างรูปภาพ}, //คลิกเพื่อแสดงผืนผ้าใบที่จะสร้าง getCanvas(e) { if (!this.data.wxaCode) { util.showToast('การสร้างโค้ด QR ล้มเหลว'); return; } this.setData({ isShowCanvas: true }, () => { this.createCanvas(); }) }, // ซ่อน canvas HideCanvas() { this . setData({ isShowCanvas: false }) }, // สร้าง canvas async createCanvas() { wx.showLoading({ title: 'รูปภาพกำลังถูกสร้างขึ้น...' }) const _this = this // สร้างตัวเลือกโหนด const res = await getSelectQurey('#qrCanvas'); // ความกว้างและความสูงของผืนผ้าใบ const cvWidth = res[0].width; .height; const cvSubValue = cvHeight - cvWidth const qrWidth = cvSubValue / 1.5 const qrMargin = (cvSubValue - qrWidth) / 2 const qrX = cvWidth - qrWidth - qrMargin / 2 const qrY = cvWidth + qrMargin const shopNameY = cvWidth + cvSubValue - qrWidth // อิมเมจเครือข่ายรหัส QR ไปยังเส้นทางชั่วคราว ให้ qrImagePath = ''; { const wxaCode = _this.data.wxaCode; const qrImage = รอ getWxImageInfo(wxaCode); qrImagePath = qrImage.path } catch (e) { wx.hideLoading(); util.showToast('QR code Generation ล้มเหลว'); กลับ; } // รูปภาพเครือข่ายผลิตภัณฑ์ไปยังเส้นทางชั่วคราว GoodsImagePath = '/images/default_goods.png'; const GoodsImage = _this.data.goodsImageUrl; if (goodsImage) { const GoodsImageRes = await getWxImageInfo(goodsImage); GoodsImageRes.path; } // สร้างแคนวาส var ctx = wx.createCanvasContext('qrCanvas', _this); // ตั้งค่าพื้นหลัง ctx.setFillStyle('#fff'); ctx.fillRect(0, 0, cvWidth, cvHeight); // ตั้งค่าความกว้างและความสูงของรูปภาพผลิตภัณฑ์ ให้เหมือนกัน ctx.drawImage(goodsImagePath, 0, 0, cvWidth, cvWidth); // ตั้งค่ารูปภาพโค้ด QR ctx.drawImage(qrImagePath, qrX, qrY, qrWidth, qrWidth); // ตั้งชื่อร้านค้า const shopName = 'I am the shop name'; ) ctx .setTextAlign('ซ้าย') ctx.fillText(ชื่อร้านค้า, 10, shopNameY, cvWidth - qrWidth); // ตั้งค่าข้อความชื่อผลิตภัณฑ์เพื่อไม่ให้ตัดคำ นี่เป็นเพียงกระบวนการง่ายๆ const GoodsName = 'ผลิตภัณฑ์ที่มีชื่อยาวมากจะถามคุณว่าคุณกลัวหรือไม่'; GoodsName1 = ''; ให้ GoodsName2 = ''; (goodsName.length <= 10) { ctx.fillText(goodsName, 10, shopNameY + 30, cvWidth - qrWidth); } else if (goodsName.length > 10 && GoodsName.length <= 22) { GoodsName1 = GoodsName.substring( 0, 10); GoodsName2 = GoodsName.substring(10); ctx.fillText(goodsName1, 10, shopNameY + 30, cvWidth - qrWidth); GoodsName.substring(10, 22) + '...'; ctx.fillText(goodsName1, 10, shopNameY + 30, cvWidth - qrWidth); ctx.fillText(goodsName2, 10, shopNameY + 50, cvWidth - qrWidth); } // ตั้งค่าทิป const tipText = 'Long กดแอปเพล็ตระบุตัวตนแล้วสั่งซื้อทันที! '; ctx.setFillStyle('gray') ctx.setFontSize(8) ctx.setTextAlign('center') ctx.fillText(tipText, cvWidth / 2, cvHeight - 10); // กรอก ctx.draw(เท็จ, () => { wx.hideLoading(); _this.canvasToTempFilePathFunc(cvWidth, cvHeight, 'qrCanvas') }); }, // ส่งออกเนื้อหาของพื้นที่ที่ระบุของผืนผ้าใบปัจจุบันเพื่อสร้างรูปภาพในขนาดที่ระบุ async canvasToTempFilePathFunc(cvWidth, cvHeight, qrCanvas) { ลอง { ให้ res = รอ canvasToTempFilePath( cvWidth, cvHeight, qrCanvas); this.setData({ canvasTempFilePath: res.tempFile } } catch (ข้อผิดพลาด) { console.log(error); util.showToast(error.errMsg); // บันทึกรูปภาพลงใน async saveImageToPhotosAlbumFunc ( ) { ลอง { ให้ res = รอ saveImageToPhotosAlbum (this.data.canvasTempFilePath); console.log (res); util.showToast ('บันทึกรูปภาพสำเร็จ');

การเขียนค่อนข้างง่ายเพราะเพื่อความสะดวกของตัวเองในการบันทึกเป็นหลัก จึงไม่คำนึงถึงสถานการณ์การใช้งานมากเกินไป

ด้านบนคือภาพวาดแคนวาส html5 ของแอปเพล็ต WeChat ที่บรรณาธิการแนะนำและบันทึกไว้ในอัลบั้มของระบบ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วบรรณาธิการจะตอบกลับคุณ เวลา!