通过 Javascript 压缩图像答案

【问题标题】：image compression through Javascript通过 Javascript 压缩图像
【发布时间】：2017-08-30 05:09:13
【问题描述】：

我有一个要求，我必须上传图像并显示缩略图和全尺寸图像。

当用户右击保存缩略图时，缩略图应该会被保存（更小）。

这是我的 HTML

<input type='file' accept='image/*' onchange='openFile(event)'><br>
    <img id='output' width="150" height="150">
    <img id='output1'>

这是我的脚本

var openFile = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function() {
        var dataURL = reader.result;
        var output = document.getElementById('output');
        var output1 = document.getElementById('output1');
        output.src = dataURL;
        output1.src = dataURL;
    };
    reader.readAsDataURL(input.files[0]);
};

【问题讨论】：

已保存？在哪里？如何？这里的实际问题是什么？
从 HTML 页面到硬盘。

标签： javascript html image compression filereader

【解决方案1】：

您可以使用画布尝试这种方法。它实际上会减小图像大小。

output.src = dataURL;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width=150
canvas.height=150
ctx.drawImage(output, 0, 0, 150, 150);
output.src = canvas.toDataURL();

【讨论】：