当前位置：首页 > news >正文

实现图片自动压缩算法，canvas压缩图片方法

news 来源：原创 2025/5/21 5:29:52

背景：

在使用某些支持webgl的图形库（eg：PIXI.js，fabric.js）场景中，如果加载的纹理超过webgl可处理的最大纹理限制，会导致渲染的纹理缺失，甚至无法显示。

方案

实现图片自动压缩算法，自动获取 webgl 支持的最大纹理大小，设置一个压缩比率，循环压缩图片的像素，直到小于最大纹理限制。
返回 canvas，方便第三方库继续处理，如果需要 image，可自行调用canvas方法转换成image。

注意：如果不需要像素处理，删除处理像素相关的代码即可。

vim imageHelp.ts

/**** @param imgStr image base64 | url* @param ratio 压缩比率* @returns 压缩后的canvas对象，获取image 使用 canvas.convertToBlob()*/
export async function compressImage(options: { imgStr: string; ratio?: number; negate?: 0 | 1 }) {const { imgStr, ratio = 0.5, negate = 0 } = optionsconst isInverted = negate == 1 // 底色是否反黑色// 2. 添加错误处理if (!imgStr) throw new Error('Invalid image source')if (ratio <= 0 || ratio > 1) throw new Error('Invalid compression ratio')try {const img = await loadImage(imgStr)const maxTextureSize = getMaxTextureSize()// 5. 优化尺寸计算逻辑const { width, height } = calculateTargetSize(img, ratio, maxTextureSize)// 6. 使用 OffscreenCanvas 提升性能const { canvas, ctx } = createCanvasContext(width, height)ctx.drawImage(img, 0, 0, width, height)// 7. 添加 Worker 终止逻辑防止内存泄漏const worker = new CanvasWorker()const cleanup = () => worker.terminate()return await new Promise<{ canvas: OffscreenCanvas; width: number; height: number }>((resolve, reject) => {worker.onmessage = (e) => {try {// imageData.data.buffer 所有权已转移，无法更新数据 imageData.data.buffer//  重新构建 ImageData 对象const updatedImageData = new ImageData(new Uint8ClampedArray(e.data.buffer),canvas.width,canvas.height)// 将修改后的图像数据放回画布ctx.putImageData(updatedImageData, 0, 0)cleanup()if (width > maxTextureSize || height > maxTextureSize) {// 压缩后的图像需要缩放，保持原图像的视觉大小ctx.scale(1 / ratio, 1 / ratio)}resolve({canvas,width,height,})} catch (error) {cleanup()reject(error)}}worker.onerror = (error) => {cleanup()reject(error)}// 8. 优化数据传输const imageData = ctx.getImageData(0, 0, width, height)// 传递图像数据给worker，第二个参数是一个Transferable对象，可以将数据从一个线程传递到另一个线程，而不是复制worker.postMessage({buffer: imageData.data.buffer,targetColor: isInverted ? [0, 0, 0, 255] : [255, 255, 255, 255],tolerance: 50, // 添加颜色容差参数},[imageData.data.buffer])})} catch (error) {throw new Error(`Image processing failed: ${error?.message}`)}
}
function getMaxTextureSize(): number {const gl = document.createElement('canvas').getContext('webgl')return gl ? gl.getParameter(gl.MAX_TEXTURE_SIZE) : 4096 // 默认值
}function calculateTargetSize(img: { width: number; height: number },ratio: number,maxSize: number
) {let width = img.widthlet height = img.height// 压缩图像像素while (width > maxSize || height > maxSize) {width *= ratioheight *= ratio}return {width,height,}
}function createCanvasContext(width: number, height: number) {const canvas = new OffscreenCanvas(width, height)canvas.width = widthcanvas.height = heightreturn {canvas,ctx: canvas.getContext('2d')!,}
}

vim canvas.worker.ts

self.onmessage = (event) => {const { buffer, targetColor, isInverted } = event.data// 转换为 Uint8ClampedArray 进行像素级别的处理const data = new Uint8ClampedArray(buffer);// 遍历每个像素for(let i = 0; i < data.length; i += 4) {const r = data[i];     // 红色通道const g = data[i + 1]; // 绿色通道const b = data[i + 2]; // 蓝色通道// 检查该像素是否为需要删除的颜色if(r === targetColor[0] && g === targetColor[1] && b === targetColor[2]) {// 将黑色像素设置为透明data[i + 3] = 0; // Alpha通道设置为0}// 反转颜色if(isInverted) {data[i] = 255 - data[i]data[i + 1] = 255 - data[i + 1]data[i + 2] = 255 - data[i + 2]}}self.postMessage(data)
}