[zhongjyuan]图片处理函数

imageSize：获取图像尺寸

实际效果

/**
  * 获取图像尺寸
  * @param {String} imageUrl - 图像的URL
  * @param {Function} callback - 图像加载完成后的回调函数
  * @example
  * imageSize("https://example.com/image.jpg", function(dimensions) {
  *   console.log("Width:", dimensions.width);
  *   console.log("Height:", dimensions.height);
  * });
  * @example
  * imageSize("https://example.com/image2.jpg", handleSize);
  * function handleSize(dimensions) {
  *   console.log("Width:", dimensions.width);
  *   console.log("Height:", dimensions.height);
  * }
  */
 imageSize: function (imageUrl, callback) {
  // 创建一个新的 Image 对象
  var img = new Image();

  // 设置图像的源 URL
  img.src = imageUrl;

  // 当图像加载完成后执行回调函数
  img.onload = function () {
   if (callback) {
    // 调用回调函数，并传入图像的宽度和高度作为参数
    callback({
     width: img.width,
     height: img.height,
    });
   }
  };
 },

imageToBase64：将图像转换为 Base64 编码

实际效果

 /**
  * 将图像转换为 Base64 编码
  * @param {HTMLImageElement} image - 要转换的图像
  * @returns {string} - 转换后的 Base64 编码字符串
  * @example
  * const img = new Image();
  * img.src = "https://example.com/image.jpg";
  * const base64Data = imageToBase64(img);
  * console.log(base64Data);
  */
 imageToBase64: function (image) {
  // 创建一个新的 canvas 元素
  var canvas = document.createElement("canvas");

  // 设置 canvas 的宽度和高度与图像相同
  canvas.width = image.width;
  canvas.height = image.height;

  // 获取 2D 绘图上下文
  var ctx = canvas.getContext("2d");

  // 将图像绘制到 canvas 上
  ctx.drawImage(image, 0, 0, image.width, image.height);

  // 获取图像的扩展名
  var ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();

  // 使用指定的扩展名将 canvas 转换为 Base64 字符串
  return canvas.toDataURL("image/" + ext);
 },

imageThemeColor：将图像转换为主题颜色

实际效果

 /**
  * 将图像转换为主题颜色
  * @param {string} imageUrl - 图像的 URL
  * @param {function} callback - 回调函数，接收转换后的颜色作为参数
  * @param {number} light - 亮度参数，默认为 1.0
  * @example
  * toThemeColor("https://example.com/image.jpg", function(color) {
  *   console.log(color);
  * });
  */
 imageThemeColor: function (imageUrl, callback, light) {
  if (!light) {
   light = 1.0; // 默认亮度为1.0
  }

  var img = new Image(); // 创建一个图像对象
  img.src = imageUrl; // 设置图像的URL
  img.crossOrigin = "anonymous"; // 跨域声明（仅在 Chrome 和 Firefox 上有效）

  img.onload = function () {
   // 图像加载完成后执行
   try {
    var canvas = document.createElement("canvas"); // 创建画布元素
    canvas.width = img.width; // 设置画布的宽度为图像的宽度
    canvas.height = img.height; // 设置画布的高度为图像的高度

    var ctxt = canvas.getContext("2d"); // 获取2D绘图上下文
    ctxt.drawImage(img, 0, 0); // 在画布上绘制图像
    var data = ctxt.getImageData(0, 0, img.width, img.height).data; // 读取整张图片的像素数据

    var r = 0, // 红色总和
     g = 0, // 绿色总和
     b = 0, // 蓝色总和
     a = 0; // 透明度总和
    var red, green, blue, alpha;
    var pixel = img.width * img.height; // 像素总数
    for (var i = 0, len = data.length; i < len; i += 4) {
     // 遍历像素数据
     red = data[i]; // 红色分量
     r += red; // 红色色深累加
     green = data[i + 1]; // 绿色分量
     g += green; // 绿色色深累加
     blue = data[i + 2]; // 蓝色分量
     b += blue; // 蓝色色深累加
     alpha = data[i + 3]; // 透明度分量
     a += alpha; // 透明度累加
    }

    r = parseInt((r / pixel) * light); // 计算平均红色色深，并乘以亮度参数
    g = parseInt((g / pixel) * light); // 计算平均绿色色深，并乘以亮度参数
    b = parseInt((b / pixel) * light); // 计算平均蓝色色深，并乘以亮度参数
    a = 1; // 固定透明度为1

    var color = "rgba(" + r + "," + g + "," + b + "," + a + ")"; // 构造颜色字符串
    if (callback) {
     callback(color); // 执行回调函数，将颜色作为参数传递
    }
   } catch (e) {
    console.debug(e); // 捕获异常，并打印错误信息
   }
  };
 },

本文由 mdnice 多平台发布