1
我的任務是：
第一步：上傳圖片。
第二步：檢查上傳圖像的標準與我們的最大尺寸（XY-X或如：500X500）
第三步：如果條件匹配，然後創建145X190尺寸
通過我做的縮略圖：我能夠上傳圖片並完成標準驗證。
現在我想創建一個圖像是由用戶上傳的縮略圖（145X190尺寸 ）
我coading是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript">
$(function() {
function readImage(file) {
var reader = new FileReader();
var image = new Image();
var maxh = 600;
var maxw = 600;
reader.readAsDataURL(file);
reader.onload = function (_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function() {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~ (file.size/1024) + 'KB';
if (w > maxw && h > maxh) {
alert("Height and width is bigger then over max criteria pls select image max height and width =2024X2024");
alert(width);
alert(height);
} else {
$('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
}
};
image.onerror = function() {
alert('Invalid file type: ' + file.type);
};
};
}
$("#choose").change(function (e) {
if (this.disabled) return alert('File upload not supported!');
var F = this.files;
if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});
});
</script>
<style>
</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple" onchange="readImage(this);" />
<br>
<div id="uploadPreview" ></div>
</body>
</html>
問題：上傳圖片後創建縮略圖。
我也創建了縮略圖編碼，但無法將兩種代碼結合起來。
我的代碼是：
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
var thumbWidth = 145, thumbHeight = 190;
function preview(img, selection) {
var scaleX = thumbWidth/(selection.width || 1);
var scaleY = thumbHeight/(selection.height || 1);
$('#ferret + div > img').css({
width: Math.round(scaleX * $("#ferret").width()) + 'px',
height: Math.round(scaleY * $("#ferret").height()) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
}
$(document).ready(function() {
$('<div><img src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" style="position: relative;" /><div>')
.css({
float: 'right',
position: 'relative',
overflow: 'hidden',
width: thumbWidth + 'px',
height: thumbHeight + 'px'
})
.insertAfter($('#ferret'));
$('#ferret').imgAreaSelect({aspectRatio: thumbWidth+':'+thumbHeight, onSelectChange: preview ,minWidth: 100,minHeight: 100,maxWidth: 180,maxHeight: 180});
});
</script>
</head>
<body>
<img src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" id="ferret" ><br>
</body>
</html>
希望你能理解我的問題...
是否要創建僅在客戶端上的縮略圖，或者你有在服務器端做的圖像處理的選項。？ – Shiva
位於同一頁面的用戶端 – sonalgoyal