1
This commit is contained in:
@@ -0,0 +1 @@
|
||||
export const cacheImageList = [];
|
||||
@@ -0,0 +1,59 @@
|
||||
export default {
|
||||
props: {
|
||||
// 二维码内容
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ()=> uni.$u.props.qrcode.value
|
||||
},
|
||||
// 选项
|
||||
options: {
|
||||
type: Object,
|
||||
default: ()=> uni.$u.props.qrcode.options
|
||||
},
|
||||
// 二维码大小
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: ()=> uni.$u.props.qrcode.size
|
||||
},
|
||||
// 导出的文件类型
|
||||
fileType: {
|
||||
type: String,
|
||||
default: ()=> uni.$u.props.qrcode.fileType
|
||||
},
|
||||
// 是否初始化组件后就开始生成
|
||||
start: {
|
||||
type: Boolean,
|
||||
default: ()=> uni.$u.props.qrcode.start
|
||||
},
|
||||
// 是否数据发生改变自动重绘
|
||||
auto: {
|
||||
type: Boolean,
|
||||
default: ()=> uni.$u.props.qrcode.auto
|
||||
},
|
||||
// 队列绘制，主要针对NVue端
|
||||
queue: {
|
||||
type: Boolean,
|
||||
default: ()=> uni.$u.props.qrcode.queue
|
||||
},
|
||||
// 是否队列加载图片，可减少canvas发起的网络资源请求，节省服务器资源
|
||||
isQueueLoadImage: {
|
||||
type: Boolean,
|
||||
default: ()=> uni.$u.props.qrcode.isQueueLoadImage
|
||||
},
|
||||
// loading态
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: ()=> uni.$u.props.qrcode.loading
|
||||
},
|
||||
// H5保存即自动下载（在支持的环境下），默认false为仅弹层提示用户需要长按图片保存，不会自动下载
|
||||
h5SaveIsDownload: {
|
||||
type: Boolean,
|
||||
default: ()=> uni.$u.props.qrcode.h5SaveIsDownload
|
||||
},
|
||||
// H5下载名称
|
||||
h5DownloadName: {
|
||||
type: String,
|
||||
default: ()=> uni.$u.props.qrcode.h5DownloadName
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,41 @@
|
||||
function Queue() {
|
||||
let waitingQueue = this.waitingQueue = [];
|
||||
let isRunning = this.isRunning = false; // 记录是否有未完成的任务
|
||||
|
||||
function execute(task, resolve, reject) {
|
||||
task()
|
||||
.then((data) => {
|
||||
resolve(data);
|
||||
})
|
||||
.catch((e) => {
|
||||
reject(e);
|
||||
})
|
||||
.finally(() => {
|
||||
// 等待任务队列中如果有任务，则触发它；否则设置isRunning = false,表示无任务状态
|
||||
if (waitingQueue.length) {
|
||||
const next = waitingQueue.shift();
|
||||
execute(next.task, next.resolve, next.reject);
|
||||
} else {
|
||||
isRunning = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
this.exec = function(task) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (isRunning) {
|
||||
waitingQueue.push({
|
||||
task,
|
||||
resolve,
|
||||
reject
|
||||
});
|
||||
} else {
|
||||
isRunning = true;
|
||||
execute(task, resolve, reject);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/* 队列实例，某些平台一起使用多个组件时需要通过队列逐一绘制，否则部分绘制方法异常，nvue端的iOS gcanvas尤其明显，在不通过队列绘制时会出现图片丢失的情况 */
|
||||
export const queueDraw = new Queue();
|
||||
export const queueLoadImage = new Queue();
|
||||
@@ -0,0 +1,935 @@
|
||||
<template>
|
||||
<view class="uqrcode"
|
||||
:style="{ width: $u.addUnit(templateOptions.width), height: $u.addUnit(templateOptions.height) }">
|
||||
<view class="uqrcode-canvas-wrapper">
|
||||
<!-- 画布 -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<canvas class="uqrcode-canvas" :id="canvasId" :canvas-id="canvasId" :type="canvasType" :style="{
|
||||
width: $u.addUnit(templateOptions.canvasWidth),
|
||||
height: $u.addUnit(templateOptions.canvasHeight),
|
||||
transform: templateOptions.canvasTransform
|
||||
}" v-if="templateOptions.canvasDisplay" @click="onClick"></canvas>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- nvue用gcanvas -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<gcanvas class="uqrcode-canvas" ref="gcanvas" :style="{
|
||||
width: $u.addUnit(templateOptions.canvasWidth),
|
||||
height: $u.addUnit(templateOptions.canvasHeight)
|
||||
}" v-if="templateOptions.canvasDisplay" @click="onClick"></gcanvas>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
|
||||
<!-- 加载效果 -->
|
||||
<view class="uqrcode-makeing" v-if="loading === undefined ? makeing : loading">
|
||||
<slot name="loading">
|
||||
<u-loading-icon></u-loading-icon>
|
||||
</slot>
|
||||
</view>
|
||||
|
||||
<!-- 错误处理 -->
|
||||
<view class="uqrcode-error" v-if="isError" @click="onClick">
|
||||
<slot name="error" :error="error">
|
||||
<text class="uqrcode-error-message">{{ error.errMsg }}</text>
|
||||
</slot>
|
||||
</view>
|
||||
|
||||
<!-- H5保存提示 -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="uqrcode-h5-save" v-if="isH5Save">
|
||||
<slot name="h5save" :tempFilePath="tempFilePath">
|
||||
<image class="uqrcode-h5-save-image" :src="tempFilePath"></image>
|
||||
<text class="uqrcode-h5-save-text">{{ h5SaveIsDownload ? '若保存失败，' : '' }}请长按二维码进行保存</text>
|
||||
</slot>
|
||||
<view class="uqrcode-h5-save-close" @click.stop="isH5Save = false">
|
||||
<view class="uqrcode-h5-save-close-before"></view>
|
||||
<view class="uqrcode-h5-save-close-after"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef VUE3
|
||||
import { toRaw } from 'vue';
|
||||
// #endif
|
||||
|
||||
/* 引入nvue所需模块 */
|
||||
// #ifdef APP-NVUE
|
||||
import { enable, WeexBridge } from '../../libs/gcanvas/index.js';
|
||||
const modal = weex.requireModule('modal');
|
||||
// #endif
|
||||
|
||||
import props from './props.js';
|
||||
import mixin from '../../libs/mixin/mixin'
|
||||
import mpMixin from '../../libs/mixin/mpMixin';
|
||||
import UQRCode from './qrcode.js';
|
||||
import { queueDraw, queueLoadImage} from './queue.js';
|
||||
import { cacheImageList } from './cache.js';
|
||||
|
||||
let instance = null;
|
||||
|
||||
/**
|
||||
* qrcode 二维码
|
||||
* @description 二维码生成插件，可扩展性高，它支持自定义渲染二维码，可通过uQRCode API得到二维码绘制关键信息后，使用canvas、svg或js操作dom的方式绘制二维码图案。还可自定义二维码样式，如随机颜色、圆点、方块、块与块之间的间距等。
|
||||
* @tutorial https://uview.d3u.cn/components/qrcode.html（https://uqrcode.cn/doc）
|
||||
*
|
||||
* @property {String} value 二维码内容 (start为true时必填 )
|
||||
* @property {Object} options 二维码配置选项 (data|size|errorCorrectLevel...)
|
||||
* @property {String} fileType 导出的文件类型 (jpg | png)
|
||||
* @property {String | Number} size 二维码尺寸
|
||||
* @property {String} start 是否初始化组件后就开始生成 (默认 true)
|
||||
* @property {String} auto 是否数据发生改变自动重绘 (默认 false)
|
||||
* @property {String} hide 隐藏组件。如果只需要导出二维码作为图片使用，可设置为true，不能在组件或组件父级元素设置v-if="false"、v-show="false"、style="display:none;"等实现隐藏效果，这样会导致导出二维码空白 (默认 false)
|
||||
* @property {String} queue 队列绘制 (默认 false)
|
||||
* @property {String} isQueueLoadImage 是否队列加载图片，选择true将通过队列缓存所需要加载的图片。优点是加载重复资源可减少资源请求次数，节省网络资源，缺点是会转化为同步请求，资源不重复且多的情况下，等待时间会更久。总之，请求重复资源较多则选择true，请求不重复资源较多则选择false (默认 false)
|
||||
* @property {String} loading loading态 (默认 false)
|
||||
* @property {String} h5SaveIsDownload H5保存即自动下载（在支持的环境下），默认false为仅弹层提示用户需要长按图片保存，不会自动下载 (默认 false)
|
||||
* @property {String} h5DownloadName H5下载名称
|
||||
* @property {String} h5SaveTip H5保存二维码时候是否显示提示
|
||||
* @example <u-qrcode ref="qrcode" size="200px" value="https://uview.d3u.cn"></u-qrcode>
|
||||
*/
|
||||
export default {
|
||||
name: 'u-qrcode',
|
||||
mixins: [mpMixin, mixin, props],
|
||||
data() {
|
||||
return {
|
||||
canvas: undefined,
|
||||
canvasId:uni.$u.guid(),
|
||||
// #ifdef MP-WEIXIN
|
||||
canvasType:'2d',
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
canvasType: 'normal',
|
||||
// #endif
|
||||
canvasContext: undefined,
|
||||
makeDelegate: undefined,
|
||||
drawDelegate: undefined,
|
||||
toTempFilePathDelegate: undefined,
|
||||
makeExecuted: false,
|
||||
makeing: false,
|
||||
drawing: false,
|
||||
isError: false,
|
||||
error: undefined,
|
||||
isH5Save: false,
|
||||
tempFilePath: '',
|
||||
templateOptions: {
|
||||
size: 0,
|
||||
width: 0, // 组件宽度
|
||||
height: 0,
|
||||
canvasWidth: 0, // canvas宽度
|
||||
canvasHeight: 0,
|
||||
canvasTransform: '',
|
||||
canvasDisplay: false
|
||||
},
|
||||
uqrcodeOptions: {
|
||||
data: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler() {
|
||||
if (this.auto) {
|
||||
this.remake();
|
||||
}
|
||||
}
|
||||
},
|
||||
size: {
|
||||
handler() {
|
||||
if (this.auto) {
|
||||
this.remake();
|
||||
}
|
||||
}
|
||||
},
|
||||
options: {
|
||||
handler() {
|
||||
if (this.auto) {
|
||||
this.remake();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.templateOptions.size = this.size;
|
||||
this.templateOptions.width = this.templateOptions.size;
|
||||
this.templateOptions.height = this.templateOptions.size;
|
||||
this.templateOptions.canvasWidth = this.templateOptions.size;
|
||||
this.templateOptions.canvasHeight = this.templateOptions.size;
|
||||
if (this.canvasType == '2d') {
|
||||
// #ifndef MP-WEIXIN
|
||||
this.templateOptions.canvasTransform = `scale(${this.templateOptions.size / this.templateOptions.canvasWidth}, ${this.templateOptions.size /
|
||||
this.templateOptions.canvasHeight})`;
|
||||
// #endif
|
||||
} else {
|
||||
this.templateOptions.canvasTransform = `scale(${this.templateOptions.size / this.templateOptions.canvasWidth}, ${this.templateOptions.size /
|
||||
this.templateOptions.canvasHeight})`;
|
||||
}
|
||||
if (this.start) {
|
||||
this.make();
|
||||
}
|
||||
},
|
||||
// #ifdef VUE3
|
||||
emits: ["click", "complete", "change"],
|
||||
// #endif
|
||||
methods: {
|
||||
/**
|
||||
* 获取模板选项
|
||||
*/
|
||||
getTemplateOptions() {
|
||||
var size = this.size;
|
||||
return deepReplace(this.templateOptions, {
|
||||
size,
|
||||
width: size,
|
||||
height: size
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取插件选项
|
||||
*/
|
||||
getUqrcodeOptions() {
|
||||
return deepReplace(this.options, {
|
||||
data: String(this.value),
|
||||
margin: this.margin,
|
||||
errorCorrectLevel: this.errorCorrectLevel,
|
||||
areaColor: this.areaColor,
|
||||
backgroundColor: this.backgroundColor,
|
||||
foregroundColor: this.foregroundColor,
|
||||
size: Number(this.templateOptions.size)
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 重置画布
|
||||
*/
|
||||
resetCanvas(callback) {
|
||||
this.templateOptions.canvasDisplay = false;
|
||||
this.$nextTick(() => {
|
||||
this.templateOptions.canvasDisplay = true;
|
||||
this.$nextTick(() => {
|
||||
callback && callback();
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 绘制二维码
|
||||
*/
|
||||
async draw(callback = {}, isDrawDelegate = false) {
|
||||
if (typeof callback.success != 'function') {
|
||||
callback.success = () => { };
|
||||
}
|
||||
if (typeof callback.fail != 'function') {
|
||||
callback.fail = () => { };
|
||||
}
|
||||
if (typeof callback.complete != 'function') {
|
||||
callback.complete = () => { };
|
||||
}
|
||||
|
||||
if (this.drawing) {
|
||||
if (!isDrawDelegate) {
|
||||
this.drawDelegate = () => {
|
||||
this.draw(callback, true);
|
||||
};
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
this.drawing = true;
|
||||
}
|
||||
|
||||
|
||||
if (!this.value) {
|
||||
console.error('[QRCode]: value must be set!');
|
||||
return;
|
||||
}
|
||||
|
||||
/* 组件数据 */
|
||||
this.templateOptions = this.getTemplateOptions();
|
||||
/* uQRCode选项 */
|
||||
this.uqrcodeOptions = this.getUqrcodeOptions();
|
||||
/* 纠错等级兼容字母写法 */
|
||||
if (typeof this.uqrcodeOptions.errorCorrectLevel === 'string') {
|
||||
this.uqrcodeOptions.errorCorrectLevel = UQRCode.errorCorrectLevel[this.uqrcodeOptions.errorCorrectLevel];
|
||||
}
|
||||
/* nvue不支持动态修改gcanvas尺寸，除nvue外，默认使用useDynamicSize */
|
||||
// #ifndef APP-NVUE
|
||||
if (typeof this.options.useDynamicSize === 'undefined') {
|
||||
this.uqrcodeOptions.useDynamicSize = true;
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
if (typeof this.options.useDynamicSize === 'undefined') {
|
||||
this.uqrcodeOptions.useDynamicSize = false;
|
||||
}
|
||||
|
||||
// if (typeof this.options.drawReserve === 'undefined') {
|
||||
// this.uqrcodeOptions.drawReserve = true;
|
||||
// }
|
||||
// #endif
|
||||
|
||||
if (this.options.foregroundImageBackgroundColor == '' || this.options.foregroundImageBackgroundColor == 'none') {
|
||||
this.uqrcodeOptions.foregroundImageBackgroundColor = 'rgba(255,255,255,0)';
|
||||
}
|
||||
|
||||
/* 获取uQRCode实例 */
|
||||
const qr = instance = new UQRCode();
|
||||
|
||||
/* 设置uQRCode选项 */
|
||||
qr.setOptions(this.uqrcodeOptions);
|
||||
/* 调用制作二维码方法 */
|
||||
qr.make();
|
||||
|
||||
/* 获取canvas上下文 */
|
||||
let canvasContext = null;
|
||||
// #ifndef APP-NVUE
|
||||
if (this.canvasType === '2d') {
|
||||
// #ifdef MP-WEIXIN
|
||||
/* 微信小程序获取canvas2d上下文方式 */
|
||||
const canvas = (this.canvas = await new Promise(resolve => {
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.in(this) // 在组件内使用需要
|
||||
.select(`#${this.canvasId}`)
|
||||
.fields({
|
||||
node: true,
|
||||
size: true
|
||||
})
|
||||
.exec(res => {
|
||||
resolve(res[0].node);
|
||||
});
|
||||
}));
|
||||
canvasContext = this.canvasContext = canvas.getContext('2d');
|
||||
/* 2d的组件设置宽高与实际canvas绘制宽高不是一个，打个比方，组件size=200，canvas.width设置为100，那么绘制出来就是100=200，组件size=400，canvas.width设置为800，绘制大小还是800=400，所以无需理会下方返回的dynamicSize是多少，按dpr重新赋值给canvas即可 */
|
||||
this.templateOptions.canvasWidth = qr.size;
|
||||
this.templateOptions.canvasHeight = qr.size;
|
||||
this.templateOptions.canvasTransform = '';
|
||||
/* 使用dynamicSize+scale，可以解决小块间出现白线问题，dpr可以解决模糊问题 */
|
||||
const dpr = uni.$u.window().pixelRatio;
|
||||
canvas.width = qr.dynamicSize * dpr;
|
||||
canvas.height = qr.dynamicSize * dpr;
|
||||
canvasContext.scale(dpr, dpr);
|
||||
/* 微信小程序获取图像方式 */
|
||||
qr.loadImage = this.getLoadImage(function (src) {
|
||||
/* 小程序下获取网络图片信息需先配置download域名白名单才能生效 */
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = canvas.createImage();
|
||||
img.src = src;
|
||||
img.onload = () => {
|
||||
resolve(img);
|
||||
};
|
||||
img.onerror = err => {
|
||||
reject(err);
|
||||
};
|
||||
});
|
||||
});
|
||||
// #endif
|
||||
|
||||
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
/* 非微信小程序不支持2d，切换回uniapp获取canvas上下文方式 */
|
||||
|
||||
// #ifdef MP-ALIPAY
|
||||
canvasContext = this.canvasContext = uni.createCanvasContext(this.canvasId);
|
||||
// #endif
|
||||
// #ifndef MP-ALIPAY
|
||||
canvasContext = this.canvasContext = uni.createCanvasContext(this.canvasId, this);
|
||||
// #endif
|
||||
|
||||
/* 使用dynamicSize，可以解决小块间出现白线问题，再通过scale缩放至size，使其达到所设尺寸 */
|
||||
this.templateOptions.canvasWidth = qr.dynamicSize;
|
||||
this.templateOptions.canvasHeight = qr.dynamicSize;
|
||||
this.templateOptions.canvasTransform = `scale(${this.templateOptions.size / this.templateOptions.canvasWidth}, ${this.templateOptions.size /
|
||||
this.templateOptions.canvasHeight})`;
|
||||
/* uniapp获取图像方式 */
|
||||
qr.loadImage = this.getLoadImage(function (src) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (src.startsWith('http')) {
|
||||
uni.getImageInfo({
|
||||
src,
|
||||
success: res => {
|
||||
resolve(res.path);
|
||||
},
|
||||
fail: err => {
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (src.startsWith('.')) {
|
||||
console.error('[uQRCode]: 本地图片路径仅支持绝对路径！');
|
||||
throw new Error('[uQRCode]: local image path only supports absolute path!');
|
||||
} else {
|
||||
resolve(src);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
/* uniapp获取canvas上下文方式 */
|
||||
// #ifdef MP-ALIPAY
|
||||
canvasContext = this.canvasContext = uni.createCanvasContext(this.canvasId);
|
||||
// #endif
|
||||
// #ifndef MP-ALIPAY
|
||||
canvasContext = this.canvasContext = uni.createCanvasContext(this.canvasId, this);
|
||||
// #endif
|
||||
/* 使用dynamicSize，可以解决小块间出现白线问题，再通过scale缩放至size，使其达到所设尺寸 */
|
||||
this.templateOptions.canvasWidth = qr.dynamicSize;
|
||||
this.templateOptions.canvasHeight = qr.dynamicSize;
|
||||
this.templateOptions.canvasTransform = `scale(${this.templateOptions.size / this.templateOptions.canvasWidth}, ${this.templateOptions.size /
|
||||
this.templateOptions.canvasHeight})`;
|
||||
/* uniapp获取图像方式 */
|
||||
qr.loadImage = this.getLoadImage(function (src) {
|
||||
return new Promise((resolve, reject) => {
|
||||
/* getImageInfo在微信小程序的bug：本地路径返回路径会把开头的/或../移除，导致路径错误，解决方法：限制只能使用绝对路径 */
|
||||
if (src.startsWith('http')) {
|
||||
uni.getImageInfo({
|
||||
src,
|
||||
success: res => {
|
||||
resolve(res.path);
|
||||
},
|
||||
fail: err => {
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (src.startsWith('.')) {
|
||||
console.error('[uQRCode]: 本地图片路径仅支持绝对路径！');
|
||||
throw new Error('[uQRCode]: local image path only supports absolute path!');
|
||||
} else {
|
||||
resolve(src);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
/* NVue获取canvas上下文方式 */
|
||||
const gcanvas = this.$refs['gcanvas'];
|
||||
const canvas = enable(gcanvas, {
|
||||
bridge: WeexBridge
|
||||
});
|
||||
canvasContext = this.canvasContext = canvas.getContext('2d');
|
||||
/* NVue获取图像方式 */
|
||||
qr.loadImage = this.getLoadImage(function (src) {
|
||||
return new Promise((resolve, reject) => {
|
||||
/* getImageInfo在nvue的bug：获取同一个路径的图片信息，同一时间第一次获取成功，后续失败，猜测是写入本地时产生文件写入冲突，所以没有返回，特别是对于网络资源 --- 已实现队列绘制，已解决此问题 */
|
||||
if (src.startsWith('.')) {
|
||||
console.error('[uQRCode]: 本地图片路径仅支持绝对路径！');
|
||||
throw new Error('[uQRCode]: local image path only supports absolute path!');
|
||||
} else {
|
||||
uni.getImageInfo({
|
||||
src,
|
||||
success: res => {
|
||||
resolve(res.path);
|
||||
},
|
||||
fail: err => {
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
// #endif
|
||||
|
||||
/* 设置uQRCode实例的canvas上下文 */
|
||||
qr.canvasContext = canvasContext;
|
||||
/* 延时等待页面重新绘制完毕 */
|
||||
setTimeout(() => {
|
||||
/* 从插件获取具体要调用哪一个扩展函数 */
|
||||
var drawCanvasName = 'drawCanvas';
|
||||
|
||||
/* 虽然qr[drawCanvasName]是直接返回Promise的，但由于js内部this指向问题，故不能直接exec(qr[drawCanvasName])此方式执行，需要改成exec(() => qr[drawCanvasName]())才能正确获取this */
|
||||
var drawCanvas;
|
||||
if (this.queue) {
|
||||
drawCanvas = () => queueDraw.exec(() => qr[drawCanvasName]());
|
||||
// drawCanvas = () => queueDraw.exec(() => new Promise((resolve, reject) => {
|
||||
// setTimeout(() => {
|
||||
// qr[drawCanvasName]().then(resolve).catch(reject);
|
||||
// }, 1000);
|
||||
// }));
|
||||
} else {
|
||||
drawCanvas = () => qr[drawCanvasName]();
|
||||
}
|
||||
/* 调用绘制方法将二维码图案绘制到canvas上 */
|
||||
drawCanvas()
|
||||
.then(() => {
|
||||
if (this.drawDelegate) {
|
||||
/* 高频重绘纠正 */
|
||||
let delegate = this.drawDelegate;
|
||||
this.drawDelegate = undefined;
|
||||
delegate();
|
||||
} else {
|
||||
this.drawing = false;
|
||||
callback.success();
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
if (this.drawDelegate) {
|
||||
/* 高频重绘纠正 */
|
||||
let delegate = this.drawDelegate;
|
||||
this.drawDelegate = undefined;
|
||||
delegate();
|
||||
} else {
|
||||
this.drawing = false;
|
||||
this.isError = true;
|
||||
callback.fail(err);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
callback.complete();
|
||||
});
|
||||
}, 300);
|
||||
},
|
||||
/**
|
||||
* 生成二维码
|
||||
*/
|
||||
make(callback = {}) {
|
||||
this.makeExecuted = true;
|
||||
this.makeing = true;
|
||||
this.isError = false;
|
||||
|
||||
if (typeof callback.success != 'function') {
|
||||
callback.success = () => { };
|
||||
}
|
||||
if (typeof callback.fail != 'function') {
|
||||
callback.fail = () => { };
|
||||
}
|
||||
if (typeof callback.complete != 'function') {
|
||||
callback.complete = () => { };
|
||||
}
|
||||
|
||||
this.resetCanvas(() => {
|
||||
clearTimeout(this.makeDelegate);
|
||||
this.makeDelegate = setTimeout(() => {
|
||||
this.draw({
|
||||
success: () => {
|
||||
setTimeout(() => {
|
||||
callback.success();
|
||||
this.complete(true);
|
||||
}, 300);
|
||||
},
|
||||
fail: err => {
|
||||
callback.fail(err);
|
||||
this.error = err;
|
||||
this.complete(false, err.errMsg);
|
||||
},
|
||||
complete: () => {
|
||||
callback.complete();
|
||||
this.makeing = false;
|
||||
}
|
||||
});
|
||||
}, 300);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 重新生成
|
||||
*/
|
||||
remake(callback) {
|
||||
this.$emit('change');
|
||||
this.make(callback);
|
||||
},
|
||||
/**
|
||||
* 生成完成
|
||||
*/
|
||||
complete(success = true, errMsg = '') {
|
||||
if (success) {
|
||||
this.$emit('complete', {
|
||||
success
|
||||
});
|
||||
} else {
|
||||
this.$emit('complete', {
|
||||
success,
|
||||
errMsg
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 导出临时路径
|
||||
*/
|
||||
toTempFilePath(callback = {}) {
|
||||
if (typeof callback.success != 'function') {
|
||||
callback.success = () => { };
|
||||
}
|
||||
if (typeof callback.fail != 'function') {
|
||||
callback.fail = () => { };
|
||||
}
|
||||
if (typeof callback.complete != 'function') {
|
||||
callback.complete = () => { };
|
||||
}
|
||||
|
||||
if (!this.makeExecuted) {
|
||||
console.error('[uQRCode]: make() 方法从未调用！请先成功调用 make() 后再进行操作。');
|
||||
var err = {
|
||||
errMsg: '[uQRCode]: make() method has never been executed! please execute make() successfully before operating.'
|
||||
};
|
||||
callback.fail(err);
|
||||
callback.complete(err);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isError) {
|
||||
callback.fail(this.error);
|
||||
callback.complete(this.error);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.makeing) {
|
||||
/* 如果还在生成状态，那当前操作将托管到委托，监听生成完成后再通过委托复调当前方法 */
|
||||
this.toTempFilePathDelegate = () => {
|
||||
this.toTempFilePath(callback);
|
||||
};
|
||||
return;
|
||||
} else {
|
||||
this.toTempFilePathDelegate = null;
|
||||
}
|
||||
|
||||
// #ifndef APP-NVUE
|
||||
if (this.canvasType === '2d') {
|
||||
// #ifdef MP-WEIXIN
|
||||
try {
|
||||
let dataURL = null;
|
||||
// #ifdef VUE3
|
||||
dataURL = toRaw(this.canvas)
|
||||
.toDataURL();
|
||||
// #endif
|
||||
// #ifndef VUE3
|
||||
dataURL = this.canvas.toDataURL();
|
||||
// #endif
|
||||
callback.success({
|
||||
tempFilePath: dataURL
|
||||
});
|
||||
callback.complete({
|
||||
tempFilePath: dataURL
|
||||
});
|
||||
} catch (e) {
|
||||
callback.fail(e);
|
||||
callback.complete(e);
|
||||
}
|
||||
// #endif
|
||||
} else {
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: this.canvasId,
|
||||
fileType: this.fileType,
|
||||
width: Number(this.templateOptions.canvasWidth),
|
||||
height: Number(this.templateOptions.canvasHeight),
|
||||
destWidth: Number(this.templateOptions.size),
|
||||
destHeight: Number(this.templateOptions.size),
|
||||
success: res => {
|
||||
callback.success(res);
|
||||
},
|
||||
fail: err => {
|
||||
callback.fail(err);
|
||||
},
|
||||
complete: () => {
|
||||
callback.complete();
|
||||
}
|
||||
},
|
||||
this
|
||||
);
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
const dpr = uni.$u.window().pixelRatio;
|
||||
this.canvasContext.toTempFilePath(
|
||||
0,
|
||||
0,
|
||||
this.templateOptions.canvasWidth * dpr,
|
||||
this.templateOptions.canvasHeight * dpr,
|
||||
this.templateOptions.size * dpr,
|
||||
this.templateOptions.size * dpr,
|
||||
'',
|
||||
1,
|
||||
res => {
|
||||
callback.success(res);
|
||||
callback.complete(res);
|
||||
}
|
||||
);
|
||||
// #endif
|
||||
},
|
||||
/**
|
||||
* 保存
|
||||
*/
|
||||
save(callback = {}) {
|
||||
if (typeof callback.success != 'function') {
|
||||
callback.success = () => { };
|
||||
}
|
||||
if (typeof callback.fail != 'function') {
|
||||
callback.fail = () => { };
|
||||
}
|
||||
if (typeof callback.complete != 'function') {
|
||||
callback.complete = () => { };
|
||||
}
|
||||
|
||||
this.toTempFilePath({
|
||||
success: res => {
|
||||
// #ifndef H5
|
||||
if (this.canvasType === '2d') {
|
||||
// #ifdef MP-WEIXIN
|
||||
/* 需要将 data:image/png;base64, 这段去除 writeFile 才能正常打开文件，否则是损坏文件，无法打开 */
|
||||
const reg = new RegExp('^data:image/png;base64,', 'g');
|
||||
const dataURL = res.tempFilePath.replace(reg, '');
|
||||
const fs = wx.getFileSystemManager();
|
||||
const tempFilePath = `${wx.env.USER_DATA_PATH}/${new Date().getTime()}${Math.random()
|
||||
.toString()
|
||||
.split('.')[1]
|
||||
}.png`;
|
||||
fs.writeFile({
|
||||
filePath: tempFilePath, // 要写入的文件路径 (本地路径)
|
||||
data: dataURL, // base64图片
|
||||
encoding: 'base64',
|
||||
success: res1 => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: tempFilePath,
|
||||
success: res2 => {
|
||||
callback.success(res2);
|
||||
},
|
||||
fail: err2 => {
|
||||
callback.fail(err2);
|
||||
},
|
||||
complete: () => {
|
||||
callback.complete();
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: err => {
|
||||
callback.fail(err);
|
||||
},
|
||||
complete: () => {
|
||||
callback.complete();
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: res1 => {
|
||||
callback.success(res1);
|
||||
},
|
||||
fail: err1 => {
|
||||
callback.fail(err1);
|
||||
},
|
||||
complete: () => {
|
||||
callback.complete();
|
||||
}
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
/* 可以在电脑浏览器下载，移动端iOS不行，安卓微信浏览器不行，安卓外部浏览器可以 */
|
||||
this.isH5Save = true;
|
||||
this.tempFilePath = res.tempFilePath;
|
||||
if (this.h5SaveIsDownload) {
|
||||
const aEle = document.createElement('a');
|
||||
aEle.download = this.h5DownloadName; // 设置下载的文件名，默认是'下载'
|
||||
aEle.href = res.tempFilePath;
|
||||
document.body.appendChild(aEle);
|
||||
aEle.click();
|
||||
aEle.remove(); // 下载之后把创建的元素删除
|
||||
}
|
||||
callback.success({
|
||||
errMsg: 'ok'
|
||||
});
|
||||
callback.complete({
|
||||
errMsg: 'ok'
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
fail: err => {
|
||||
callback.fail(err);
|
||||
callback.complete(err);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 注册click事件
|
||||
*/
|
||||
onClick(e) {
|
||||
this.$emit('click', e);
|
||||
},
|
||||
/**
|
||||
* 获取实例
|
||||
*/
|
||||
getInstance() {
|
||||
return instance;
|
||||
},
|
||||
|
||||
getLoadImage(loadImage) {
|
||||
var that = this;
|
||||
if (typeof loadImage == 'function') {
|
||||
return function (src) {
|
||||
/* 判断是否是队列加载图片的 */
|
||||
if (that.isQueueLoadImage) {
|
||||
/* 解决iOS APP||NVUE同时绘制多个二维码导致图片丢失需使用队列 */
|
||||
return queueLoadImage.exec(() => {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
const cache = cacheImageList.find(x => x.src == src);
|
||||
if (cache) {
|
||||
resolve(cache.img);
|
||||
} else {
|
||||
loadImage(src)
|
||||
.then(img => {
|
||||
cacheImageList.push({
|
||||
src,
|
||||
img
|
||||
});
|
||||
resolve(img);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
}
|
||||
}, 10);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
return loadImage(src);
|
||||
}
|
||||
};
|
||||
} else {
|
||||
return function (src) {
|
||||
return Promise.resolve(src);
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 对象属性深度替换
|
||||
* @param {Object} o 原始对象/默认对象/被替换的对象
|
||||
* @param {Object} r 从这个对象里取值替换到o对象里
|
||||
* @return {Object} 替换后的新对象
|
||||
*/
|
||||
function deepReplace(o = {}, r = {}, c = false) {
|
||||
let obj;
|
||||
if (c) {
|
||||
// 从源替换
|
||||
obj = o;
|
||||
} else {
|
||||
// 不替换源，copy一份备份来替换
|
||||
obj = {
|
||||
...o
|
||||
};
|
||||
}
|
||||
for (let k in r) {
|
||||
var vr = r[k];
|
||||
if (vr != undefined) {
|
||||
if (vr.constructor == Object) {
|
||||
obj[k] = this.deepReplace(obj[k], vr);
|
||||
} else if (vr.constructor == String && !vr) {
|
||||
obj[k] = obj[k];
|
||||
} else {
|
||||
obj[k] = vr;
|
||||
}
|
||||
}
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.uqrcode {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.uqrcode-canvas {
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
.uqrcode-makeing {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uqrcode-error {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uqrcode-error-message {
|
||||
font-size: 12px;
|
||||
color: #939291;
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
.uqrcode-h5-save {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
background-color: rgba(0, 0, 0, 0.68);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uqrcode-h5-save-image {
|
||||
width: 512rpx;
|
||||
height: 512rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.uqrcode-h5-save-text {
|
||||
margin-top: 20rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.uqrcode-h5-save-close {
|
||||
position: relative;
|
||||
margin-top: 72rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: 2rpx solid #ffffff;
|
||||
border-radius: 60rpx;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.uqrcode-h5-save-close-before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
width: 40rpx;
|
||||
height: 4rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.uqrcode-h5-save-close-after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
width: 40rpx;
|
||||
height: 4rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
Reference in New Issue
Block a user