@qy_better_lib/hooks 0.0.2

package/src/use-file/index.ts

@@ -0,0 +1,39 @@
+interface UseFile {
+    /**下载文件 */
+    downLoadFile: (filePath: string) => void;
+    /**批量下载文件 */
+    downLoadFiles: (list: Array<any>) => void;
+  }
+  /**
+   * 文件处理
+   * @returns
+   */
+  export default function useFile(): UseFile {
+    /**
+     * 下载文件
+     * @param filePath 文件路径
+     */
+    function downLoadFile(filePath: string): void {
+      window.open(filePath);
+    }
+  
+    function downLoadFiles(fileList: any[]): void {
+      fileList.forEach((file) => {
+        // file.url && window.open(file.url, '_blank');
+        //通过模拟a标签点击事件下载文件
+        const link = document.createElement("a");
+        link.href = file.url;
+        link.target = "_blank";
+        link.setAttribute("download", file.name);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      });
+    }
+  
+    return {
+      downLoadFile,
+      downLoadFiles,
+    };
+  }
+  

package/src/use-image/canvastoDataURL.ts

@@ -0,0 +1,21 @@
+import { EImageType, checkImageType } from "./type";
+
+/**
+ * 将一个Canvas对象转变为一个dataURL字符串
+ * 该方法可以做压缩处理
+ *
+ * @param {canvas} canvas
+ * @param {number=} quality - 传入范围 0-1，表示图片压缩质量，默认0.92
+ * @param {string=} type - 确定转换后的图片类型，选项有 "image/png", "image/jpeg", "image/gif",默认"image/jpeg"
+ * @returns {Promise(string)} Promise含有一个dataURL字符串参数
+ */
+export default async function canvastoDataURL(
+  canvas: HTMLCanvasElement,
+  quality: number = 0.92,
+  type: EImageType = EImageType.JPEG
+): Promise<string> {
+  if (!checkImageType(type)) {
+    type = EImageType.JPEG;
+  }
+  return canvas.toDataURL(type, quality);
+}

package/src/use-image/canvastoFile.ts

@@ -0,0 +1,20 @@
+import { EImageType } from "./type";
+
+/**
+ * 将一个canvas对象转变为一个File（Blob）对象
+ * 该方法可以做压缩处理
+ *
+ * @param {canvas} canvas
+ * @param {number=} quality - 传入范围 0-1，表示图片压缩质量，默认0.92
+ * @param {string=} type - 确定转换后的图片类型，选项有 "image/png", "image/jpeg", "image/gif",默认"image/jpeg"
+ * @returns {Promise(Blob)}
+ */
+export default function canvastoFile(
+  canvas: HTMLCanvasElement,
+  quality: number = 0.92,
+  type: EImageType = EImageType.JPEG
+): Promise<Blob> {
+  return new Promise((resolve) =>
+    canvas.toBlob((blob) => resolve(blob as Blob), type, quality)
+  );
+}

package/src/use-image/dataURLtoFile.ts

@@ -0,0 +1,29 @@
+import { EImageType, checkImageType } from "./type";
+
+/**
+ * 将一个dataURL字符串转变为一个File（Blob）对象
+ * 转变时可以确定File对象的类型
+ *
+ * @param {string} dataURL
+ * @param {string=} type - 确定转换后的图片类型，选项有 "image/png", "image/jpeg", "image/gif"
+ * @returns {Promise(Blob)}
+ */
+export default async function dataURLtoFile(
+  dataURL: string,
+  type: EImageType
+): Promise<Blob> {
+  const arr = dataURL.split(",");
+  let mime = arr[0].match(/:(.*?);/)?.[1];
+  const bstr = atob(arr[1]);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  if (checkImageType(type)) {
+    mime = type;
+  }
+  return new Blob([u8arr], {
+    type: mime,
+  });
+}

package/src/use-image/dataURLtoImage.ts

@@ -0,0 +1,17 @@
+/**
+ * 将dataURL字符串转变为image对象
+ *
+ * @param {srting} dataURL - dataURL字符串
+ * @returns {Promise(Image)}
+ */
+export default function dataURLtoImage(
+  dataURL: string
+): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () =>
+      reject(new Error("dataURLtoImage(): dataURL is illegal"));
+    img.src = dataURL;
+  });
+}

package/src/use-image/downloadFile.ts

