我有一个要求,我必须上传图像并显示缩略图和全尺寸图像。
当用户右键单击并保存缩略图时,缩略图图像应保存(缩小尺寸)。
这是我的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]);
};
答案 0 :(得分:0)
您可以使用canvas尝试此方法。它实际上会缩小图像尺寸。
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();