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

本文概述

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

QR码有很多利弊, 从广告牌到水壶, 到处都有它们, 并且已成为某些营销人员的必备品。关于这些代码是否良好的意见, 我将由你自己决定。你将看到的大多数QRCode都是非常典型的, 黑白的, 因此很无聊, 最终客户很少注意。
保持原创, 并使用JavaScript库Qart.js创建精美(或令人毛骨悚然的)QR Code合并图像
下载并包含qart.jsQart.js是一款出色的QR码生成器, 具有自定义功能, 可让你将图像合并到QR码中。这样, 生成的QR码将具有原始的艺术风格。
要安装qart.js, 你将需要下载源代码的副本。你可以使用NPM直接在终端中执行以下命令来安装插件：

npm install qartjs

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

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

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

// With ES6import QArt from 'qartjs'; // Browserifyvar 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函数需要一个具有下表所示属性的对象：

领域	类型	描述	default
值	String	QR码的数据。	需要
imagePath	String	组合图像的路径。	需要
过滤	String	定义图像过滤器。阈值或颜色	阈
版本	整数	QRCode版本(1 < =版本< = 40)	10

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="http://www.srcmini.com/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 drawnvar QR_CONTAINER = document.getElementById("area"); // Render the QR Codenew QArt({value: QR_CONTENT, imagePath: QR_IMAGE, filter: QR_FILTER}).make(QR_CONTAINER); < /script>

【如何在JavaScript中将图像合并为QR码】或者, 如果你正在使用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 QArtimport QArt from 'react-qart'; export default class App extends Component {render() {return (< div> < h1> Hello QR Custom< /h1> < QArtvalue="http://www.srcmini.com/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码。
编码愉快！