WeChat アプレットの HTML5 キャンバス描画とシステム アルバムへの保存

実装を開始する前に、レンダリングを見てみましょう。

1. ネットワーク イメージは、最初にダウンロード ドメイン名を使用して構成する必要があります。これは、 wx.getImageInfoを通じて一時パスに変換できます。

2. 個人的な習慣で async-await 構文を使用することに慣れているため、Regenerator ライブラリを導入する必要があります。使用方法はオンラインで確認できます。

/datas/common.js

 //WeChat の画像情報をカプセル化します。 import const getWxImageInfo = (imgPath) => { return new Promise((resolve,拒否) => { wx.getImageInfo({ src: imgPath, 成功: res => {solve(res) }, 失敗: res => {拒否(res) } }) })}// ノードセレクター情報の取得をカプセル化します。export const getSelectQurey = (queryStr) => { return new Promise(resolve => { var query = wx.createSelectorQuery(); query.select(queryStr).boundingClientRect(); query.exec(res => {solve(res) }) })}//パッケージはキャンバスをエクスポートして、指定されたサイズの画像を生成します。 import const CanvasToTempFilePath = (width, height, CanvasId, fileType = 'jpg') => { return new Promise((resolve,拒否) => { wx.canvasToTempFilePath({ width, height, CanvasId, fileType, 成功: res => {solve(res) }, 失敗: res => {拒否(res) } }) })}//画像をカプセル化してシステム アルバムに保存します。export const saveImageToPhotosAlbum = (filePath) => { return new Promise((解決、拒否) => { wx.saveImageToPhotosAlbum({ ファイルパス、成功: res => {solve(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'>キャンセル</view> < /view view> </view></view><!-- QRコード大きい画像.end -->

.wxss

 /* 大きな画像を表示 */.shade { width: 100%; height: 100%; 位置: z-index: 100; : 0;}.qr コード { 幅: 600rpx; 高さ: 1000rpx; 位置:絶対; 上: 50%; 左: 50%; 変換: 30rpx auto; ; マージン: 0 自動; 幅: 600rpx; }.qr-btn { 幅: 600rpx; 100rpx; 行の高さ: 100rpx; フォントサイズ: 28rpx; 表示: フレックス: 0 0 500rpx; - 整列: 中央、右端: 1rpx 実線#fff;}.qr-btn-cancel { text-align: center; 0 0 100rpx;}

ヒント

商品画像は正方形のため、こちらの商品画像の幅と高さはキャンバスの幅を基準としておりますが、これは単純な加工ではありません。

注: ドキュメント内に使用時に注意する必要がある文がありますwx.canvasToTempFilePath(Object object, Object this) : 現在のキャンバスの指定された領域の内容をエクスポートし、指定されたサイズの画像を生成します。 draw() コールバックでこのメソッドを呼び出すことによってのみ、画像を正常にエクスポートできます。

 const app = getApp()const regeneratorRuntime = app.globalData.regeneratorRuntimeconstconst util = require('../../utils/util.js')import { getSelectQurey, getWxImageInfo, CanvasToTempFilePath, saveImageToPhotosAlbum} from '../../ data/common.js'Page({ データ: { isShowCanvas: false, // キャンバスを表示するかどうか wxaCode: 'https://xxx..jpg', // 製品アプレットコード GoodsImageUrl: 'https://xxx..jpg', // 製品画像 CanvasTempFilePath: '', //キャンバスは画像を生成するための一時パスをエクスポートします}, //クリックして生成するキャンバスを表示します getCanvas(e) { if (!this.data.wxaCode) { util.showToast('QR コードの生成に失敗しました'); return; } this.setData({ isShowCanvas: true }, () => { this.createCanvas(); }) }, // キャンバスを非表示 HideCanvas() { this . setData({ isShowCanvas: false }) }, // キャンバスを作成します async createCanvas() { wx.showLoading({ title: '画像を生成しています...' }) const _this = this // ノードセレクターを作成します const res = await getSelectQurey('#qrCanvas') // キャンバスの幅と高さ const cvWidth = res[0].width const cvHeight = res[0]; .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 コード ネットワーク画像を一時パスに let qrImagePath = ''; { const wxaCode = _this.data.wxaCode; const qrImage = await getWxImageInfo(wxaCode); } catch (e) { wx.hideCanvas(); QR コードの生成失敗しました'); } // 製品ネットワークの画像を一時パスに戻します。 GoodsImagePath = '/images/default_goods.png'; const GoodsImage = _this.data.goodsImageUrl; if (goodsImage) { const GoodsImageRes = await getWxImageInfo(goodsImage) } // キャンバスを作成します 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 = 'ctx.setFillStyle('black') ctx.setFontSize(16) ) ctx .setTextAlign('left') ctx.fillText(ショップ名, 10, shopNameY, cvWidth - qrWidth); // 商品名の文字列を折り返せないように設定します。 const GoodsName = '商品名が長い場合は、ご心配をおかけします。';商品名1 = ''; グッズ名2 = ''; ctx.setFillStyle('black') ctx.setTextAlign('left') (商品名.length <= 10) { ctx.fillText(商品名, 10, ショップ名Y + 30, cvWidth - qrWidth); } else if (商品名.length > 10 && 商品名.length <= 22) { 商品名1 = 商品名.substring( 0, 10); 商品名2 = 商品名.substring(10); ctx.fillText(商品名1, 10, 店舗名Y + 30, cvWidth - qrWidth); ctx.fillText(商品名2, 10, 店舗名Y + 50, cvWidth - qrWidth) } else { 商品名1 = 商品名.substring(0, 10);商品名.部分文字列(10, 22) + '...'; ctx.fillText(goodsName1, 10, shopNameY + 30, cvWidth - qrWidth); ctx.fillText(goodsName2, 10, shopNameY + 50, cvWidth - qrWidth) } // ヒント consttipText = 'Long を設定します。識別アプレットを押して、今すぐ注文してください。 '; ctx.setFillStyle('gray') ctx.setFontSize(8) ctx.setTextAlign('center') ctx.fillText(tipText, cvWidth / 2, cvHeight - 10) // 完了 ctx.draw(false, () => { wx.hideLoading(); _this.canvasToTempFilePathFunc(cvWidth, cvHeight, 'qrCanvas') }) }, // 現在のキャンバスの指定された領域の内容をエクスポートして、指定されたサイズの画像を生成します async CanvasToTempFilePathFunc(cvWidth, cvHeight, qrCanvas) { try { let res = await CanvasToTempFilePath( cvWidth, cvHeight, qrCanvas); this.setData({ CanvasTempFilePath: res.tempFilePath }); } catch (error) { console.showToast(error.errMsg) } }, // 画像をローカルに保存します saveImageToPhotosAlbumFunc ( ) { try { let res = 待つsaveImageToPhotosAlbum(this.data.canvasTempFilePath); console.log(res); util.showToast('画像は正常に保存されました');

主に自分の利便性を記録するために書いているので、あまり多くの利用シーンを考慮していません。

上記は、編集者によって導入され、システム アルバムに保存された WeChat アプレットの HTML5 キャンバス描画です。ご質問があれば、メッセージを残してください。編集者が返信します。時間！