weapp-qrcode-canvas-2d
weapp-qrcode-canvas-2d — это пакет JS, который позволяет генерировать двумерные QR-коды в среде разработки мобильных приложений WeChat с использованием нового интерфейса canvas-2d. Интерфейс canvas-2d поддерживает рендеринг на одном слое и обеспечивает более высокую производительность, что рекомендуется использовать для значительного увеличения скорости работы.
Адрес репозитория
Тестовая среда
Использование
В файле WXML создайте элемент canvas для рисования и определите его свойства width, height, id и type, где значение type должно быть равно 2d:
<canvas type="2d" style="width: 260px; height: 260px;" id="myQrcode"></canvas>
Метод установки 1: прямое включение файла JS
Импортируйте файл JS напрямую и используйте функцию drawQrcode() для создания QR-кода:
// Скопируйте файл dist/weapp.qrcode.esm.js в проект. Путь может быть изменён в зависимости от фактического пути к странице.
import drawQrcode from '../../utils/weapp.qrcode.esm.js'
Способ установки 2: установка через npm
npm install weapp-qrcode-canvas-2d --save
Затем в инструменте разработчика WeChat выполните сборку через npm.
import drawQrcode from 'weapp-qrcode-canvas-2d'
После установки вызовите функцию следующим образом:
Пример 1: без использования наложенного изображения
const query = wx.createSelectorQuery()
query.select('#myQrcode')
.fields({
node: true,
size: true
})
.exec(async (res) => {
var canvas = res[0].node
// Вызов функции drawQrcode для генерации QR-кода
await drawQrcode({
canvas: canvas,
canvasId: 'myQrcode',
width: 260,
padding: 30,
background: '#ffffff',
foreground: '#000000',
text: '你好呀',
})
// let base64 = canvas.toDataURL()
// console.info(base64)
// Получение временного пути
wx.canvasToTempFilePath({
canvasId: 'myQrcode',
canvas: canvas,
x: 0,
y: 0,
width: 260,
height: 260,
destWidth: 260,
destHeight: 260,
success(res) {
console.log('Временный путь QR-кода:', res.tempFilePath)
},
fail(res) {
console.error(res)
}
})
})
Пример 2: использование наложенного изображения (добавление логотипа в QR-код)
const query = wx.createSelectorQuery()
query.select('#myQrcode')
.fields({
node: true,
size: true
})
.exec(async (res) => {
var canvas = res[0].node
var img = canvas.createImage();
img.src = "/image/logo.png"
img.onload = function () {
// Функция img.onload должна быть выполнена перед вызовом функции drawQrcode
var options = {
canvas: canvas,
canvasId: 'myQrcode',
width: 260,
padding: 30,
paddingColor: '#fff',
background: '#fff',
foreground: '#000000',
text: 'abc123',
image: {
imageResource: img,
width: 80, // Рекомендуется не устанавливать слишком большое значение, чтобы не влиять на сканирование
height: 80, // Рекомендуется не устанавливать слишком большое значение, чтобы не влиять на сканирование
round: true // Логотип изображения является круглым
}
}
await drawQrcode(options)
// let base64 = canvas.toDataURL()
// console.info(base64)
// Получение временного пути
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 260,
height: 260,
destWidth: 600,
destHeight: 600,
canvasId: 'myQrcode',
canvas: canvas,
success(res) {
console.log('Временный путь QR-кода:', res.tempFilePath)
},
fail(res) {
console.error(res)
}
})
};
})
Type: Object
Параметр | Обязательный | Описание | Пример |
---|---|---|---|
canvas | Да | Идентификатор компонента canvas | |
canvasId | Нет | Идентификатор элемента canvas | 'myQrcode' |
text | Да | Содержание QR-кода | 'abc123' |
width | Нет | Ширина QR-кода, соответствует ширине canvas | 260 |
padding | Нет | Внутренний отступ | 20 |
paddingColor | Нет | Цвет внутреннего отступа | По умолчанию совпадает с background |
background | Нет | Цвет фона QR-кода по умолчанию белый | '#ffffff' |
foreground | Нет | Цвет фона QR-кода по умолчанию — чёрный | #000000 |
Тип номера | Не | Режим расчёта QR-кода, значение по умолчанию -1 | 8 |
Уровень коррекции | Не | Уровень исправления ошибок QR-кода. Значение по умолчанию: высокий. Доступные значения: { L: 1, M: 0, Q: 3, H: 2 }
|
1 |
Изображение | Не | Рисование изображения на canvas, уровень выше QR-кода. Поддерживается в версии v1.1.1 и выше. См. пример 2 для конкретного использования. | {imageResource: '', width:80, height: 80, round: true} |
weapp-qrcode-canvas-2d см. следующий исходный код:
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )