[英]Resizing image before upload
在將表單自動提交到服務器之前,我正在整理HTML + JS代碼以調整圖片大小。 我最初編寫了自動表單提交的代碼,然后添加了圖像大小調整的邏輯。 自動表單提交工作但圖像大小調整不起作用。 請提供指導。 先感謝您。
<!DOCTYPE html>
<html>
<head>
<title>Flask App</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-
scalable=no">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
$(function(){
//JS Code snippet 1 - Automatic form submission on file selection
$("#file_select").change(function(){
$("#upload_form").submit();
$("#upload_form_div").hide();
$("#loading").show();
//JS Code snippet 2 - Image Resizing
var filesToUpload = inputs.files;
var img = document.createElement("img");
var reader = new FileReader();
reader.onload = function(e) {img.src = e.target.result}
reader.readAsDataURL(file);
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload");
xhr.send(ctx.toDataURL());
});
});
</script>
</head>
<body>
<h1 class="logo">Upload Picture</h1>
<div id="upload_form_div">
<form id="upload_form" method="POST" enctype="multipart/form-data" action="upload">
<input type="file" name="file" capture="camera" id="file_select"/>
</form>
</div>
<div id="loading" style="display:none;">
Uploading your picture...
</div>
</body>
</html>
更新 - (2014年3月28日)來自@yuhua的組合代碼和JIC庫中的 'uploader'功能。 更新后的代碼如下
當我在筆記本電腦上的Chrome瀏覽器中打開我的webapp時,一切正常。 但是,當我通過iPhone 4s上的Chrome瀏覽器打開我的webapp從相機上傳圖像時,我調整大小的圖像並沒有按預期出現。 請在下面找到原始和調整大小的圖像。 請糾正我做錯了什么。
$("#file_select").change(function (e) {
var fileReader = new FileReader();
fileReader.onload = function (e) {
var img = new Image();
img.onload = function () {
var MAX_WIDTH = 3264;
var MAX_HEIGHT = 2448;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(this, 0, 0, width, height);
this.src = canvas.toDataURL();
//document.body.appendChild(this);//remove this if you don't want to show it
var newImageData = canvas.toDataURL("image/png", 70/100);
var result_image_obj = new Image();
result_image_obj.src = newImageData;
//======= Step 2 - Upload compressed image to server =========
//Here we set the params like endpoint, var name (server side) and filename
var server_endpoint = 'upload',
server_var_name = 'file',
filename = "new.jpg";
//This is the callback that will be triggered once the upload is completed
var callback = function(response){ console.log(response); }
//Here goes the magic
$("#result").load(jic.upload(result_image_obj, server_endpoint, server_var_name, filename, callback));
}
img.src = e.target.result;
console.log(img);
}
fileReader.readAsDataURL(e.target.files[0]);
});
我認為.mozGetAsFile()
可能不支持您的瀏覽器。 我在這里修改了你的代碼示例:
$("#file_select").change(function (e) {
var fileReader = new FileReader();
fileReader.onload = function (e) {
var img = new Image();
img.onload = function () {
var MAX_WIDTH = 100;
var MAX_HEIGHT = 100;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(this, 0, 0, width, height);
this.src = canvas.toDataURL();
document.body.appendChild(this);//remove this if you don't want to show it
}
img.src = e.target.result;
}
fileReader.readAsDataURL(e.target.files[0]);
});
這是一個參考: 輸出HTML5畫布作為圖像,howto?
看一看頁面底部(瀏覽器支持)
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement
您可以使用PHP而不是HTML和JavaScript來嘗試它。 我們正在做的是我們將調整大小的圖像的路徑存儲到數據庫中。
public function Resize_image($width = 0, $height = 0, $quality = 90, $filename_in = null, $filename_out = null)
{
$this->Filename = $filename_in;
$this->Extension = strtolower($this->Get_file_extension($this->Filename));
$size = getimagesize($this->Filename);
$ratio = $size[0] / $size[1];
if ($ratio >= 1){
$scale = $width / $size[0];
} else {
$scale = $height / $size[1];
}
// make sure its not smaller to begin with!
if ($width >= $size[0] && $height >= $size[1]){
$scale = 1;
}
// echo $fileext;
switch ($this->Extension)
{
case "jpg":
$im_in = imagecreatefromjpeg($this->Filename);
$im_out = imagecreatetruecolor($size[0] * $scale, $size[1] * $scale);
imagecopyresampled($im_out, $im_in, 0, 0, 0, 0, $size[0] * $scale, $size[1] * $scale, $size[0], $size[1]);
imagejpeg($im_out, $filename_out, $quality);
break;
case "gif":
$im_in = imagecreatefromgif($this->Filename);
$im_out = imagecreatetruecolor($size[0] * $scale, $size[1] * $scale);
imagecopyresampled($im_out, $im_in, 0, 0, 0, 0, $size[0] * $scale, $size[1] * $scale, $size[0], $size[1]);
imagegif($im_out, $filename_out, $quality);
break;
case "png":
$im_in = imagecreatefrompng($this->Filename);
$im_out = imagecreatetruecolor($size[0] * $scale, $size[1] * $scale);
imagealphablending($im_in, true); // setting alpha blending on
imagesavealpha($im_in, true); // save alphablending setting (important)
imagecopyresampled($im_out, $im_in, 0, 0, 0, 0, $size[0] * $scale, $size[1] * $scale, $size[0], $size[1]);
imagepng($im_out, $filename_out, 9);
break;
}
imagedestroy($im_out);
imagedestroy($im_in);
}
現在您可以像這樣使用此函數來調整圖像大小並將其復制到所需的目錄。
Resize_image($width, $height, $quality=90, $filename_in, $filename_out)
例如:
Resize_image(150, 150, 90, "Directory".$image, "Directory".$image_without_extension."_thumb.".$image_ext); //makes file_thumb.ext
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.