@@ -0,0 +1,16 @@
+/**
+ * 将图片下载到本地
+ *
+ * @param {Blob} file - 一个File（Blob）对象
+ * @param {string=} fileName - 下载后的文件名（可选参数，不传以时间戳命名文件）
+ */
+export default function downloadFile(file: File, fileName: string): void {
+  const link = document.createElement("a");
+  link.href = window.URL.createObjectURL(file);
+  link.download = fileName || Date.now().toString(36);
+  document.body.appendChild(link);
+  const evt = document.createEvent("MouseEvents");
+  evt.initEvent("click", false, false);
+  link.dispatchEvent(evt);
+  document.body.removeChild(link);
+}

package/src/use-image/filetoDataURL.ts

@@ -0,0 +1,13 @@
+/**
+ * 将File（Blob）对象转变为一个dataURL字符串
+ *
+ * @param {Blob} file
+ * @returns {Promise(string)} Promise含有一个dataURL字符串参数
+ */
+export default function filetoDataURL(file: Blob): Promise<string> {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onloadend = (e) => resolve(e.target?.result as string);
+    reader.readAsDataURL(file);
+  });
+}

package/src/use-image/imagetoCanvas.ts

@@ -0,0 +1,107 @@
+import { Image2CanvasConfig } from "./type";
+
+/**
+ * 将一个image对象转变为一个canvas对象
+ *
+ * @param {image} image
+ *
+ * @typedef {Object=} config - 转变为canvas时的一些参数配置
+ * 		@param {number} width - canvas图像的宽度，默认为image的宽度
+ * 		@param {number} height - canvas图像的高度，默认为image的高度
+ * 		@param {number} scale - 相对于image的缩放比例，范围0-10，默认不缩放；
+ * 			设置config.scale后会覆盖config.width和config.height的设置；
+ * 		@param {number} orientation - 图片旋转参数，默认不旋转，参考如下：
+ * 			参数	 旋转方向
+ * 			1		0°
+ * 			2		水平翻转
+ * 			3		180°
+ * 			4		垂直翻转
+ * 			5		顺时针90°+水平翻转
+ * 			6		顺时针90°
+ * 			7		顺时针90°+垂直翻转
+ * 			8		逆时针90°
+ * @type {config}
+ *
+ * @returns {Promise(canvas)}
+ */
+export default async function imagetoCanvas(
+  image: HTMLImageElement,
+  config: Image2CanvasConfig = {}
+): Promise<HTMLCanvasElement> {
+  const myConfig = { ...config };
+  const cvs = document.createElement("canvas");
+  const ctx = cvs.getContext("2d") as CanvasRenderingContext2D;
+  let height;
+  let width;
+  for (const i in myConfig) {
+    if (Object.prototype.hasOwnProperty.call(myConfig, i)) {
+      myConfig[i] = Number(myConfig[i]);
+    }
+  }
+  // 设置宽高
+  if (!myConfig.scale) {
+    width =
+      myConfig.width ||
+      ((myConfig.height || 0) * image.width) / image.height ||
+      image.width;
+    height =
+      myConfig.height ||
+      ((myConfig.width || 0) * image.height) / image.width ||
+      image.height;
+  } else {
+    // 缩放比例0-10，不在此范围则保持原来图像大小
+    const scale =
+      myConfig.scale > 0 && myConfig.scale < 10 ? myConfig.scale : 1;
+    width = image.width * scale;
+    height = image.height * scale;
+  }
+  // 当顺时针或者逆时针旋转90时，需要交换canvas的宽高
+  if ([5, 6, 7, 8].some((i) => i === myConfig.orientation)) {
+    cvs.height = width;
+    cvs.width = height;
+  } else {
+    cvs.height = height;
+    cvs.width = width;
+  }
+  // 设置方向
+  switch (myConfig.orientation) {
+    case 3:
+      ctx.rotate((180 * Math.PI) / 180);
+      ctx.drawImage(image, -cvs.width, -cvs.height, cvs.width, cvs.height);
+      break;
+    case 6:
+      ctx.rotate((90 * Math.PI) / 180);
+      ctx.drawImage(image, 0, -cvs.width, cvs.height, cvs.width);
+      break;
+    case 8:
+      ctx.rotate((270 * Math.PI) / 180);
+      ctx.drawImage(image, -cvs.height, 0, cvs.height, cvs.width);
+      break;
+    case 2:
+      ctx.translate(cvs.width, 0);
+      ctx.scale(-1, 1);
+      ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
+      break;
+    case 4:
+      ctx.translate(cvs.width, 0);
+      ctx.scale(-1, 1);
+      ctx.rotate((180 * Math.PI) / 180);
+      ctx.drawImage(image, -cvs.width, -cvs.height, cvs.width, cvs.height);
+      break;
+    case 5:
+      ctx.translate(cvs.width, 0);
+      ctx.scale(-1, 1);
+      ctx.rotate((90 * Math.PI) / 180);
+      ctx.drawImage(image, 0, -cvs.width, cvs.height, cvs.width);
+      break;
+    case 7:
+      ctx.translate(cvs.width, 0);
+      ctx.scale(-1, 1);
+      ctx.rotate((270 * Math.PI) / 180);
+      ctx.drawImage(image, -cvs.height, 0, cvs.height, cvs.width);
+      break;
+    default:
+      ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
+  }
+  return cvs;
+}

