在javascript中减小或压缩图像大小[重复]答案

【问题标题】：Reduce or compress the image size in javascript [duplicate]在javascript中减小或压缩图像大小[重复]
【发布时间】：2020-07-09 20:04:39
【问题描述】：

我正在将图像上传到 Web 应用程序的 Firebase 存储中，但有时图像大小可能为 6 到 10 MB。我无法减小图像的大小。以下代码采用图像的原始大小。

var fileReference = document.getElementById("fileName").files[0];
var filename = Math.random().toString(36).slice(2).concat(fileReference.name);

【问题讨论】：

标签： javascript css file-upload

【解决方案1】：

您可以使用此功能压缩图片

function compress(source_img_obj, quality, output_format, callback) {
    var mime_type = "image/jpeg";
    if (output_format == "png") {
        mime_type = "image/png";
    }
    var image = new Image();
    image.onload = function() {
        var cvs = document.createElement('canvas');
        cvs.width = image.naturalWidth;
        cvs.height = image.naturalHeight;
        var ctx = cvs.getContext("2d").drawImage(image, 0, 0);
        var newImageData = cvs.toDataURL(mime_type, quality / 100);
        var result_image_obj = new Image();
        result_image_obj.src = newImageData;
        callback(result_image_obj);
    };
    image.src = source_img_obj
}


var fileReference = document.getElementById("fileName").files[0];
compress(window.URL.createObjectURL(fileReference), 70, "jpeg", 
function(img){
  console.log(img.src); // (Base64)
})

【讨论】：

图片大小还是一样