Как объединить изображение в QR-код в JavaScript

Есть много хороших и плохих вещей в QR-кодах, они возникли повсюду — от рекламных щитов до бутылок с водой и стали необходимостью для некоторых маркетологов. Мнение о том, хороши ли эти коды или нет, я оставлю на ваше усмотрение. Большинство QR-кодов, которые вы увидите, очень типичные, черно-белые и, следовательно, скучные, что заканчивается незначительным вниманием со стороны клиента.

Будьте оригинальны и создайте потрясающий (или, может быть, жуткий) QR-код, объединяющий изображение на нем с помощью библиотеки JavaScript Qart.js

Скачайте и включите qart.js

Qart.js — это потрясающий генератор QR-кодов с настраиваемой функциональностью, которая позволяет объединять изображения в QR-код. Таким образом, сгенерированные QR-коды будут иметь оригинальный и художественный вид.

Чтобы установить qart.js, вам нужно скачать копию исходного кода. Вы можете установить плагин напрямую с помощью NPM, выполнив следующую команду в своем терминале:

npm install qartjs

Или, если вы хотите протестировать плагин, используйте его из CDN:

Кроме того, если вы не используете менеджер пакетов, получить копию файла qart.min.js из репозитория в папке dist и включите его с тегом script в вашем документе. Как только плагин будет включен в ваш проект любым из упомянутых способов, вы сможете получить доступ к плагину в своем коде или потребовать его следующим образом:

// With ES6
import QArt from 'qartjs';
// Browserify
var QArt = require('qartjs');
// If you are using qart.js in the browser
// the global variable QArt will be available in the window.

С помощью этого плагина вы скажете НЕТ скучным QR-кодам, которые вы видите каждый день и везде. Для получения дополнительной информации о плагине, пожалуйста, посетите официальный репозиторий в Github здесь.

Создать QR-код с изображением

Функция QArt ожидает объект со свойствами, показанными в следующей таблице:

поле
Тип
Описание
По умолчанию
значениестрокаДанные QR-кода.необходимые
ImagePathстрокаПуть объединенного изображения.необходимые
фильтрстрокаОпределите фильтр изображения. threshold или же colorпорог
версияцелое числоВерсия QRCode (1 <= version <= 40)10

Функция QArt возвращает объект, из возвращенного объекта вам нужно использовать метод make, чтобы добавить его в элемент DOM (предпочтительно div). Смотрите следующий пример:


var QR_CONTENT = "This is the content of the QR Code";
//var QR_IMAGE = "/path/to/image_png_or.jpg";
// Important: the image needs to be hosted in the same domain of the script
// otherwise you won't be able to make the plugin works (tainted canvas issue)
var QR_IMAGE = "hqdefault.jpg";
// Mode of the image in the QR code Possible values: "threshold" or "color"
var QR_FILTER = "color";
// The element of the document in which the qr code will be drawn
var QR_CONTAINER = document.getElementById("area");
// Render the QR Code
new QArt({
value: QR_CONTENT,
imagePath: QR_IMAGE,
filter: QR_FILTER
}).make(QR_CONTAINER);

Или, если вы работаете с EcmaScript 2016:

import QArt from 'qartjs';
const qart = new QArt({
value: "QR Code Content",
imagePath: './example.png',
filter: "color"
});
qart.make(document.getElementById('qart'));

Использование qart.js с известными фреймворками

Если вы используете фреймворк, такой как React, Angular или Vue, вам не нужно создавать пользовательский компонент для qarts, поскольку они уже существуют:

реагировать

Реактивный компонент qart.js доступен как модуль NPM, написанный @BatuhanK. Чтобы установить его в свой проект, выполните следующую команду в своем терминале:

npm install react-qart

И вы можете использовать его как:

import React, { Component } from 'react';
// Import QArt
import QArt from 'react-qart';
export default class App extends Component {
render() {
return (
Hello QR Custom
)
}
}

угловатый

Угловая директива qart.js доступен как модуль NPM, написанный @isonet. Чтобы установить его в свой проект, выполните следующую команду в своем терминале:

npm install angular-qart

И используйте это как:

angular.module('MyExampleApp', ['angular-qart']);

Vue.js

Vue.js компонент qart.js доступен как модуль NPM, написанный @ superman66. Чтобы установить его в свой проект, выполните следующую команду в своем терминале:

npm install vue-qart

Затем импортируйте компонент:

import VueQArt from 'vue-qart'
new Vue({
components: {VueQArt}
})

Как только компонент загружен, вы можете использовать его в своем шаблоне:

Не забудьте добавить необходимые данные:

data () {
return {
msg: 'Welcome to Your Vue.js App',
config: {
value: 'https://www.baidu.com',
imagePath: './examples/assets/logo.png',
filter: 'color'
},
}
}

Ограничения

До даты публикации этой статьи вы не можете изменить размер сгенерированного qr. Размеры сгенерированного холста всегда будут 195х195.

Используя плагин, вы получите полностью читаемый QR-код для любого приложения или устройства, которое позволяет считывать QR-коды. Вы можете увидеть живой пример того, как qart.js работает в браузере здесь. Демо-версия позволяет вам выбрать любое изображение с вашего компьютера или мобильного устройства и сразу же преобразует его в художественный QR-код с цветами или без них.

Ссылка на основную публикацию
Adblock
detector