前端上传图片压缩方法

最新推荐文章于 2025-06-11 15:26:10 发布

原创最新推荐文章于 2025-06-11 15:26:10 发布 · 343 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #html

本文介绍了一种使用HTML5 Canvas进行图片压缩并转换为Base64编码的方法。通过设置图片宽度为1000像素，并保持长宽比不变，实现图片的等比例压缩。压缩后的图片质量设为0.7，最终将处理好的图片转换为Base64格式，方便在网络上传输。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

dealImage(path, callback) {
var img = new Image();
img.src = path;
img.onload = function() {
//默认按比例压缩
// var w = this.width,
// h = this.height;
let w = 1000;
let h = (w / this.width) * this.height;
var quality = 0.7; // 默认图片质量为0.7
 
//生成canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
 
// 创建属性节点
canvas.setAttribute("width", 1000);
canvas.setAttribute("height", h);
 
ctx.drawImage(this, 0, 0, w, h);
// quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL("image/jpeg", quality);
// 回调函数返回base64的值
callback(base64);
};
},