1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/WeiDoctor-weapp-qrcode-canvas-2d

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Это зеркальный репозиторий, синхронизируется ежедневно с исходного репозитория.
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

weapp-qrcode-canvas-2d

weapp-qrcode-canvas-2d — это пакет JS, который позволяет генерировать двумерные QR-коды в среде разработки мобильных приложений WeChat с использованием нового интерфейса canvas-2d. Интерфейс canvas-2d поддерживает рендеринг на одном слое и обеспечивает более высокую производительность, что рекомендуется использовать для значительного увеличения скорости работы.

Адрес репозитория

Тестовая среда

  • Версия базовой библиотеки WeChat Mini Program: 2.10.4
  • Версия инструмента разработчика: Stable 1.03.2101150

Использование

В файле 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)
                }
            })

        };
    })

API

drawQrcode([options])

options

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}

TIPS

weapp-qrcode-canvas-2d см. следующий исходный код:

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

weapp-qrcode-canvas-2d — это пакет JavaScript для создания двумерных QR-кодов в среде мини-программы WeChat с использованием нового интерфейса canvas-2d. Интерфейс canvas 2d поддерживает рендеринг в том же слое, что обеспечивает лучшую производительность и позволяет значительно увеличить скорость создания изображений. Расширить Свернуть
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://gitlife.ru/oschina-mirror/WeiDoctor-weapp-qrcode-canvas-2d.git
git@gitlife.ru:oschina-mirror/WeiDoctor-weapp-qrcode-canvas-2d.git
oschina-mirror
WeiDoctor-weapp-qrcode-canvas-2d
WeiDoctor-weapp-qrcode-canvas-2d
master