[zhongjyuan]图片处理函数

80 阅读2分钟

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); // 捕获异常,并打印错误信息
			}
		};
	},