package/src/use-image/index.ts

@@ -0,0 +1,200 @@
+import canvastoDataURL from "./canvastoDataURL";
+import canvastoFile from "./canvastoFile";
+import dataURLtoFile from "./dataURLtoFile";
+import dataURLtoImage from "./dataURLtoImage";
+import downloadFile from "./downloadFile";
+import filetoDataURL from "./filetoDataURL";
+import imagetoCanvas from "./imagetoCanvas";
+import urltoBlob from "./urltoBlob";
+import urltoImage from "./urltoImage";
+import {
+  EImageType,
+  ICompressConfig,
+  checkImageType,
+  compressAccuratelyConfig,
+} from "./type";
+
+/**
+ * 压缩File（Blob）对象
+ * @param {Blob} file - 一个File（Blob）对象
+ * @param {(number|object)} config - 如果传入是number类型，传入范围 0-1，表示图片压缩质量,默认0.92；也可以传入object类型，以便更详细的配置
+ * @example
+ * 		imageConversion.compress(file,0.8)
+ *
+ * 		imageConversion.compress(file,{
+ * 			quality: 0.8, //图片压缩质量
+ * 			type："image/png", //转换后的图片类型，选项有 "image/png", "image/jpeg", "image/gif"
+ * 			width: 300, //生成图片的宽度
+ * 			height：200， //生产图片的高度
+ * 			scale: 0.5， //相对于原始图片的缩放比率,设置config.scale后会覆盖config.width和config.height的设置；
+ * 			orientation:2, //图片旋转方向
+ * 		})
+ *
+ * @returns {Promise(Blob)}
+ */
+async function compress(
+  file: File,
+  config: ICompressConfig = {}
+): Promise<Blob> {
+  if (!(file instanceof Blob)) {
+    throw new Error(
+      "compress(): First arg must be a Blob object or a File object."
+    );
+  }
+  if (typeof config !== "object") {
+    config = Object.assign({
+      quality: config,
+    });
+  }
+  config.quality = Number(config.quality);
+  if (Number.isNaN(config.quality)) {
+    return file;
+  }
+  const dataURL = await filetoDataURL(file);
+  let originalMime = dataURL.split(",")[0].match(/:(.*?);/)?.[1] as EImageType; // 原始图像图片类型
+  let mime = EImageType.JPEG; // 默认压缩类型
+  if (checkImageType(config.type as EImageType)) {
+    mime = config.type as EImageType;
+    originalMime = config.type as EImageType;
+  }
+  const image = await dataURLtoImage(dataURL);
+  const canvas = await imagetoCanvas(image, Object.assign({}, config));
+  const compressDataURL = await canvastoDataURL(canvas, config.quality, mime);
+  const compressFile = await dataURLtoFile(compressDataURL, originalMime);
+  if (compressFile.size > file.size) {
+    return file;
+  }
+  return compressFile;
+}
+
+/**
+ * 根据体积压缩File（Blob）对象
+ *
+ * @param {Blob} file - 一个File（Blob）对象
+ * @param {(number|object)} config - 如果传入是number类型，则指定压缩图片的体积,单位Kb;也可以传入object类型，以便更详细的配置
+ * 		@param {number} size - 指定压缩图片的体积,单位Kb
+ * 		@param {number} accuracy - 相对于指定压缩体积的精确度，范围0.8-0.99，默认0.95；
+ *        如果设置 图片体积1000Kb,精确度0.9，则压缩结果为900Kb-1100Kb的图片都算合格；
+ * @example
+ *  	imageConversion.compress(file,100) //压缩后图片大小为100kb
+ *
+ * 		imageConversion.compress(file,{
+ * 			size: 100, //图片压缩体积，单位Kb
+ * 			accuracy: 0.9, //图片压缩体积的精确度，默认0.95
+ * 			type："image/png", //转换后的图片类型，选项有 "image/png", "image/jpeg", "image/gif"
+ * 			width: 300, //生成图片的宽度
+ * 			height: 200, //生产图片的高度
+ * 			scale: 0.5, //相对于原始图片的缩放比率,设置config.scale后会覆盖config.width和config.height的设置；
+ * 			orientation:2, //图片旋转方向
+ * 		})
+ *
+ * @returns {Promise(Blob)}
+ */
+async function compressAccurately(
+  file: Blob,
+  config: compressAccuratelyConfig = {}
+): Promise<Blob> {
+  if (!(file instanceof Blob)) {
+    throw new Error(
+      "compressAccurately(): First arg must be a Blob object or a File object."
+    );
+  }
+  if (typeof config !== "object") {
+    config = Object.assign({
+      size: config,
+    });
+  }
+  // 如果指定体积不是数字或者数字字符串，则不做处理
+  config.size = Number(config.size);
+  if (Number.isNaN(config.size)) {
+    return file;
+  }
+  // 如果指定体积大于原文件体积，则不做处理；
+  if (config.size * 1024 > file.size) {
+    return file;
+  }
+  config.accuracy = Number(config.accuracy);
+  if (!config.accuracy || config.accuracy < 0.8 || config.accuracy > 0.99) {
+    config.accuracy = 0.95; // 默认精度0.95
+  }
+  const resultSize = {
+    max: config.size * (2 - config.accuracy) * 1024,
+    accurate: config.size * 1024,
+    min: config.size * config.accuracy * 1024,
+  };
+  const dataURL = await filetoDataURL(file);
+  let originalMime = dataURL.split(",")[0].match(/:(.*?);/)?.[1] as EImageType; // 原始图像图片类型
+  let mime = EImageType.JPEG;
+  if (checkImageType(config.type as EImageType)) {
+    mime = config.type as EImageType;
+    originalMime = config.type as EImageType;
+  }
+  const image = await dataURLtoImage(dataURL);
+  const canvas = await imagetoCanvas(image, Object.assign({}, config));
+  /**
+   * 经过测试发现，blob.size与dataURL.length的比值约等于0.75
+   * 这个比值可以同过dataURLtoFile这个方法来测试验证
+   * 这里为了提高性能，直接通过这个比值来计算出blob.size
+   */
+  const proportion = 0.75;
+  let imageQuality = 1;
+  let compressDataURL;
+  const tempDataURLs: string[] = new Array(2);
+  /**
+   * HTMLCanvasElement.toBlob()以及HTMLCanvasElement.toDataURL()压缩参数
+   * 的最小细粒度为0.01，而2的7次方为128，即只要循环7次，则会覆盖所有可能性
+   */
+  for (let x = 1; x <= 7; x++) {
+    compressDataURL = await canvastoDataURL(canvas, imageQuality, mime);
+    const CalculationSize = compressDataURL.length * proportion;
+    // 如果到循环第七次还没有达到精确度的值，那说明该图片不能达到到此精确度要求
+    // 这时候最后一次循环出来的dataURL可能不是最精确的，需要取其周边两个dataURL三者比较来选出最精确的；
+    if (x === 7) {
+      if (
+        resultSize.max < CalculationSize ||
+        resultSize.min > CalculationSize
+      ) {
+        compressDataURL = [compressDataURL, ...tempDataURLs]
+          .filter((i) => i) // 去除null
+          .sort(
+            (a, b) =>
+              Math.abs(a.length * proportion - resultSize.accurate) -
+              Math.abs(b.length * proportion - resultSize.accurate)
+          )[0];
+      }
+      break;
+    }
+    if (resultSize.max < CalculationSize) {
+      tempDataURLs[1] = compressDataURL;
+      imageQuality -= 0.5 ** (x + 1);
+    } else if (resultSize.min > CalculationSize) {
+      tempDataURLs[0] = compressDataURL;
+      imageQuality += 0.5 ** (x + 1);
+    } else {
+      break;
+    }
+  }
+  const compressFile = await dataURLtoFile(
+    compressDataURL as string,
+    originalMime
+  );
+  // 如果压缩后体积大于原文件体积，则返回源文件；
+  if (compressFile.size > file.size) {
+    return file;
+  }
+  return compressFile;
+}
+
+export {
+  canvastoDataURL,
+  canvastoFile,
+  dataURLtoFile,
+  dataURLtoImage,
+  downloadFile,
+  filetoDataURL,
+  imagetoCanvas,
+  urltoBlob,
+  urltoImage,
+  compress,
+  compressAccurately,
+};

