Gambar kanvas HTML5 dari applet WeChat dan disimpan ke album sistem

Sebelum mulai mengimplementasikannya, mari kita lihat renderingnya.

1. Gambar jaringan perlu dikonfigurasi dengan nama domain unduhan terlebih dahulu, yang dapat dikonversi ke jalur sementara melalui wx.getImageInfo ;

2. Karena kebiasaan pribadi, saya terbiasa menggunakan sintaks async-await, jadi saya perlu memperkenalkan perpustakaan regenerator. Metode penggunaannya dapat diperiksa secara online.

/datas/common.js

 //Enkapsulasi informasi gambar WeChat. ekspor const getWxImageInfo = (imgPath) => { kembalikan Janji baru((putuskan, tolak) => { wx.getImageInfo({ src: imgPath, sukses: res => { tekad(res) }, gagal: res => { tolak (res) } }) })}// Merangkum perolehan informasi pemilih node ekspor const getSelectQurey = (queryStr) => { kembalikan Janji baru(resolve => { var query = wx.createSelectorQuery(); query.select(queryStr).boundingClientRect(); query.exec(res => { tekad(res) }) })}// Paket mengekspor kanvas untuk menghasilkan gambar dengan ukuran tertentu ekspor const canvasToTempFilePath = (width, height, canvasId, fileType = 'jpg') => { return new Promise((resolve, reject) => { wx.canvasToTempFilePath({ lebar, tinggi, canvasId, fileType, sukses: res => { tekad(res) }, gagal: res => { tolak(res) } }) })}//Enkapsulasi dan simpan gambar ke album sistem ekspor const saveImageToPhotosAlbum = (filePath) => { return new Janji((menyelesaikan, menolak) => { wx.saveImageToPhotosAlbum({ filePath, sukses: res => { menyelesaikan(res) }, gagal: res => { menolak(res) } }) })}

.wxml

 <view class=icon-download catchtap=getCanvas>Klik untuk menghasilkan gambar</view><!-- Gambar kode QR besar--><view class='shade' wx:if={{isShowCanvas}}> <lihat kelas ='qr-code'> <kanvas class='qr-canvas' canvas-id=qrCanvas id=qrCanvas></canvas> <lihat class='qr-btn'> <lihat class='qr-btn-save' catchtap='saveImageToPhotosAlbumFunc'>Simpan gambar dan bagikan dengan teman</view> <view class='qr-btn-cancel' catchtap='hideCanvas'>Batal</view> < /view view> </view></view><!-- Kode QR gambar besar.end -->

