如何在JavaScript中将图像合并为QR码

本文概述

• 下载并包含qart.js
• 使用图像创建QR码
• 将qart.js与著名的框架一起使用
• 局限性

QR码有很多利弊, 从广告牌到水壶, 到处都有它们, 并且已成为某些营销人员的必备品。关于这些代码是否良好的意见, 我将由你自己决定。你将看到的大多数QRCode都是非常典型的, 黑白的, 因此很无聊, 最终客户很少注意。

保持原创, 并使用JavaScript库Qart.js创建精美(或令人毛骨悚然的)QR Code合并图像

下载并包含qart.js

Qart.js是一款出色的QR码生成器, 具有自定义功能, 可让你将图像合并到QR码中。这样, 生成的QR码将具有原始的艺术风格。

要安装qart.js, 你将需要下载源代码的副本。你可以使用NPM直接在终端中执行以下命令来安装插件：

npm install qartjs

或者, 如果你愿意测试插件, 请从CDN使用它：

<script src="//cdnjs.cloudflare.com/ajax/libs/qartjs/1.0.2/qart.min.js"></script>

或者, 如果你不使用包管理器, 请从dist文件夹中的存储库中获取qart.min.js文件的副本, 并将其与脚本标签一起包含在文档中。通过上述任何一种方式将插件包含在项目中之后, 你将可以按以下方式访问或要求代码中包含该插件：

// 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函数需要一个具有下表所示属性的对象：

QArt函数返回一个对象, 从返回的对象开始, 你需要使用make方法将其附加到DOM元素(最好是div)中。请参见以下示例：

<!-- A div container element that qart will use to insert the Canvas-->
<div id="area"></div>
<!-- The qart.js script -->
<script src="qart.js"></script>

<script>
    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);
</script>

或者, 如果你正在使用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之类的框架, 则无需为qart创建自定义组件, 因为它们已经存在：

React

qart.js的React组件作为@BatuhanK编写的NPM模块提供。要将其安装在你的项目中, 请在终端中执行以下命令：

npm install react-qart

你可以像这样使用它：

import React, { Component } from 'react';

// Import QArt
import QArt from 'react-qart';

export default class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello QR Custom</h1>
                <QArt
                    value="QR Content"
                    imagePath="./image.jpg"
                    filter="color"
                />
            </div>
        )
    }
}

Angular

qart.js的Angular指令可作为@isonet编写的NPM模块使用。要将其安装在你的项目中, 请在终端中执行以下命令：

npm install angular-qart

并像这样使用它：

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

Vue.js

qart.js的Vue.js组件可作为@ superman66编写的NPM模块使用。要将其安装在你的项目中, 请在终端中执行以下命令：

npm install vue-qart

然后, 导入组件：

import VueQArt from 'vue-qart'

new Vue({
    components: {VueQArt}
})

加载组件后, 可以在模板中使用它：

<vue-q-art :config="config"></vue-q-art>

不要忘记添加所需的数据：

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码。

编码愉快！