html2canvas

一. 现状 由于之前采用Lodop打印控件(商业版付费,可以使用免费版 但是会有水印)去打印小票，是一行一行的打印，但是不满足UI给到复杂布局的小票样式，所以得重新考虑如何来实现。 二. 介绍 art-template介绍 art-template 是一个简约、超快的模板引擎。 它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。 在线速度测试 。 中文文档： art-template中文文档 跟着文档首先熟悉一下，然后看一下语法，跟着语法去实践一下，很快就可以上手完成功能。 Lodop打印控件介绍 Lodop是支持浏览器端的web打印控件， 功能挺强大的。 官网地址： http://www.lodop.net/ 目前客户端有很多是基于浏览器内核套的壳，那么在需要特殊打印的场景下，可以试下这个控件。 三. 方案选择 方案一：用html+css进行网页布局，html2canvas.js 来实现将网页转换成图片，然后直接用Lodop打印图片， 但是经过测试，打印出来的图片模糊不清，而且html2canvas.js的兼容性IE>8，所以不符合 方案二：将这部分功能让后端去完成模板+数据渲染并生成图片去打印，但是发现跟方案一有相似的地方，解决不了图片打印模糊不清，但是可以解决兼容性问题，依然不符合 方案三

链接生成二维码 1.npm安装 npm install --save qrcodejs2 2.引入 import QRCode from 'qrcodejs2' 3.生成二维码 new QRCode('qrcode', { // 传入容器id text: url, // 链接（必填） width: 200, // 宽px height: 200, // 高px colorLight: '#F1F1F1' // 背景色 colorDark: '#F00', // 前景色 correctLevel: QRCode.CorrectLevel.L // 二维码可辨识度（L,M,Q,H） }) 4.代码演示： <style lang="less" scoped> #qrcode { width : 1.81rem ; height : 1.81rem ; padding : .15rem ; background : #F1F1F1 ; /deep/img{ width : 100% ; height : 100% ; } } </style> CSS < div id ="qrcode" ></ div > HTML // eslint-disable-next-line // 屏蔽下一行eslint报错 new QRCode('qrcode', { // 容器id text:

问题提出 1 前端上传图片很大，上传到服务器很慢，占用网络资源，降低用户体验 2 ios拍摄的照片（竖着拍） 会有角度改变 （图片对象信息里会有角度信息 该信息 不可更改 （待考证，因为我使用lrz 压缩 旋转了图片，但是传给服务端后，服务端接收到的是 正常的图片（例如没有旋转90度）但是 后端使用 图片处理api 获取到的图片信息是未经lrz旋转的图片信息）） 针对压缩问题 ，调研了前端压缩原理（将图片绘画在canvas上，进行等比缩放，在生成图片）8M--》1M左右 1 lrz：cnpm install lrz -S 有压缩（支持0-1比率压缩） 解决ios拍照旋转的问题（根据图片中的角度信息进行正确旋转） lrz 要触发自动旋转ios图片角度的功能 需要 自己手动引入 cnpm install exif-js -S Exif import Exif from "exif-js"; 2 image-conversion：cnpm install image-conversion -S 支持压缩 （1按比率压缩0-1 2 支持压缩到200kB（压缩道多大的压缩方式）） https://github.com/WangYuLue/image-conversion 图片合成 html2canvas ：cnpm install html2canvas -S （合并的图片url