我需要打開圖像並在上傳前以圖形方式進行動態編輯。首先用戶應該選擇圖像文件和界面給我返回文件的路徑,然後用戶應該看到預覽,並且他/她是否要選擇全部或部分圖像上傳。動態上傳和編輯圖像 - 圖形
是否有任何JavaScript或jQuery中的功能可以爲我做到這一點,或者我必須使用插件,如果是的話,哪些插件?
我需要打開圖像並在上傳前以圖形方式進行動態編輯。首先用戶應該選擇圖像文件和界面給我返回文件的路徑,然後用戶應該看到預覽,並且他/她是否要選擇全部或部分圖像上傳。動態上傳和編輯圖像 - 圖形
是否有任何JavaScript或jQuery中的功能可以爲我做到這一點,或者我必須使用插件,如果是的話,哪些插件?
There are many good jQuery plugins are available to crop image on the fly,
HTML圖片上傳表單
<!-- image preview area-->
<img id="uploadPreview" style="display:none;"/>
<!-- image uploading form -->
<form action="upload.php" method="post" enctype="multipart/form-data">
<input id="uploadImage" type="file" accept="image/jpeg" name="image" />
<input type="submit" value="Upload">
<!-- hidden inputs -->
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
</form>
的jQuery和JavaScript
// set info for cropping image using hidden fields
function setInfo(i, e) {
$('#x').val(e.x1);
$('#y').val(e.y1);
$('#w').val(e.width);
$('#h').val(e.height);
}
$(document).ready(function() {
var p = $("#uploadPreview");
// prepare instant preview
$("#uploadImage").change(function(){
// fadeOut or hide preview
p.fadeOut();
// prepare HTML5 FileReader
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
oFReader.onload = function (oFREvent) {
p.attr('src', oFREvent.target.result).fadeIn();
};
});
// implement imgAreaSelect plug in (http://odyniec.net/projects/imgareaselect/)
$('img#uploadPreview').imgAreaSelect({
// set crop ratio (optional)
aspectRatio: '1:1',
onSelectEnd: setInfo
});
});
PHP:
<?php
$valid_exts = array('jpeg', 'jpg', 'png', 'gif');
$max_file_size = 200 * 1024; #200kb
$nw = $nh = 200; # image with & height
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_FILES['image'])) {
if (! $_FILES['image']['error'] && $_FILES['image']['size'] < $max_file_size) {
# get file extension
$ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));
# file type validity
if (in_array($ext, $valid_exts)) {
$path = 'uploads/' . uniqid() . '.' . $ext;
$size = getimagesize($_FILES['image']['tmp_name']);
# grab data form post request
$x = (int) $_POST['x'];
$y = (int) $_POST['y'];
$w = (int) $_POST['w'] ? $_POST['w'] : $size[0];
$h = (int) $_POST['h'] ? $_POST['h'] : $size[1];
# read image binary data
$data = file_get_contents($_FILES['image']['tmp_name']);
# create v image form binary data
$vImg = imagecreatefromstring($data);
$dstImg = imagecreatetruecolor($nw, $nh);
# copy image
imagecopyresampled($dstImg, $vImg, 0, 0, $x, $y, $nw, $nh, $w, $h);
# save image
imagejpeg($dstImg, $path);
# clean memory
imagedestroy($dstImg);
echo "<img src='$path' />";
} else {
echo 'unknown problem!';
}
} else {
echo 'file is too small or large';
}
} else {
echo 'file not set';
}
} else {
echo 'bad request!';
}
?>
Referrence網址:http://www.w3bees.com/2013/08/image-upload-and-crop-with-jquery-and.html
Mr.Downvoter我可以知道原因,給出的URL有一步一步的基本教程,瞭解圖片上傳和預覽概念。那有什麼問題? –
http://stackoverflow.com/help/deleted-answers –
我沒有downvote,但請注意,你應該在這裏發佈答案的重要部分,在這個網站上,或者你的帖子風險被刪除[見常見問題解答它提到的答案几乎不超過鏈接。](http://stackoverflow.com/faq#deletion)如果您願意,您可能仍然包含鏈接,但僅作爲「參考」。答案應該獨立,不需要鏈接。 – Taryn
有一個非常好的名爲谷歌。 – Broxzier
我使用了它並且沒有發現任何特別的東西 –
嘗試尋找HTML5畫布,並且根據您的服務器,在存儲圖像本身之前,使用服務器端腳本進行相同的更改。 – Broxzier