uniapp条形码实现

条形码在实际应用场景是经常可见的。

这里教大家如何集成uniapp条形码。条形码依赖类库JsBarcode.

下载JsBarcode源码,对CanvasRenderer进行了改进兼容uniapp。

import merge from "../help/merge.js";
import {calculateEncodingAttributes, getTotalWidthOfEncodings, getMaximumHeightOfEncodings} from "./shared.js";class CanvasRenderer{constructor(canvas, encodings, options){this.canvas = canvas;this.encodings = encodings;this.options = options;}render(){// Abort if the browser does not support HTML5 canvas// if (!this.canvas.getContext) {// 	throw new Error('The browser does not support canvas.');// }this.initSize()setTimeout(() => {this.prepareCanvas();for(let i = 0; i < this.encodings.length; i++){var encodingOptions = merge(this.options, this.encodings[i].options);this.drawCanvasBarcode(encodingOptions, this.encodings[i]);this.drawCanvasText(encodingOptions, this.encodings[i]);this.moveCanvasDrawing(this.encodings[i]);}this.canvas.draw();}, 50);// this.restoreCanvas();}initSize(){var ctx = this.canvas;calculateEncodingAttributes(this.encodings, this.options, ctx);var totalWidth = getTotalWidthOfEncodings(this.encodings);var maxHeight = getMaximumHeightOfEncodings(this.encodings);this.options.thiz.canvasWidth = totalWidth + this.options.marginLeft + this.options.marginRight;this.options.thiz.canvasHeight = maxHeight;}prepareCanvas(){// Get the canvas contextvar ctx = this.canvas;// ctx.save();// fixEncodings(this.encodings, this.options, ctx)// Paint the canvasctx.clearRect(0, 0, this.options.thiz.canvasWidth, this.options.thiz.canvasHeight);if(this.options.background){ctx.fillStyle = this.options.background;ctx.fillRect(0, 0, this.options.thiz.canvasWidth, this.options.thiz.canvasHeigh);}ctx.translate(this.options.marginLeft, 0);}drawCanvasBarcode(options, encoding){// Get the canvas contextvar ctx = this.canvas;var binary = encoding.data;// Creates the barcode out of the encoded binaryvar yFrom;if(options.textPosition == "top"){yFrom = options.marginTop + options.fontSize + options.textMargin;}else{yFrom = options.marginTop;}// ctx.fillStyle = options.lineColor;ctx.setFillStyle(options.lineColor)for(var b = 0; b < binary.length; b++){var x = b * options.width + encoding.barcodePadding;if(binary[b] === "1"){ctx.fillRect(x, yFrom, options.width, options.height);}else if(binary[b]){ctx.fillRect(x, yFrom, options.width, options.height * binary[b]);}}}drawCanvasText(options, encoding){// Get the canvas contextvar ctx = this.canvas;var font = options.fontOptions + " " + options.fontSize + "px " + options.font;// Draw the text if displayValue is setif(options.displayValue){var x, y;if(options.textPosition == "top"){y = options.marginTop + options.fontSize - options.textMargin;}else{y = options.height + options.textMargin + options.marginTop + options.fontSize;}// ctx.font = font;if(options.fontSize){ctx.setFontSize(options.fontSize)}if(options.lineColor){ctx.setFillStyle(options.lineColor)}// Draw the text in the correct X depending on the textAlign optionif(options.textAlign == "left" || encoding.barcodePadding > 0){x = 0;ctx.textAlign = 'left';}else if(options.textAlign == "right"){x = encoding.width - 1;ctx.textAlign = 'right';}// In all other cases, center the textelse{x = encoding.width / 2;ctx.textAlign = 'center';}ctx.fillText(encoding.text, x, y);}}moveCanvasDrawing(encoding){var ctx = this.canvas;ctx.translate(encoding.width, 0);}restoreCanvas(){// Get the canvas contextvar ctx = this.canvas;ctx.restore();}
}export default CanvasRenderer;

uniapp核心条码组件库

<template><view class="barcode" ><!-- #ifndef MP-ALIPAY --><canvas :canvas-id="elid" :id="elid"  type="2D" :style="{width:canvasWidth+'px',height:canvasHeight+'px'}" /><!-- #endif --><!-- #ifdef MP-ALIPAY --><canvas :id="elid" :width="canvasWidth" :height="canvasHeight" /><!-- #endif --></view>
</template><script>import JsBarcode from "./jsbarcode/JsBarcode.js"export default {data() {return {canvasWidth: 0,canvasHeight: 0,elid: this.$u.guid()}},props: {format:{type: String,default: 'CODE128'},text: {type: String,default: '123'},width: {type: Number,default: 2},height: {type: Number,default: 60},background: {type: String,default: '#ffffff'},fontSize:{type: Number,default: 20},margin:{type: Number,default: 5},// fontColor: {// 	type: String,// 	default: '#000000'// },lineColor: {type: String,default: '#000000'},displayValue: {type: Boolean,default: true},//bottom 或者 toptextPosition:{type: String,default: 'bottom'}	},// 在实例挂载完成后被立即调用//兼容非动态取值(二维码为固定内容)mounted() { this.renderCode()},watch: {text(newVal, oldVal) { //监测到text值发生改变时重新绘制this.renderCode()}},methods: {// 二维码生成工具renderCode() {let ctx = uni.createCanvasContext(this.elid,this)JsBarcode(ctx, this.text, {format:this.format,thiz:this,width:this.width,height:this.height,background:this.background,lineColor:this.lineColor,margin:this.margin,fontSize:this.fontSize,fontColor:this.fontColor,textPosition:this.textPosition,displayValue: this.displayValue});}}}
</script><style>.barcode {display: flex;align-items: center;justify-content: center;}
</style>

uniapp环境下预览效果

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/100904.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

三分钟解决AE缓存预览渲染错误、暂停、卡顿问题

一、清除RAM缓存&#xff08;内存&#xff09; 你应该做的第一件事是清除你的RAM。这将清除当前存储在内存中的所有临时缓存文件。要执行此操作&#xff0c;请导航到编辑>清除>所有内存。这将从头开始重置RAM缓存 二、清空磁盘缓存 您也可以尝试清空磁盘缓存。执行此操作…

武汉凯迪正大—变比组别测试仪

一、概述 在电力变压器的半成品、成品生产过程中&#xff0c;新安装的变压器投入运行之前以及根据国家电力部的预防性试验规程中&#xff0c;要求变压器进行匝数比或电压比测试。传统的变比电桥操作繁琐&#xff0c;读数不直观&#xff0c;且要进行必要的换算&#xff0c;测试时…

案例-基于MVC和三层架构实现商品表的增删改查

文章目录 0. 项目介绍1. 环境准备2. 查看所有2.1 编写BrandMapper接口2.2 编写服务类&#xff0c;创建BrandService&#xff0c;用于调用该方法2.5 编写Servlet2.4 编写brand.jsp页面2.5 测试 3.添加3.1 编写BrandMapper接口 添加方法3.2 编写服务3.3 改写Brand.jsp页面&#x…

springboot数据库密码加密的配置方法_Java

前言 由于系统安全的考虑&#xff0c;配置文件中不能出现明文密码的问题&#xff0c;本文就给大家详细介绍下springboot配置数据库密码加密的方法&#xff0c;下面话不多说了&#xff0c;来一起看看详细的介绍吧 1.导入依赖 <!--数据库密码加密--> <dependency>&…

学习ts(五)类

定义 是面向对象程序设计&#xff08;OOP&#xff09;实现信息封装的基础 类是一种用户定义的引用数据类型&#xff0c;也称类类型 JavaScript的class,虽然本质是构造函数&#xff0c;但是使用起来已经方便了许多&#xff0c;js中没有加入修饰符和抽象类等特性 ts的class支持面…

爬虫逆向实战(十九)--某号站登录

一、数据接口分析 主页地址&#xff1a;某号站 1、抓包 通过抓包可以发现登录接口 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”模块可以发现有一个jsondata_rsa的加密参数 请求头是否加密&#xff1f; 无响应是否加密&#xff1f; 无cookie是否…

C#和Java的大端位和小端位的问题

C#代码里就是小端序,Java代码里就是大端序&#xff0c; 大端位:big endian,是指数据的高字节保存在内存的低地址中&#xff0c;而数据的低字节保存在内存的高地址中&#xff0c;也叫高尾端 小端位:little endian,是指数据的高字节保存在内存的高地址中,而数据的低字节保存在内存…

【数字实验室】时钟切换

大部分开发者使用 BUFGCTRL 或 BUFGMUX进行时钟切换&#xff0c;它们在时钟切换上可以提供无毛刺输出。然而&#xff0c;了解所涉及的原理是有好处的。 当然&#xff0c;无论我们在同步逻辑中使用哪种技术&#xff0c;重要的是要确保在进行时钟切换时输出上没有毛刺。任何故障都…

【报错】yarn --version Unrecognized option: --version Error...

文章目录 问题分析解决问题 在使用 npm install -g yarn 全局安装 yarn 后,查看yarn 的版本号,报错如下 PS D:\global-data-display> yarn --version Unrecognized option: --version Error: Could

C++信息学奥赛2046:【例5.15】替换字母

这段代码的功能是对输入的字符串进行处理&#xff0c;将字符串中的字符 a 替换为字符 b 后输出结果。 #include<bits/stdc.h> using namespace std; int main() {string s; // 定义字符串变量s&#xff0c;用来存储输入的字符串char a, b; // 定义字符变量a和b&#xff…

pytest结合Excel实现接口自动化

前言 我们先来回顾下之前篇章“pytest通过parametrize方法实现数据驱动实战”&#xff0c;主要是通过yaml文件来读取测试用例。而我们用Excel文件存放测试用例又有什么区别呢&#xff1f; 毫无疑问&#xff0c;Pytest自动化测试框架也能读取Excel文件实现数据驱动。 还记得之…

innodb事务实现

事务的特性 ACID 事务的类别 事务实现 redo redoLog buffer 的格式 undo 更新主键 purge group commit 因为上层的binlog和底层的redolog要保持一致&#xff0c;所以 事务控制语句 事务隔离级别 分布式事务 事务习惯

酷开系统 | 酷开科技大数据,更好的与目标消费人群建立联系

众所周知&#xff0c;OTT的一大优势在于强曝光&#xff0c;能够给消费者带来强烈的视觉冲击&#xff0c;强化品牌认知。但是&#xff0c;要想达到提升品牌认知&#xff0c;首先要保证OTT的流量规模&#xff0c;实现对目标人群的有效覆盖。得年轻消费者得“天下”&#xff0c;年…

解决方案:fatal error: openssl/bio.h: 没有那个文件或目录

出现报错如下&#xff1a; 出现该错误的原因有两个&#xff1a; 没有安装openssl或者libssl-dev库Libssl-dev版本过高&#xff0c;需要降级 一. 没有安装openssl或者libssl-dev库 使用指令安装openssl&#xff1a; 我的是已经安装完成了&#xff0c;所以再把libssl-dev的库也…

SSM框架的学习与应用(Spring + Spring MVC + MyBatis)-Java EE企业级应用开发学习记录(第二天)Mybatis的深入学习

SSM框架的学习与应用(Spring Spring MVC MyBatis)-Java EE企业级应用开发学习记录&#xff08;第二天&#xff09;Mybatis的深入学习&#xff08;增删改查的操作&#xff09; 上一篇我们的项目搭建好了&#xff0c;也写了简答的Junit测试类进行测试&#xff0c;可以正确映射…

STM32--TIM定时器(2)

文章目录 输出比较PWM输出比较通道参数计算舵机简介直流电机简介TB6612 PWM基本结构PWM驱动呼吸灯PWM驱动舵机PWM控制电机 输出比较 输出比较&#xff0c;简称OC&#xff08;Output Compare&#xff09;。 输出比较的原理是&#xff0c;当定时器计数值与比较值相等或者满足某种…

C++学习系列之DLL动态库使用

C学习系列之DLL动态库使用 啰嗦动态库的创建动态库的调用函数生成1.需要头文件函数定义&#xff08;头文件&#xff09;2.需要函数定义&#xff08;函数文件&#xff09;3.动态库中的头文件4.动态库中的主文件5.运行查看是否存在C#的调用的入口点6.C#调用 总结 啰嗦 项目需要&…

数据结构,二叉树,前中后序遍历

二叉树的种类 最优二叉树 最优二叉树画法 排序取最小两个值和&#xff0c;得到新值加入排序重复1&#xff0c;2 前序、中序和后序遍历是树形数据结构&#xff08;如二叉树&#xff09;中常用的遍历方式&#xff0c;用于按照特定顺序遍历树的节点。这些遍历方式在不同应用中有不…

二、9.硬盘驱动程序

文件系统是运行在操作系统中的软件模块&#xff0c;是操作系统提供的一套管理磁盘文件读写的方法和数据组织、存储形式&#xff0c;因此&#xff0c;文件系统&#xff1d;数据结构&#xff0b;算法&#xff0c;哈哈&#xff0c;所以它是程序。它的管理对象是文件&#xff0c;管…

信号处理--基于EEG脑电信号的眼睛状态的分析

本实验为生物信息学专题设计小项目。项目目的是通过提供的14导联EEG 脑电信号&#xff0c;实现对于人体睁眼和闭眼两个状态的数据分类分析。每个脑电信号的时长大约为117秒。 目录 加载相关的库函数 读取脑电信号数据并查看数据的属性 绘制脑电多通道连接矩阵 绘制两类数据…