Рисунок на холсте HTML5 апплета WeChat, сохраненный в системном альбоме.

Прежде чем приступить к реализации, давайте взглянем на рендеринг.

1. Сначала необходимо настроить сетевые образы с использованием имени домена для загрузки, которое можно преобразовать во временный путь с помощью wx.getImageInfo ;

2. В силу личных привычек я привык использовать синтаксис async-await, поэтому мне необходимо представить библиотеку регенератора. Способ использования можно проверить онлайн.

/datas/common.js

 //Инкапсулируем информацию об изображении WeChat. Export const getWxImageInfo = (imgPath) => { return new Promise((resolve, ignore) => { wx.getImageInfo({ src: imgPath, Success: res => {solve(res) }, Fail: res => {Отклонить (res) } }) })}// Инкапсулирует получение информации о селекторе узла Export const getSelectQurey = (queryStr) => { return new Promise(resolve => { var query = wx.createSelectorQuery(); query.select(queryStr).boundingClientRect(); query.exec(res => {solve(res) }) })}// Пакет экспортирует холст для создания изображения указанного размера. => { return new Promise((resolve, ignore) => { wx.canvasToTempFilePath({ width, height, CanvasId, fileType, Success: res => {solve(res) }, Fail: res => {Отклонить(res) } }) })}//Инкапсулируем и сохраняем изображения в системный альбом Export const saveImageToPhotosAlbum = (filePath) => { return new Обещание ((разрешить, отклонить) => { wx.saveImageToPhotosAlbum({ filePath, успех: 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-код big image.end -->

.wxss

 /* Просмотр большого изображения*/.shade { ширина: 100%; высота: 100%; цвет фона: rgba(240, 235, 235, 0.5); позиция: фиксированная; z-index: 100; : 0;}.qr-code { ширина: 600 пикселей; высота: 1000 пикселей; цвет фона: #fff; абсолютное; верхнее: 50%; левое: 50%; преобразование: Translate(-50%, -50%); /* поле: 30rpx auto; ; поле: 0 авто; ширина: 600 пикселей; высота: 900 пикселей;}.qr-btn { ширина: 600 пикселей; высота: 100rpx; высота строки: 100rpx; размер шрифта: 28rpx; цвет: #fff; цвет фона: #658dc5;}.qr-btn-save { flex: 0 0 500rpx; -align: по центру: граница по правому краю: 1rpx сплошная; #fff;}.qr-btn-cancel { text-align: center; flex: 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 '../../ datas/common.js'Page({данные: { isShowCanvas: false, // Отображать ли холст wxaCode: 'https://xxx..jpg', // Код апплета продуктаgoodImageUrl: 'https://xxx..jpg', // Изображение продукта CanvasTempFilePath: '', //Canvas экспортирует временный путь для создания изображений}, //Нажмите, чтобы отобразить генерируемый холст getCanvas(e) { if (!this.data.wxaCode) { util.showToast('Ошибка генерации QR-кода'); return } this.setData({ isShowCanvas: true }, () => { this.createCanvas(); }) }, // Скрываем холстideCanvas() { 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); qrImagePath = qrImage.path } catch (e) { wx.hideLoading(); this.hideCanvas(); error'); return; } // Сетевые изображения продукта по временному пути. GoodsImagePath = '/images/default_goods.png'; constgoodsImage = _this.data.goodsImageUrl; if (goodsImage) { constgoodsImageRes = await getWxImageInfo(goodsImage);goodsImagePath =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 = 'Я - имя магазина'; ctx.setFillStyle('black') ctx.setFontSize(16); ) ctx .setTextAlign('left') ctx.fillText(shopName, 10, shopNameY, cvWidth - qrWidth); // Установите текст названия продукта, чтобы его нельзя было переносить. Это простой процесс. const GoodsName = 'Товар с очень длинным названием спросит вас, боитесь ли вы'; GoodsName1 = ''; let GoodsName2 = ''; ctx.setFillStyle('black') ctx.setFontSize(14) ctx.setTextAlign('left') if (goodsName.length <= 10) { ctx.fillText(goodsName, 10, shopNameY + 30, cvWidth - qrWidth } else if (goodsName.length > 10 && GoodsName.length <= 22) { GoodsName1 = GoodsName.substring( 0, 10);ИмяТовара2 = ИмяТовара.подстрока(10); ctx.fillText(goodsName1, 10, shopNameY + 30, cvWidth - qrWidth); ctx.fillText(goodsName2, 10, shopNameY + 50, cvWidth - qrWidth); } else { GoodName1 = GoodName.substring(0, 10); имя_товара.подстрока(10, 22) + '...'; ctx.fillText(goodsName1, 10, shopNameY + 30, cvWidth - qrWidth(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(false, ()); => { wx.hideLoading(); _this.canvasToTempFilePathFunc(cvWidth, cvHeight, 'qrCanvas') }, // Экспортируем содержимое указанной области текущего холста для создания картинки заданного размера async CanvasToTempFilePathFunc(cvWidth, cvHeight, qrCanvas) { попробуйте { let res = await CanvasToTempFilePath( cvWidth, cvHeight, qrCanvas); this.setData({ CanvasTempFilePath: res.tempFilePath }); } catch (error) { console.log(error); util.showToast(error.errMsg); // Сохраняем изображение в локальном асинхронном файле saveImageToPhotosAlbumFunc. ( ) { попробуйте { let res = ожидайте saveImageToPhotosAlbum(this.data.canvasTempFilePath); console.log(res); this.hideCanvas(); util.showToast('Изображение успешно сохранено'); } catch (err) { console.log(err);

Написание относительно простое, поскольку оно предназначено в основном для удобства записи, поэтому не учитывается слишком много сценариев использования.

Выше представлен рисунок апплета WeChat в формате html5, сохраненный в системном альбоме. Надеюсь, он будет вам полезен. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам. время!