.wxss

 /* Lihat gambar besar*/.shade { lebar: 100%; tinggi: 100%; warna latar: rgba(240, 235, 235, 0,5); : 0;}.qr-code { lebar: 600rpx; tinggi: 1000rpx; absolut; atas: 50%; kiri: 50%; transformasi: terjemahan(-50%, -50%); /* margin: 30rpx otomatis; ; margin: 0 otomatis; lebar: 600rpx; tinggi: 900rpx;}.qr-btn { lebar: 600rpx tinggi: 100rpx; tinggi garis: 100rpx; margin: 0 otomatis; ukuran font: 28rpx; warna: #fff; tampilan: fleksibel; warna latar: #658dc5;}.qr-btn-save { fleksibel: 0 0 500rpx; -sejajarkan: tengah; batas kanan: 1rpx padat #fff;}.qr-btn-cancel { perataan teks: tengah; fleksibel: 0 0 100rpx;}

tip

Gambar produk berbentuk persegi, jadi lebar dan tinggi gambar produk di sini didasarkan pada lebar kanvas.

Catatan: Ada kalimat dalam dokumen yang perlu Anda perhatikan saat menggunakan wx.canvasToTempFilePath(Object object, Object this) : Ekspor konten area tertentu dari kanvas saat ini untuk menghasilkan gambar dengan ukuran yang ditentukan . Hanya dengan memanggil metode ini dalam panggilan balik draw() gambar dapat berhasil diekspor.

 const app = getApp()const regeneratorRuntime = app.globalData.regeneratorRuntimeconstconst util = require('../../utils/util.js')import { getSelectQurey, getWxImageInfo, canvasToTempFilePath, saveImageToPhotosAlbum} dari '../../ datas/common.js'Page({ data: { isShowCanvas: false, // Apakah akan menampilkan kanvas wxaCode: 'https://xxx..jpg', // Kode applet produk goodImageUrl: 'https://xxx..jpg', // Gambar produk canvasTempFilePath: '', //Canvas mengekspor jalur sementara untuk menghasilkan gambar}, //Klik untuk menampilkan kanvas yang akan dibuat getCanvas(e) { if (!this.data.wxaCode) { util.showToast('Pembuatan kode QR gagal'); return } this.setData({ isShowCanvas: true }, () => { this.createCanvas(); }) }, // Sembunyikan kanvas hideCanvas() { this . setData({ isShowCanvas: false }) }, // Buat kanvas async createCanvas() { wx.showLoading({ title: 'Gambar sedang dibuat...' }) const _this = this // Membuat pemilih node const res = menunggu getSelectQurey('#qrCanvas'); // Lebar dan tinggi kanvas 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 // gambar jaringan kode QR ke jalur sementara biarkan qrImagePath = ''; { const wxaCode = _this.data.wxaCode; const qrImage = menunggu getWxImageInfo(wxaCode); qrImagePath = qrImage.path } catch (e) { wx.hideLoading(); gagal'); return; } // Gambar jaringan produk ke jalur sementara goodImagePath = '/images/default_goods.png'; const goodImage = _this.data.goodsImageUrl; if (goodsImage) { const goodImageRes = menunggu getWxImageInfo(goodsImage); wx.createCanvasContext('qrCanvas', _this); // Mengatur latar belakang ctx.setFillStyle('#fff'); ctx.fillRect(0, 0, cvWidth, cvHeight); // Mengatur lebar dan tinggi gambar produk menjadi ctx.drawImage(goodsImagePath, 0, 0, cvWidth, cvWidth); Atur gambar kode QR ctx.drawImage(qrImagePath, qrX, qrY, qrWidth, qrWidth); // Tetapkan nama toko const shopName = 'Saya adalah nama toko'; ) ctx .setTextAlign('kiri') ctx.fillText(Nama Toko, 10, shopNameY, cvWidth - qrWidth); // Atur teks nama produk agar tidak dapat dibungkus. Ini hanya proses sederhana. const goodname = 'Produk dengan nama yang sangat panjang akan menanyakan apakah Anda takut'; namabarang1 = ''; biarkan namabarang2 = ''; ctx.setFillStyle('hitam') ctx.setFontSize(14) ctx.setTextAlign('kiri') jika (Namabarang.panjang <= 10) { ctx.fillText(Namabarang, 10, NamatokoY + 30, Lebar cv - lebar qr } else if (Namabarang.panjang > 10 && Namabarang.panjang <= 22) { Namabarang1 = Namabarang.substring( 0, 10);namabarang2 =Namabarang.substring(10); ctx.fillText(goodsName1, 10, shopNameY + 30, cvWidth - qrWidth); ctx.fillText(goodsName2, 10, shopNameY + 50, cvWidth - qrWidth); namabarang.substring(10, 22) + '...'; ctx.fillText(goodsName1, 10, shopNameY + 30, cvWidth - qrWidth); ctx.fillText(goodsName2, 10, shopNameY + 50, cvWidth - qrWidth); Tekan applet identifikasi dan lakukan pemesanan sekarang! '; ctx.setFillStyle('gray') ctx.setFontSize(8) ctx.setTextAlign('center') ctx.fillText(tipText, cvWidth / 2, cvHeight - 10); => { wx.hideLoading(); _this.canvasToTempFilePathFunc(cvWidth, cvHeight, 'qrCanvas') } }, // Ekspor konten area tertentu dari kanvas saat ini untuk menghasilkan gambar dengan ukuran tertentu async canvasToTempFilePathFunc(cvWidth, cvHeight, qrCanvas) { coba { biarkan res = menunggu canvasToTempFilePath( cvWidth, cvHeight, qrCanvas); this.setData({ canvasTempFilePath: res.tempFilePath }); } catch (error) { console.log(error); util.showToast(error.errMsg) }, // Simpan gambar ke async lokal saveImageToPhotosAlbumFunc ( ) { coba { biarkan res = menunggu saveImageToPhotosAlbum(this.data.canvasTempFilePath); console.log(res); this.hideCanvas(); util.showToast('Gambar berhasil disimpan');

Penulisannya relatif sederhana, karena terutama untuk kenyamanan saya sendiri dalam mencatat, sehingga tidak memperhitungkan terlalu banyak skenario penggunaan.

Di atas adalah gambar kanvas html5 dari applet WeChat yang diperkenalkan oleh editor dan disimpan ke album sistem. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda waktu!