首先通过Canvas重绘图片以调整尺寸，再结合质量参数导出，可有效压缩图片体积。具体步骤包括：创建canvas并获取2D上下文，加载图片时设置crossOrigin避免跨域问题，在图片加载后按目标尺寸绘制到canvas，最后调用toDataURL或toBlob设置image/jpeg类型及0.7~0.8质量系数生成压缩数据；为防内存溢出，需限制图片最长边不超过阈值（如1920像素），计算缩放比例后绘制；批量处理时可通过监听input文件选择事件，使用FileReader读取多个文件，逐个执行压缩流程并将结果存入数组用于预览或上传。
如果您需要在HTML5环境中对图片进行压缩处理，可以通过Canvas的绘图能力实现图像尺寸和质量的调整。以下是几种利用Canvas压缩图片的方法，帮助您减小图片体积并保持可用清晰度。
一、使用Canvas调整图片尺寸
通过Canvas元素可以重新绘制图片，并指定更小的宽度和高度，从而降低图片分辨率，达到压缩的目的。这种方法适合需要统一图片尺寸的场景。
1、创建一个<canvas>元素，并获取其2D渲染上下文。
2、使用new Image()加载原始图片，确保设置crossOrigin属性以避免跨域污染Canvas。
立即学习“前端免费学习笔记（深入）”；
3、在图片加载完成后，调用canvas.getContext('2d').drawImage()方法将图片绘制到Canvas上，同时传入目标宽度和高度。
4、调用canvas.toDataURL('image/jpeg', 0.8)将Canvas内容导出为Base64格式的图片数据，其中第二个参数为质量系数。
二、控制图片导出质量
Canvas支持在导出图片时设置质量参数，这对于减小文件体积非常有效，尤其是在保存为JPEG格式时。通过调节质量值，可以在清晰度和体积之间取得平衡。
1、在调用toDataURL或toBlob方法时，指定MIME类型为image/jpeg。
2、传入质量参数，取值范围为0到1，建议设置为0.7至0.8之间，可在视觉无明显失真情况下显著减小体积。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
3、若使用toBlob，可将结果封装为Blob对象，便于后续上传或存储。
三、限制最大边长防止内存溢出
当处理高分辨率图片时，直接加载可能造成浏览器内存不足或Canvas尺寸超限。通过限制图片的最大边长，可有效避免此类问题。
1、读取图片原始宽高，计算缩放比例，确保最长边不超过设定阈值（如1920像素）。
2、根据比例计算Canvas的目标绘制尺寸。
3、按新尺寸绘制图片并导出，避免因过大图像导致操作失败。
四、批量压缩多张图片
在实际应用中，往往需要处理多个文件。可通过循环遍历文件列表，逐个执行Canvas压缩流程，并将结果收集为数组。
1、监听文件输入控件的change事件，获取用户选择的多个图片文件。
2、使用FileReader逐个读取文件内容并转换为Base64或Blob URL。
3、每张图片加载完成后，执行Canvas绘制与压缩逻辑。
4、将压缩后的结果存入数组，可用于预览或提交到服务器。
