Tôi đang tạo một chương trình javascript/jquery cho một trang web để cho phép người dùng mở tệp hình ảnh cục bộ từ máy tính của họ và sau đó chương trình sẽ đổi kích thước thành kích thước biểu tượng 16 x 16 và lưu nó dưới dạng url dữ liệu.Làm cách nào để thay đổi kích thước hình ảnh bằng JavaScript/jQuery mà không cần pixel như trình duyệt?
Mọi thứ hoạt động tốt, ngoại trừ hình ảnh được chỉnh lại kích thước rất pixel. Tôi hiện đang lấy tập tin hình ảnh địa phương, và tạo một url dữ liệu từ nó. Sau đó, tạo một phần tử canvas 16 x 16, sau đó vẽ hình ảnh lên canvas và tạo một url dữ liệu mới từ đó.
Tôi muốn một số cách khác nhau để làm điều đó, vì hình ảnh mới được thay đổi kích thước rất pixelated và không trơn tru, và dường như không có răng cưa. Khi trình duyệt hiển thị hình ảnh gốc với các thuộc tính chiều rộng và chiều cao được đặt thành 16, nó trông rất đẹp và mượt mà. Đây là những gì tôi muốn. Tôi không hiểu làm thế nào để có được kết quả tương tự như những gì được hiển thị khi trình duyệt thực hiện nó. Tôi đang sử dụng Google Chrome.
tôi đã thực hiện một ví dụ nhỏ của nó ở đây: http://jsfiddle.net/5Pj8m/
Trong ví dụ tôi đã sử dụng logo jsFiddle, mặc dù bạn có thể thử nghiệm nó với bất kỳ tập tin địa phương, và xem kết quả. Có lẽ mã này có thể giúp người khác học cách làm điều đó, nhưng tôi vẫn nghĩ rằng hình ảnh thay đổi kích thước có thể hoặc nên trông đẹp hơn nhiều!
Tôi hy vọng tôi đã giải thích những gì tôi đang cố gắng làm, và rằng nó là bằng cách nào đó có thể. Bất cứ ai có thể giúp tôi hoặc con số này ra?
Đây là mã.
HTML:
<input type='file' id='inputFile'>
<table border=1><tr><td>
<span id='spanDisplayOrigFull'>OrigFull:
<img src=http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb.png>
</span>
</td><td>
<span id='spanDisplayOrigIcon'>OrigIcon:
<img src=http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb.png width='16' height='16'>
</span>
</td></tr><tr><td>
<span id='spanDisplayNewFull'>NewFull: </span>
</td><td>
<span id='spanDisplayNewIcon'>NewIcon: </span>
</td></tr></table>
JAVASCRIPT:
$('#inputFile').bind('change', function()
{
var file = inputFile.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function()
{
var imageUrlFull = reader.result;
var imageLocalFull = new Image();
imageLocalFull.src = imageUrlFull;
imageLocalFull.id = 'imageLocalFull';
imageLocalFull.onload = function()
{
var canvas = document.createElement('canvas');
canvas.width = 16; canvas.height = 16;
var context = canvas.getContext('2d');
context.drawImage(imageLocalFull, 0, 0, 16, 16);
var imageUrlIcon = canvas.toDataURL(file.type);
var imageLocalIcon = new Image();
imageLocalIcon.src = imageUrlIcon;
imageLocalIcon.id = 'imageLocalIcon';
imageLocalIcon.onload = function()
{
spanDisplayNewFull.appendChild(imageLocalFull);
spanDisplayNewIcon.appendChild(imageLocalIcon);
};
};
};
});
Có 'context.webkitImageSmoothing', nhưng có vẻ như nó chỉ ảnh hưởng đến việc làm mịn khi vẽ một hình ảnh có kích thước lớn hơn. Nó không có tác dụng khi vẽ một hình ảnh với kích thước nhỏ hơn. Bạn có thể muốn gửi yêu cầu tính năng trên http://crbug.com. – pimvdb