@diyaner/ding
Version:
dingiyan常用ts/js工具
146 lines • 4.91 kB
JavaScript
;
/*
* @copyright: Huang Ding
* @Author: ding-cx
* @Date: 2021-02-06 17:16:17
* @LastEditors: ding-cx
* @LastEditTime: 2022-02-19 17:23:42
* @Description: file content
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.selectFile = exports.onPasteGetImage = exports.imgToBase64 = exports.getBase64 = void 0;
/**
*获取文件base64
*
* @param {File} file 文件对象
* @return {*} {(Promise<string | ArrayBuffer>)}
*/
function getBase64(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onerror = function (error) {
reject(error);
};
reader.onloadend = function () {
resolve(reader.result);
};
});
}
exports.getBase64 = getBase64;
/**
*压缩图片 并获取base64字符串
*
* @param {File} file 图片文件对象
* @param {number} [resize=1] 缩放比例0-1
* @param {number} [encoderOptions=0.8] canvas转图片时，图片质量比例0-1
* @return {*} {Promise<string>} 返回图片base64字符串
*/
function imgToBase64(file, resize = 1, encoderOptions = 0.8, type) {
return new Promise((resolve, reject) => {
const img = new Image();
const reader = new FileReader();
const imgType = {
png: "image/png",
webp: "image/webp",
jpg: "image/jpeg",
};
reader.onloadend = function () {
img.onload = function () {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
context.scale(resize, resize);
canvas.width = img.width * resize;
canvas.height = img.height * resize;
context.drawImage(img, 0, 0, img.width * resize, img.height * resize); //缩小画布，毕竟手机拍下来的图片都是几千像素乘几千像素的大小
const targetType = imgType[type] || file.type;
const imgBase64 = canvas.toDataURL(targetType, encoderOptions); //canvas生成后通过toDataURL获取canvas 处理后的其base64码，并自定义其画质，此处是0.5
resolve(imgBase64);
};
img.src = reader.result;
};
reader.onerror = function (error) {
reject(error);
};
reader.readAsDataURL(file);
});
}
exports.imgToBase64 = imgToBase64;
/**
*监听paste事件，获取剪切板中的图片文件
*
* @export
* @param {((file: File, base64?: string | ArrayBuffer) => void)} callback 回调
* @param {boolean} [isBase64=false] 是否需转换为base64
* @return {function} 返回一个函数，执行可取消监听paste事件。
*/
function onPasteGetImage(callback, isBase64 = false) {
function fn(event) {
var items = event.clipboardData && event.clipboardData.items;
let file = null;
if (items && items.length) {
// 检索剪切板items
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") !== -1) {
file = items[i].getAsFile();
break;
}
}
}
// 此时file就是剪切板中的图片文件
if (file && isBase64) {
getBase64(file).then((res) => {
callback && callback(file, res);
});
}
else {
callback && callback(file);
}
}
// 使用时绑定事件的操作可在外部，改造本封装函数即可。
document.addEventListener("paste", fn);
return () => {
document.removeEventListener("paste", fn);
};
}
exports.onPasteGetImage = onPasteGetImage;
/**
*纯js调用选择文件，无需html，返回promsie。
*
* @export
* @param {{ multiple: true }} args 传递配置参数
* @return {*} {(Promise<File | FileList>)}
*/
function selectFile(args) {
return new Promise((resolve, reject) => {
let input = document.createElement("input");
input.setAttribute("type", "file");
args.accept && input.setAttribute("accept", args.accept);
args.multiple && input.setAttribute("multiple", "multiple");
input.addEventListener("change", (e) => {
const files = e.target.files;
if (files) {
if (args.multiple) {
resolve(files);
}
else {
resolve(files[0]);
}
input = null;
}
else {
input = null;
reject("not select file");
}
});
input.click();
});
}
exports.selectFile = selectFile;
exports.default = {
getBase64,
imgToBase64,
onPasteGetImage,
selectFile,
};
//# sourceMappingURL=file.js.map