package/src/use-image/type.ts

@@ -0,0 +1,31 @@
+export enum EImageType {
+  "PNG" = "image/png",
+  "JPEG" = "image/jpeg",
+  "GIF" = "image/gif",
+}
+
+interface IBaseConfig {
+  [key: string]: any;
+}
+
+export interface Image2CanvasConfig extends IBaseConfig {
+  width?: number;
+  height?: number;
+  scale?: number;
+  orientation?: number;
+}
+
+export interface ICompressConfig extends Image2CanvasConfig {
+  quality?: number;
+  type?: EImageType;
+}
+
+export interface compressAccuratelyConfig extends Image2CanvasConfig {
+  size?: number;
+  accuracy?: number;
+  type?: EImageType;
+}
+
+export function checkImageType(type: EImageType) {
+  return ["image/png", "image/jpeg", "image/gif"].some((i) => i === type);
+}

package/src/use-image/urltoBlob.ts

@@ -0,0 +1,10 @@
+/**
+ * 通过一个图片的url加载所需要的File（Blob）对象
+ *
+ * @param {string} url - 图片URL
+ * @returns {Promise(Blob)}
+ *
+ */
+export default function urltoBlob(url: string): Promise<Blob> {
+  return fetch(url).then((response) => response.blob());
+}

package/src/use-image/urltoImage.ts

