update 更新压缩代码
This commit is contained in:
qijq
parent
1f763ac279
commit
8e3faaa09e
@ -289,7 +289,7 @@
|
||||
:height="item.imgHeight"
|
||||
:upload-text="item.uploadText"
|
||||
:uploadIconColor="item.uploadIconColor"
|
||||
:maxSize="8 * 1024 * 1024"
|
||||
:maxSize="maxSize"
|
||||
@oversize="overSize"
|
||||
></u-upload>
|
||||
<tui-radio-group
|
||||
@ -422,6 +422,7 @@ import {
|
||||
import { mapState } from "vuex";
|
||||
import favoriteLoading from "@/components/favorite-loading/favorite-loading.vue";
|
||||
import navBar from "@/components/uni-nav-bar/uni-nav-bar";
|
||||
import { H5compressImg, getBase64Size } from "@/utils/tool.js";
|
||||
|
||||
const orcImgTypeConf = {
|
||||
FR_ID_CARD_FRONT: "FR_ID_CARD_FRONT",
|
||||
@ -496,6 +497,8 @@ export default {
|
||||
currentBank: {},
|
||||
currentBankFile: {},
|
||||
loading: false,
|
||||
maxSize: 20 * 1024 * 1024, //图片最大不能超过20M
|
||||
fileMinSize: 5 * 1024, // 最小为5KB
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -688,7 +691,7 @@ export default {
|
||||
}
|
||||
},
|
||||
overSize(e) {
|
||||
uni.$u.toast("上传图片大小不能超过8MB!");
|
||||
uni.$u.toast("上传图片大小不能超过20MB!");
|
||||
},
|
||||
|
||||
//上传图片
|
||||
@ -977,9 +980,37 @@ export default {
|
||||
this.form.individual_id_period_end = "";
|
||||
}
|
||||
},
|
||||
compressImage(url) {
|
||||
return new Promise((reslove, reject) => {
|
||||
const tempFilePath = url; //url是选中图片的路径
|
||||
uni.compressImage({
|
||||
src: tempFilePath,
|
||||
quality: 75, //压缩的程度
|
||||
success: (res) => {
|
||||
reslove(res.tempFilePath); //压缩成功返回的路径
|
||||
},
|
||||
fail: (error) => {
|
||||
console.log("压缩失败", error);
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
// 营业执照 和 身份证 OCR识别
|
||||
getOcrText(filePath, file, type) {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
//#ifdef APP-PLUS
|
||||
filePath = await this.compressImage(filePath);
|
||||
//#endif
|
||||
|
||||
// 压缩图片已base64 方式上传
|
||||
|
||||
//#ifdef H5
|
||||
filePath = await H5compressImg(filePath, 0.75);
|
||||
//#endif
|
||||
|
||||
let size = getBase64Size(filePath);
|
||||
console.log("OCR上图图片压缩后为：", size);
|
||||
|
||||
const batchNoRes = await batchNoApi(filePath, file, type);
|
||||
const batchNo = batchNoRes.batchNo;
|
||||
const formData = new FormData();
|
||||
@ -1019,6 +1050,20 @@ export default {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
this.loading = true;
|
||||
|
||||
//#ifdef APP-PLUS
|
||||
filePath = await this.compressImage(filePath);
|
||||
//#endif
|
||||
|
||||
// 压缩图片已base64 方式上传
|
||||
|
||||
//#ifdef H5
|
||||
filePath = await H5compressImg(filePath, 0.75);
|
||||
//#endif
|
||||
|
||||
let size = getBase64Size(filePath);
|
||||
|
||||
console.log("压缩后的大小为：", size);
|
||||
|
||||
const batchNoRes = await batchNoApi(filePath, file, type);
|
||||
const batchNo = batchNoRes.batchNo;
|
||||
|
||||
|
||||
@ -227,7 +227,7 @@ export default {
|
||||
uni.navigateBack();
|
||||
},
|
||||
overSize(e) {
|
||||
uni.$u.toast("上传图片大小不能超过8MB!");
|
||||
uni.$u.toast("上传图片大小不能超过20MB!");
|
||||
},
|
||||
async afterRead1(e) {
|
||||
const item = e.file;
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
:max-count="1"
|
||||
width="125"
|
||||
height="88"
|
||||
:maxSize="8 * 1024 * 1024"
|
||||
:maxSize="maxSize"
|
||||
@oversize="overSize"
|
||||
uploadText="点击上传营业执照"
|
||||
></u-upload>
|
||||
@ -130,7 +130,7 @@
|
||||
"
|
||||
:fileList="form.specialLicenseFiles"
|
||||
:max-count="5"
|
||||
:maxSize="8 * 1024 * 1024"
|
||||
:maxSize="maxSize"
|
||||
@oversize="overSize"
|
||||
width="125"
|
||||
height="88"
|
||||
@ -164,7 +164,7 @@
|
||||
width="180"
|
||||
height="110"
|
||||
uploadIcon=""
|
||||
:maxSize="8 * 1024 * 1024"
|
||||
:maxSize="maxSize"
|
||||
@oversize="overSize"
|
||||
></u-upload>
|
||||
<u-upload
|
||||
@ -177,7 +177,7 @@
|
||||
width="180"
|
||||
height="110"
|
||||
uploadIcon=""
|
||||
:maxSize="8 * 1024 * 1024"
|
||||
:maxSize="maxSize"
|
||||
@oversize="overSize"
|
||||
></u-upload>
|
||||
</view>
|
||||
@ -280,7 +280,7 @@
|
||||
height="110"
|
||||
:upload-text="''"
|
||||
uploadIcon=""
|
||||
:maxSize="8 * 1024 * 1024"
|
||||
:maxSize="maxSize"
|
||||
@oversize="overSize"
|
||||
></u-upload>
|
||||
<u-upload
|
||||
@ -294,7 +294,7 @@
|
||||
height="110"
|
||||
:upload-text="''"
|
||||
uploadIcon=""
|
||||
:maxSize="8 * 1024 * 1024"
|
||||
:maxSize="maxSize"
|
||||
@oversize="overSize"
|
||||
></u-upload>
|
||||
</view>
|
||||
@ -558,7 +558,7 @@ export default {
|
||||
action: "",
|
||||
limitType: ["png", "jpg", "jpeg"], //允许的图片后缀
|
||||
fileMaxSize: 1 * 1024 * 1024, // 超出1M开启压缩
|
||||
maxSize: 5 * 1024 * 1024, //图片最大不能超过20M
|
||||
maxSize: 20 * 1024 * 1024, //图片最大不能超过20M
|
||||
fileMinSize: 5 * 1024, // 最小为5KB
|
||||
fileList: [],
|
||||
fileList2: [],
|
||||
@ -723,7 +723,7 @@ export default {
|
||||
uni.navigateBack();
|
||||
},
|
||||
overSize(e) {
|
||||
uni.$u.toast("上传图片大小不能超过5MB!");
|
||||
uni.$u.toast("上传图片大小不能超过20MB!");
|
||||
},
|
||||
compressImage(url) {
|
||||
return new Promise((reslove, reject) => {
|
||||
@ -754,7 +754,7 @@ export default {
|
||||
//#endif
|
||||
|
||||
let size = getBase64Size(filePath);
|
||||
console.log(size);
|
||||
console.log("OCR上图图片压缩后为：", size);
|
||||
|
||||
const batchNoRes = await batchNoApi(filePath, file, type);
|
||||
const batchNo = batchNoRes.batchNo;
|
||||
@ -872,7 +872,13 @@ export default {
|
||||
this.fileList6.push(group);
|
||||
break;
|
||||
}
|
||||
console.log(imgUrl);
|
||||
|
||||
imgUrl = await H5compressImg(imgUrl, 0.75);
|
||||
|
||||
let size = getBase64Size(imgUrl);
|
||||
|
||||
console.log("上传图片压缩后的大小为:", size);
|
||||
|
||||
let res = await UploadFilePromise(imgUrl);
|
||||
|
||||
if (res && res.status == 200) {
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
width="268"
|
||||
height="125"
|
||||
uploadText="点击上传银行卡正面"
|
||||
:maxSize="8 * 1024 * 1024"
|
||||
:maxSize="maxSize"
|
||||
@oversize="overSize"
|
||||
></u-upload>
|
||||
<view
|
||||
@ -172,7 +172,7 @@ import { batchNoApi, imgOcrResultApi } from "../../api/upload";
|
||||
import { mapState } from "vuex";
|
||||
import { throttle, debounce } from "lodash";
|
||||
import navBar from "@/components/uni-nav-bar/uni-nav-bar";
|
||||
import { H5compressImg } from "@/utils/tool.js";
|
||||
import { H5compressImg, getBase64Size } from "@/utils/tool.js";
|
||||
|
||||
const orcImgTypeConf = {
|
||||
FR_ID_CARD_FRONT: "FR_ID_CARD_FRONT",
|
||||
@ -259,14 +259,14 @@ export default {
|
||||
uni.navigateBack();
|
||||
},
|
||||
overSize(e) {
|
||||
uni.$u.toast("上传图片大小不能超过5MB!");
|
||||
uni.$u.toast("上传图片大小不能超过20MB!");
|
||||
},
|
||||
compressImage(url) {
|
||||
return new Promise((reslove, reject) => {
|
||||
const tempFilePath = url; //url是选中图片的路径
|
||||
uni.compressImage({
|
||||
src: tempFilePath,
|
||||
quality: 90, //压缩的程度
|
||||
quality: 75, //压缩的程度
|
||||
success: (res) => {
|
||||
reslove(res.tempFilePath); //压缩成功返回的路径
|
||||
},
|
||||
@ -290,6 +290,10 @@ export default {
|
||||
filePath = await H5compressImg(filePath, 0.75);
|
||||
//#endif
|
||||
|
||||
let size = getBase64Size(filePath);
|
||||
|
||||
console.log("压缩后的大小为：", size);
|
||||
|
||||
const batchNoRes = await batchNoApi(filePath, file, type);
|
||||
const batchNo = batchNoRes.batchNo;
|
||||
|
||||
|
||||
@ -4,33 +4,48 @@
|
||||
* scale 压缩质量 0-1
|
||||
* type 文件类型
|
||||
*/
|
||||
export async function H5compressImg(imgSrc, scale) {
|
||||
//imgSrc:图片的路径
|
||||
//scale:缩放比例 0-1之间
|
||||
return new Promise((reslove, reject) => {
|
||||
var img = new Image(); //创建Image对象生成一个<img>标签
|
||||
img.src = imgSrc; //将图片路径赋给<img>标签的src
|
||||
export async function H5compressImg(
|
||||
imgSrc,
|
||||
scale = 0.75,
|
||||
maxWidth = 800,
|
||||
maxHeight = 800
|
||||
) {
|
||||
return new Promise((resolve, reject) => {
|
||||
var img = new Image();
|
||||
img.src = imgSrc;
|
||||
img.onload = () => {
|
||||
//onload在图片加载成功后触发，在onload中完成压缩功能
|
||||
var h = img.height / 2; // 获取原本图片的宽高
|
||||
var w = img.width / 2; //默认按比例压缩,根据需求修改
|
||||
var canvas = document.createElement("canvas"); //创建画布
|
||||
var ctx = canvas.getContext("2d"); //设置为2d效果
|
||||
var width = document.createAttribute("width"); //创建属性节点
|
||||
width.nodeValue = w; //设置属性值
|
||||
var height = document.createAttribute("height");
|
||||
height.nodeValue = h;
|
||||
canvas.setAttributeNode(width); //设置画布宽高
|
||||
canvas.setAttributeNode(height);
|
||||
ctx.drawImage(img, 0, 0, w, h); //将图片贴到画布上
|
||||
//img:图片 0,0:粘贴的位置 w,h:粘贴图片的大小
|
||||
var base64 = canvas.toDataURL("image/png", scale);
|
||||
//'image/png':压缩返回图片的类型 scale:图片质量
|
||||
//如果要base64的流，可以直接将结果返回了
|
||||
canvas = null; //清除画布
|
||||
// var blob = base64ToBlob(base64); //需要二进制流调用该方法拿到
|
||||
// let blobUrl = window.URL.createObjectURL(blob); //blob地址
|
||||
reslove(base64);
|
||||
// 计算按比例压缩后的尺寸
|
||||
let w = img.width;
|
||||
let h = img.height;
|
||||
// 如果图片宽度或高度超过最大限制，则按比例缩放
|
||||
if (w > maxWidth) {
|
||||
h = (maxWidth / w) * h;
|
||||
w = maxWidth;
|
||||
}
|
||||
if (h > maxHeight) {
|
||||
w = (maxHeight / h) * w;
|
||||
h = maxHeight;
|
||||
}
|
||||
var canvas = document.createElement("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
// 设置canvas的宽高
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
// 将图片绘制到canvas上
|
||||
ctx.drawImage(img, 0, 0, w, h);
|
||||
// 设置输出格式为jpeg，质量为scale
|
||||
var base64;
|
||||
try {
|
||||
base64 = canvas.toDataURL("image/jpeg", scale);
|
||||
} catch (e) {
|
||||
// 如果浏览器不支持jpeg，或者有跨域问题，则使用png
|
||||
base64 = canvas.toDataURL("image/png", scale);
|
||||
}
|
||||
canvas = null;
|
||||
resolve(base64);
|
||||
};
|
||||
img.onerror = (e) => {
|
||||
reject(e);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user