uni-image-editor 1.0.0

package/js/utils.js

@@ -0,0 +1,316 @@
+/*
+ * @Author: msc 862078729@qq.com
+ * @Date: 2024-04-29 12:52:27
+ * @LastEditors: msc 862078729@qq.com
+ * @LastEditTime: 2024-06-14 11:52:23
+ * @FilePath: \code\components\image-editor\js\utils.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+
+// 获取自适应尺寸
+export const getAutoFitSize = (width, height) => {
+    const systemInfo = uni.getSystemInfoSync();
+
+    // 600为底部和头部navbar高度之和外加一点
+    const canvasMaxHeight = systemInfo.windowHeight - uni.upx2px(600);
+
+    const size = {
+        width: "",
+        height: "",
+    };
+
+    size.width = uni.upx2px(750);
+
+    const ratio = size.width / width;
+
+    size.height =
+        ratio * height > canvasMaxHeight ? canvasMaxHeight : ratio * height;
+
+    return size;
+};
+
+// 导出一个函数，用于验证图片是否部分为空（即透明）
+export const validImgHasEmpty = (
+    data,
+    totalPixels,
+    maxTransparencyRate = 5
+) => {
+    let transparentPixels = 0;
+
+    let valid = true;
+
+    for (let i = 0; i < data.length; i += 4) {
+        // 检查Alpha通道是否为0（即完全透明）
+        if (data[i + 3] === 0) {
+            transparentPixels++;
+        }
+    }
+
+    const transparencyRate = (transparentPixels / totalPixels) * 100;
+
+    console.log("图片透明占比",`当前图片最大透明占比${maxTransparencyRate}`, transparencyRate);
+    
+
+    if (transparencyRate >= maxTransparencyRate) {
+        valid = false;
+    }
+
+    return valid;
+};
+
+// 导出一个函数，用于判断图片空白部分过大
+export const validImgRenderOverBlank = (
+    imageData,
+    threshold = 240,
+    minConsecutivePixels = 100
+) => {
+    let currentBlankCount = 0;
+    let hasBlankArea = false;
+
+    for (let i = 0; i < imageData.length; i += 4) {
+        const r = imageData[i];
+        const g = imageData[i + 1];
+        const b = imageData[i + 2];
+
+        // 检查像素是否接近白色
+        if (r > threshold && g > threshold && b > threshold) {
+            currentBlankCount++;
+
+            // 如果连续接近白色的像素超过阈值，则认为有空白部分
+            if (currentBlankCount >= minConsecutivePixels) {
+                hasBlankArea = true;
+                break;
+            }
+        } else {
+            // 如果遇到非接近白色的像素，重置连续计数
+            currentBlankCount = 0;
+        }
+    }
+    return !hasBlankArea;
+};
+
+// 定义一个函数renderAwait，用于渲染一个等待动画，参数duration表示等待时间，默认值为100毫秒
+export const renderAwait = (duration = 100) => {
+    // 返回一个新的Promise对象
+    return new Promise((resolve) => {
+        // 使用setTimeout函数，在给定的等待时间后执行一个回调函数
+        setTimeout(() => {
+            // 执行resolve函数，表示等待结束
+            resolve();
+        }, duration);
+    });
+};
+
+
+/**
+ * 将Base64编码的数据转换为Blob对象
+ *
+ * @param {string} base64Data - Base64编码的数据
+ * @returns {Blob} - 转换后的Blob对象
+ */
+export const base64ToBlob = (base64Data) => {
+  // 获取MIME类型，例如 "image/jpeg", "text/plain" 等
+  // 分割字符串，以分号";"为分隔符，取第一部分，再以冒号":"为分隔符，取第二部分
+  const contentType = base64Data.split(";")[0].split(":")[1]; // 获取MIME类型
+
+  // 去除Base64编码的头部信息，只保留数据部分，通常是以逗号","分隔后的第二部分
+  // 使用atob函数将Base64字符串解码为二进制字符串
+  const byteCharacters = atob(base64Data.split(",")[1]);
+
+  // 创建一个空数组，用于存放字节数组
+  const byteArrays = [];
+
+  // 循环处理二进制字符串，每次处理512个字符（这是一个常见的处理大小，可根据需要调整）
+  for (let offset = 0; offset < byteCharacters.length; offset += 512) {
+    // 从二进制字符串中切分出一个片段
+    const slice = byteCharacters.slice(offset, offset + 512);
+
+    // 创建一个与片段长度相同的数组，用于存放字符的ASCII码值
+    const byteNumbers = new Array(slice.length);
+
+    // 遍历片段中的每个字符，将其ASCII码值存入数组中
+    for (let i = 0; i < slice.length; i++) {
+      byteNumbers[i] = slice.charCodeAt(i);
+    }
+
+    // 将ASCII码值数组转换为Uint8Array类型的字节数组
+    const byteArray = new Uint8Array(byteNumbers);
+
+    // 将字节数组添加到总数组中
+    byteArrays.push(byteArray);
+  }
+
+  // 使用总数组创建一个Blob对象，并指定MIME类型
+  return new Blob(byteArrays, { type: contentType });
+};
+
+/**
+ * 将Base64编码的数据转换为Blob对象，并生成对应的URL对象
+ *
+ * @param {string} base64Data - Base64编码的数据
+ * @returns {string} - 转换后的Blob对象的URL
+ */
+export const base64ToUrl = (base64Data) => {
+  // 调用base64ToBlob函数将Base64数据转换为Blob对象
+  const blob = base64ToBlob(base64Data);
+
+  // 使用URL.createObjectURL方法将Blob对象转换为一个表示该Blob对象内容的URL
+  return URL.createObjectURL(blob);
+};
+
+/**
+ * 清除由createObjectURL创建的Blob对象的URL缓存
+ *
+ * @param {Array<string>|string} urls - 需要清除的URL或URL数组
+ * @returns {void} - 无返回值
+ */
+export const clearUrlBlobCache = (urls) => {
+  // 如果传入的urls不是数组，则将其转换为数组
+  if (!Array.isArray(urls)) {
+    urls = [urls];
+  }
+
+  // 遍历urls数组，对每个URL调用revokeObjectURL方法来释放缓存
+  urls.forEach((url) => URL.revokeObjectURL(url));
+};
+
+// 是否为图片的base64数据
+export const isBase64Image = (url) =>{
+  const base64Regex = /^data:image\/(png|jpeg|jpg|gif|svg\+xml);base64,/;
+  return base64Regex.test(url);
+}
+
+// 判断给定的URL是否为网络图片URL（以http或https开头）
+export const isNetImageUrl = (imageUrl) => {
+    // 检查是否以 http 或 https 开头
+    if (/^(https?:\/\/)/.test(imageUrl)) {
+        return true; // 是远程图片 URL
+    }
+
+    // 在这里可以添加其他判断条件，例如检查是否以 file:// 开头（针对某些特定平台）
+    // 或者检查是否以应用内部的相对路径开头（例如 /static/images/）
+
+    // 如果没有其他明确的本地 URL 格式，可以认为不是远程的就是本地的
+    return false; // 不是远程图片 URL，可能是本地 URL 或其他格式
+};
+
+// 使用示例：将网络图片URL转换为Base64编码的字符串（仅H5平台）
+export const convertNetImageUrlToBase64OfH5 = async (imageUrl) => {
+    // #ifdef H5
+    try {
+        const response = await fetch(imageUrl);
+        const blob = await response.blob();
+        const base64 = await blobToBase64(blob);
+        return base64;
+    } catch (error) {
+        console.error("Error fetching image:", error);
+        throw error;
+    }
+
+    // #endif
+};
+
+
+// 将网络图片URL转换为本地临时文件路径（使用uni.downloadFile方法）
+export const convertNetImgUrlToLocal = (imageUrl) => {
+    return new Promise((resolve, reject) => {
+      console.log('下载图片中...');
+        uni.downloadFile({
+            url: imageUrl,
+            success: (downloadResult) => {
+                if (downloadResult.statusCode === 200) {
+                    resolve(downloadResult.tempFilePath);
+                    console.log('下载图片成功');
+                } else {
+                    reject(
+                        "转化网络图片到本地临时图片失败：" + downloadResult.statusCode
+                    );
+                    console.log( "转化网络图片到本地临时图片失败：" + downloadResult.statusCode);
+                }
+            },
+            fail: (error) => {
+                reject("转化网络图片到本地临时图片失败：" + error.message);
+                console.log("转化网络图片到本地临时图片失败：" + error.message);
+            },
+        });
+    });
+};
+
+
+// 从对象中提取指定属性
+export function pick(object, keys) {
+  // 创建一个新对象
+  const result = {};
+  
+  // 确保 keys 是数组
+  const keysArray = Array.isArray(keys) ? keys : [keys];
+  
+  // 遍历 keys 数组
+  for (const key of keysArray) {
+    // 检查对象是否有该属性
+    if (object && Object.prototype.hasOwnProperty.call(object, key)) {
+      // 将属性添加到结果对象
+      result[key] = object[key];
+    }
+  }
+  
+  return result;
+}
+
+// 从数组末尾开始查找符合条件的元素的索引
+export function findLastIndex(array, predicate, fromIndex) {
+  // 处理边界情况
+  if (!Array.isArray(array)) {
+    return -1;
+  }
+  
+  const length = array.length;
+  if (length === 0) {
+    return -1;
+  }
+  
+  // 确定起始索引
+  let index = length - 1;
+  if (fromIndex !== undefined) {
+    index = fromIndex < 0 ? Math.max(length + fromIndex, 0) : Math.min(fromIndex, length - 1);
+  }
+  
+  // 从后向前遍历
+  for (; index >= 0; index--) {
+    // 检查当前元素是否符合条件
+    if (typeof predicate === 'function') {
+      if (predicate(array[index], index, array)) {
+        return index;
+      }
+    } else if (predicate === array[index]) {
+      return index;
+    } else if (typeof predicate === 'object' && predicate !== null) {
+      let matches = true;
+      for (const key in predicate) {
+        if (predicate[key] !== array[index][key]) {
+          matches = false;
+          break;
+        }
+      }
+      if (matches) {
+        return index;
+      }
+    }
+  }
+  
+  return -1;
+}
+
+// 生成唯一标识符
+let uniqueIdCounter = 0;
+export function uniqueId(prefix) {
+  // 增加计数器
+  uniqueIdCounter++;
+  
+  // 添加前缀（如果提供）
+  if (prefix !== undefined) {
+    return `${prefix}${uniqueIdCounter}`;
+  }
+  
+  return `${uniqueIdCounter}`;
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "uni-image-editor",
+  "version": "1.0.0",
+  "description": "UniApp Vue2 图片编辑插件",
+  "main": "image-editor.vue",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "uniapp",
+    "vue2",
+    "image-editor",
+    "图片编辑",
+    "涂鸦",
+    "裁剪",
+    "添加文字"
+    
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "bugs": {
+    "url": ""
+  },
+  "homepage": ""
+}