封装测试
parent
15dd186cb9
commit
29498a07a3
|
|
@ -1,26 +1,63 @@
|
|||
const formatTime = date => {
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
const hour = date.getHours()
|
||||
const minute = date.getMinutes()
|
||||
const second = date.getSeconds()
|
||||
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
|
||||
}
|
||||
const formatDate = date => {
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
|
||||
|
||||
return [year, month, day].map(formatNumber).join('-')
|
||||
}
|
||||
const formatNumber = n => {
|
||||
n = n.toString()
|
||||
return n[1] ? n : '0' + n
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
formatTime: formatTime,
|
||||
formatDate: formatDate
|
||||
module.exports = {
|
||||
formatTime(date) {
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
const hour = date.getHours()
|
||||
const minute = date.getMinutes()
|
||||
const second = date.getSeconds()
|
||||
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(
|
||||
':')
|
||||
},
|
||||
formatDate(date) {
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
|
||||
|
||||
return [year, month, day].map(formatNumber).join('-')
|
||||
},
|
||||
formatNumber(n) {
|
||||
n = n.toString()
|
||||
return n[1] ? n : '0' + n
|
||||
},
|
||||
|
||||
compress(base64String, w, quality) {
|
||||
console.log(base64String.length);
|
||||
var getMimeType = (urlData) => {
|
||||
var arr = urlData.split(",");
|
||||
var mime = arr[0].match(/:(.*?);/)[1];
|
||||
// return mime.replace("image/", "");
|
||||
return mime;
|
||||
};
|
||||
var newImage = new Image();
|
||||
var imgWidth, imgHeight;
|
||||
|
||||
var promise = new Promise((resolve) => (newImage.onload = resolve));
|
||||
newImage.src = base64String;
|
||||
return promise.then(() => {
|
||||
imgWidth = newImage.width;
|
||||
imgHeight = newImage.height;
|
||||
var canvas = document.createElement("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
if (Math.max(imgWidth, imgHeight) > w) {
|
||||
if (imgWidth > imgHeight) {
|
||||
canvas.width = w;
|
||||
canvas.height = (w * imgHeight) / imgWidth;
|
||||
} else {
|
||||
canvas.height = w;
|
||||
canvas.width = (w * imgWidth) / imgHeight;
|
||||
}
|
||||
} else {
|
||||
canvas.width = imgWidth;
|
||||
canvas.height = imgHeight;
|
||||
}
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
|
||||
var base64 = canvas.toDataURL(getMimeType(base64String), quality);
|
||||
console.log(base64);
|
||||
return base64;
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
46
package.json
46
package.json
|
|
@ -1,23 +1,27 @@
|
|||
{
|
||||
"id": "fjj-condition",
|
||||
"name": "tongtong-条件筛选",
|
||||
"version": "1.0.6",
|
||||
"description": "支持单选多选筛选、日期范围筛选、数量或金额范围筛选， 兼容h5、微信小程序、其它端未测试",
|
||||
"keywords": [
|
||||
"筛选",
|
||||
"条件筛选",
|
||||
"多选",
|
||||
"单选",
|
||||
"日期筛选"
|
||||
],
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"uuid": "^9.0.0",
|
||||
"vant": "^2.12.54"
|
||||
}
|
||||
"id": "fjj-condition",
|
||||
"name": "tongtong-条件筛选",
|
||||
"version": "1.0.6",
|
||||
"description": "支持单选多选筛选、日期范围筛选、数量或金额范围筛选， 兼容h5、微信小程序、其它端未测试",
|
||||
"keywords": [
|
||||
"筛选",
|
||||
"条件筛选",
|
||||
"多选",
|
||||
"单选",
|
||||
"日期筛选"
|
||||
],
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"imagemin": "^8.0.1",
|
||||
"imagemin-mozjpeg": "^10.0.0",
|
||||
"imagemin-pngquant": "^9.0.2",
|
||||
"imagemin-svgo": "^10.0.1",
|
||||
"uuid": "^9.0.0",
|
||||
"vant": "^2.12.54"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,220 +1,222 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
|
||||
<view class="sign-box">
|
||||
<canvas class="mycanvas" :style="{width:width +'px',height:height +'px'}" canvas-id="mycanvas"
|
||||
@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
|
||||
|
||||
<canvas canvas-id="camCacnvs" :style="{width:height +'px',height:width +'px'}" class="canvsborder"></canvas>
|
||||
|
||||
</view>
|
||||
<view class="sigh-btns">
|
||||
<van-button class="btn" type="default" @tap="handleCancel">取消</van-button>
|
||||
<van-button class="btn" type="default" @tap="handleReset">重写</van-button>
|
||||
<van-button class="btn" type="default" @tap="handleConfirm">确认</van-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
var x = 20;
|
||||
var y = 20;
|
||||
var tempPoint = []; //用来存放当前画纸上的轨迹点
|
||||
var id = 0;
|
||||
var type = '';
|
||||
let that;
|
||||
let canvasw;
|
||||
let canvash;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ctx: '', //绘图图像
|
||||
points: [], //路径点集合,
|
||||
width: 0,
|
||||
height: 0
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
onLoad(option) {
|
||||
that = this;
|
||||
console.log(option);
|
||||
id = option.id;
|
||||
type = option.type;
|
||||
this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
|
||||
//设置画笔样式
|
||||
this.ctx.lineWidth = 4;
|
||||
this.ctx.lineCap = 'round';
|
||||
this.ctx.lineJoin = 'round';
|
||||
|
||||
uni.getSystemInfo({
|
||||
success: function(res) {
|
||||
console.log(res);
|
||||
that.width = res.windowWidth * 0.8;
|
||||
that.height = res.windowHeight * 0.85;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
//触摸开始，获取到起点
|
||||
touchstart: function(e) {
|
||||
let startX = e.changedTouches[0].x;
|
||||
let startY = e.changedTouches[0].y;
|
||||
let startPoint = {
|
||||
X: startX,
|
||||
Y: startY
|
||||
};
|
||||
|
||||
/* **************************************************
|
||||
#由于uni对canvas的实现有所不同，这里需要把起点存起来
|
||||
* **************************************************/
|
||||
this.points.push(startPoint);
|
||||
|
||||
//每次触摸开始，开启新的路径
|
||||
this.ctx.beginPath();
|
||||
},
|
||||
|
||||
//触摸移动，获取到路径点
|
||||
touchmove: function(e) {
|
||||
let moveX = e.changedTouches[0].x;
|
||||
let moveY = e.changedTouches[0].y;
|
||||
let movePoint = {
|
||||
X: moveX,
|
||||
Y: moveY
|
||||
};
|
||||
this.points.push(movePoint); //存点
|
||||
let len = this.points.length;
|
||||
if (len >= 2) {
|
||||
this.draw(); //绘制路径
|
||||
}
|
||||
tempPoint.push(movePoint);
|
||||
},
|
||||
|
||||
// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
|
||||
touchend: function() {
|
||||
this.points = [];
|
||||
},
|
||||
|
||||
/* ***********************************************
|
||||
# 绘制笔迹
|
||||
# 1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
|
||||
# 2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
|
||||
# 3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
|
||||
************************************************ */
|
||||
draw: function() {
|
||||
let point1 = this.points[0];
|
||||
let point2 = this.points[1];
|
||||
this.points.shift();
|
||||
this.ctx.moveTo(point1.X, point1.Y);
|
||||
this.ctx.lineTo(point2.X, point2.Y);
|
||||
this.ctx.stroke();
|
||||
this.ctx.draw(true);
|
||||
},
|
||||
|
||||
handleCancel() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
|
||||
//清空画布
|
||||
handleReset: function() {
|
||||
console.log('handleReset');
|
||||
that.ctx.clearRect(0, 0, that.width, that.height);
|
||||
that.ctx.draw(true);
|
||||
tempPoint = [];
|
||||
},
|
||||
|
||||
//将签名笔迹上传到服务器，并将返回来的地址存到本地
|
||||
handleConfirm: function() {
|
||||
if (tempPoint.length == 0) {
|
||||
uni.showToast({
|
||||
title: '请先签名',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'mycanvas',
|
||||
success: function(res) {
|
||||
let tempPath = res.tempFilePath;
|
||||
console.log(tempPath)
|
||||
|
||||
const ctx = uni.createCanvasContext('camCacnvs', that);
|
||||
ctx.translate(0, that.width);
|
||||
ctx.rotate((-90 * Math.PI) / 180);
|
||||
ctx.drawImage(tempPath, 0, 0, that.width, that.height);
|
||||
ctx.draw();
|
||||
setTimeout(() => {
|
||||
|
||||
//保存签名图片到本地
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'camCacnvs',
|
||||
success: function(res) {
|
||||
//这是签名图片文件的本地临时地址
|
||||
let path = res.tempFilePath;
|
||||
|
||||
},
|
||||
fail: err => {
|
||||
console.log('fail', err);
|
||||
}
|
||||
},
|
||||
this
|
||||
);
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
height: calc(100vh - 44px);
|
||||
padding-bottom: 30px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.sign-box {
|
||||
width: 80%;
|
||||
height: 90%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sign-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sigh-btns {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 30px 10px 0;
|
||||
}
|
||||
|
||||
/deep/.van-button {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.mycanvas {
|
||||
margin: auto 0rpx;
|
||||
background-color: #ececec;
|
||||
}
|
||||
|
||||
.canvsborder {
|
||||
border: 1rpx solid #333;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 10000rpx;
|
||||
}
|
||||
<template>
|
||||
<view class="container">
|
||||
|
||||
<view class="sign-box">
|
||||
<canvas class="mycanvas" :style="{width:width +'px',height:height +'px'}" canvas-id="mycanvas"
|
||||
@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
|
||||
|
||||
<canvas canvas-id="camCacnvs" :style="{width:height +'px',height:width +'px'}" class="canvsborder"></canvas>
|
||||
|
||||
</view>
|
||||
<view class="sigh-btns">
|
||||
<van-button class="btn" type="default" @tap="handleCancel">取消</van-button>
|
||||
<van-button class="btn" type="default" @tap="handleReset">重写</van-button>
|
||||
<van-button class="btn" type="default" @tap="handleConfirm">确认</van-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import utils from '@/common/util.js';
|
||||
var x = 20;
|
||||
var y = 20;
|
||||
var tempPoint = []; //用来存放当前画纸上的轨迹点
|
||||
var id = 0;
|
||||
var type = '';
|
||||
let that;
|
||||
let canvasw;
|
||||
let canvash;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ctx: '', //绘图图像
|
||||
points: [], //路径点集合,
|
||||
width: 0,
|
||||
height: 0
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
onLoad(option) {
|
||||
that = this;
|
||||
console.log(option);
|
||||
id = option.id;
|
||||
type = option.type;
|
||||
this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
|
||||
//设置画笔样式
|
||||
this.ctx.lineWidth = 4;
|
||||
this.ctx.lineCap = 'round';
|
||||
this.ctx.lineJoin = 'round';
|
||||
|
||||
uni.getSystemInfo({
|
||||
success: function(res) {
|
||||
console.log(res);
|
||||
that.width = res.windowWidth * 0.8;
|
||||
that.height = res.windowHeight * 0.85;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
//触摸开始，获取到起点
|
||||
touchstart: function(e) {
|
||||
let startX = e.changedTouches[0].x;
|
||||
let startY = e.changedTouches[0].y;
|
||||
let startPoint = {
|
||||
X: startX,
|
||||
Y: startY
|
||||
};
|
||||
|
||||
/* **************************************************
|
||||
#由于uni对canvas的实现有所不同，这里需要把起点存起来
|
||||
* **************************************************/
|
||||
this.points.push(startPoint);
|
||||
|
||||
//每次触摸开始，开启新的路径
|
||||
this.ctx.beginPath();
|
||||
},
|
||||
|
||||
//触摸移动，获取到路径点
|
||||
touchmove: function(e) {
|
||||
let moveX = e.changedTouches[0].x;
|
||||
let moveY = e.changedTouches[0].y;
|
||||
let movePoint = {
|
||||
X: moveX,
|
||||
Y: moveY
|
||||
};
|
||||
this.points.push(movePoint); //存点
|
||||
let len = this.points.length;
|
||||
if (len >= 2) {
|
||||
this.draw(); //绘制路径
|
||||
}
|
||||
tempPoint.push(movePoint);
|
||||
},
|
||||
|
||||
// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
|
||||
touchend: function() {
|
||||
this.points = [];
|
||||
},
|
||||
|
||||
/* ***********************************************
|
||||
# 绘制笔迹
|
||||
# 1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
|
||||
# 2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
|
||||
# 3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
|
||||
************************************************ */
|
||||
draw: function() {
|
||||
let point1 = this.points[0];
|
||||
let point2 = this.points[1];
|
||||
this.points.shift();
|
||||
this.ctx.moveTo(point1.X, point1.Y);
|
||||
this.ctx.lineTo(point2.X, point2.Y);
|
||||
this.ctx.stroke();
|
||||
this.ctx.draw(true);
|
||||
},
|
||||
|
||||
handleCancel() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
|
||||
//清空画布
|
||||
handleReset: function() {
|
||||
console.log('handleReset');
|
||||
that.ctx.clearRect(0, 0, that.width, that.height);
|
||||
that.ctx.draw(true);
|
||||
tempPoint = [];
|
||||
},
|
||||
|
||||
//将签名笔迹上传到服务器，并将返回来的地址存到本地
|
||||
handleConfirm: function() {
|
||||
if (tempPoint.length == 0) {
|
||||
uni.showToast({
|
||||
title: '请先签名',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'mycanvas',
|
||||
success: function(res) {
|
||||
let tempPath = res.tempFilePath;
|
||||
console.log(tempPath,'压缩前')
|
||||
// 示例用法
|
||||
let compressBase64Img = utils.compress(tempPath, 500, 0.3); //conpress封装的压缩方法
|
||||
console.log(compressBase64Img,'压缩后');
|
||||
const ctx = uni.createCanvasContext('camCacnvs', that);
|
||||
ctx.translate(0, that.width);
|
||||
ctx.rotate((-90 * Math.PI) / 180);
|
||||
ctx.drawImage(tempPath, 0, 0, that.width, that.height);
|
||||
ctx.draw();
|
||||
setTimeout(() => {
|
||||
|
||||
//保存签名图片到本地
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'camCacnvs',
|
||||
success: function(res) {
|
||||
//这是签名图片文件的本地临时地址
|
||||
let path = res.tempFilePath;
|
||||
|
||||
},
|
||||
fail: err => {
|
||||
console.log('fail', err);
|
||||
}
|
||||
},
|
||||
this
|
||||
);
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
height: calc(100vh - 44px);
|
||||
padding-bottom: 30px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.sign-box {
|
||||
width: 80%;
|
||||
height: 90%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sign-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sigh-btns {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 30px 10px 0;
|
||||
}
|
||||
|
||||
/deep/.van-button {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.mycanvas {
|
||||
margin: auto 0rpx;
|
||||
background-color: #ececec;
|
||||
}
|
||||
|
||||
.canvsborder {
|
||||
border: 1rpx solid #333;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 10000rpx;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue