Можно ли изменить размер изображения (на стороне клиента) в форме html перед загрузкой?

У меня есть стандартная форма ввода html, которая включает поле для загрузки файла (изображения).Можно ли изменить размер изображения (на стороне клиента) в форме html перед загрузкой?

К сожалению, я не могу отредактировать бэкэнд-php, обрабатывающий файл, но мне нужно изменить размер изображений до определенного размера.

Я думал, что смогу снять этот трюк, изменив размеры изображений с помощью jquery или альтернативных методов на стороне клиента, перед формой представления в форму PHP.

Возможно ли это? Кто-нибудь знает хороший метод?

Спасибо !!!

источник

2013-07-11 Mark

Возможно, вы могли бы нарисовать изображение на холсте, а затем toDataUrl. Не уверен, что это сработает. – Amadan

Вы можете использовать новый FileReader, чтобы пользователь мог выбрать изображение из своей локальной файловой системы.

Тогда вы можете использовать холст для изменения размера изображения по мере необходимости.

enter image description here

Этот код позволяет пользователю выбрать локальный файл изображения.

Изображение будет масштабироваться до половины размера на стороне клиента.

<!doctype html> 
<html> 
<head> 
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 
<title>Image preview example</title> 
<script type="text/javascript"> 
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; 

oFReader.onload = function (oFREvent) { 

    var img=new Image(); 
    img.onload=function(){ 
     document.getElementById("originalImg").src=img.src; 
     var canvas=document.createElement("canvas"); 
     var ctx=canvas.getContext("2d"); 
     canvas.width=img.width/2; 
     canvas.height=img.height/2; 
     ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height); 
     document.getElementById("uploadPreview").src = canvas.toDataURL(); 
    } 
    img.src=oFREvent.target.result; 
}; 

function loadImageFile() { 
    if (document.getElementById("uploadImage").files.length === 0) { return; } 
    var oFile = document.getElementById("uploadImage").files[0]; 
    if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; } 
    oFReader.readAsDataURL(oFile); 
} 
</script> 
</head> 

<body onload="loadImageFile();"> 
    <form name="uploadForm"> 
    <table> 
     <tbody> 
     <tr> 
      <td><img id="originalImg"/></td> 
      <td><img id="uploadPreview"/></td> 
      <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td> 
     </tr> 
     </tbody> 
    </table> 
    </form> 
</body> 
</html>

Современные браузеры поддерживают FileReader (но для IE вам нужно 10+).

источник

2013-07-11 02:38:09 markE

как я могу добавить изображение с измененным размером изображения в mysql – INOH

Можно ли изменить размер изображения (на стороне клиента) в форме html перед загрузкой?

ответ

Смежные вопросы