Javascriptによる画像圧縮

Question

私は画像をアップロードし、サムネイルとフルサイズの画像の両方を表示する必要があります。

ユーザーが右クリックしてサムネイルを保存すると、サムネイル画像は保存される（サイズが小さくなる）必要があります。

はここに私の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]); 
}; 

Answer 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();