@@ -0,0 +1,19 @@
+/**
+ * 通过一个图片的url加载所需要的image对象
+ *
+ * @param {string} url - 图片URL
+ * @returns {Promise(Image)}
+ */
+export default function urltoImage(url: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () =>
+      reject(
+        new Error(
+          "urltoImage(): Image failed to load, please check the image URL"
+        )
+      );
+    img.src = url;
+  });
+}

package/src/use-print/index.ts

@@ -0,0 +1,128 @@
+interface UsePrintReturn {
+  printHtml: (domNode: string) => void;
+  printHtmlElement: (elementArray: Element[]) => void;
+}
+/**
+ * ==============================================
+ * 打印页面元素
+ * ==============================================
+ */
+export default function usePrintHtml(): UsePrintReturn {
+  /**
+   * 打印
+   * @param html 打印内容
+   */
+  function print(htmlStr: string) {
+    let style = getStyle();
+    let container = getContainer(htmlStr);
+
+    document.body.appendChild(style);
+    document.body.appendChild(container);
+
+    getLoadPromise(container).then(() => {
+      window.print();
+      document.body.removeChild(style);
+      document.body.removeChild(container);
+    });
+  }
+
+  /**
+   * 设置默认打印样式
+   * @return {*}
+   */
+  function getStyle(value?: string) {
+    let styleContent = `#print-container {
+            display: none;
+        }
+        @media print {
+            body > :not(.print-container) {
+                display: none;
+            }
+            html,
+            body {
+                display: block !important;
+            }
+            #print-container {
+                display: block;
+            }
+        }`;
+    let style = document.createElement("style");
+    style.innerHTML = value || styleContent;
+    return style;
+  }
+
+  /**
+   * 清空打印内容
+   */
+  function cleanPrint() {
+    let div = document.getElementById("print-container");
+    if (!!div) {
+      document?.querySelector("body")?.removeChild(div);
+    }
+  }
+
+  /**
+   * 新建DOM，将需要打印的内容填充到DOM
+   * @param html html内容
+   * @return {*}
+   */
+  function getContainer(html: string) {
+    cleanPrint();
+    let container = document.createElement("div");
+    container.setAttribute("id", "print-container");
+    container.innerHTML = html;
+    return container;
+  }
+
+  /**
+   * 图片完全加载后再调用打印方法
+   * @param dom 需要打印的DOM
+   * @return {*}
+   */
+  function getLoadPromise(dom: Element): Promise<void> {
+    let imgDoms = dom.querySelectorAll("img");
+    const imgs: Element[] = [].slice.call(imgDoms);
+    if (imgs.length === 0) {
+      return Promise.resolve();
+    }
+    let finishedCount = 0;
+    return new Promise((resolve) => {
+      function check() {
+        finishedCount++;
+        if (finishedCount === imgs.length) {
+          resolve();
+        }
+      }
+      imgs.forEach((img) => {
+        img.addEventListener("load", check);
+        img.addEventListener("error", check);
+      });
+    });
+  }
+
+  /**
+   * 打印HTML内容
+   * @param domNode DOM节点
+   */
+  function printHtml(domNode: string): void {
+    const printForm = document.querySelector(domNode);
+    printForm && print(printForm.innerHTML);
+  }
+
+  /**
+   * 打印多个HTML内容
+   * @param elementArray DOM元素数组
+   */
+  function printHtmlElement(elementArray: Element[]): void {
+    let htmlConent = "";
+    for (let i = 0; i < elementArray.length; i++) {
+      htmlConent += elementArray[i].outerHTML;
+    }
+    htmlConent && print(htmlConent);
+  }
+
+  return {
+    printHtml,
+    printHtmlElement,
+  };
+}