jQuery UI ダイアログと imgAreaSelect jQuery プラグインを使用しています。それらを組み合わせると、画像の選択に問題が発生します。他のことは機能していますが、唯一の問題は画像の選択にあります。これは私が使用しているポップアップへのリンクです。これはトリミングのデモです。下の画像が出力です。
.
ダイアログでアップロードとトリミングのプロセスを行っています。私のコードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<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>
<script type="text/javascript" src="js/jquery.imgareaselect.js"></script>
<script type="text/javascript" src="js/process.js"></script>
<?php
if(isset($_POST['submit'])){
//error variable init
$err="";
$path = "uploads/";
//allowed image format will be used for filter
$allowed_formats = array("jpg", "png", "gif", "bmp");
$imgname = $_FILES['img']['name'];
$tmpname = $_FILES['img']['tmp_name'];
$size = $_FILES['img']['size'];
if($imgname){
list($name, $ext) = explode(".", $imgname);
if(in_array($ext,$allowed_formats) && $size<(1024*1024)) {
if($ext=="jpg" || $ext=="jpeg") {
$src = imagecreatefromjpeg($tmpname);
} else if($ext=="png") {
$src = imagecreatefrompng($uploadedfile);
} else {
$src = imagecreatefromgif($uploadedfile);
}
list($width,$height)=getimagesize($tmpname);
if($width > 400){
$newwidth=399;
$newheight=($height/$width)*$newwidth;
$tmp=imagecreatetruecolor($newwidth, $newheight);
imagecopyresampled($tmp, $src, 0, 0, 0, 0, $newwidth, $newheight, $width,$height);
$image = $path.$imgname;
imagejpeg($tmp,$path.$imgname,100);
move_uploaded_file($image,$path.$imgname);
?>
<script type="text/javascript">
$(document).ready(function(){
$("#dialog-form").dialog({modal: true});
});
</script>
<?php
} else {
//moving uploaded image to uploads dir
if(move_uploaded_file($tmpname,$path.$imgname)) {
//uploaded image
$image="uploads/".$imgname;
} else {
$err="<strong>Oh snap!</strong>failed";
}
}
} else {
$err="<strong>Oh snap!</strong>Invalid file formats..!";
}
} else {
$err="<strong>Oh snap!</strong>Please select image..!";
}
}
?>
<style type="text/css">
.container {
width: 940px;
margin: 0 auto;
}
.logo{
text-align: center;
}
.mini-layout {
border: 1px solid #DDD;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);
box-shadow: 0 1px 2px rgba(0,0,0,.075);
margin-bottom: 20px;
padding: 9px;
width: 900px;
margin: 0 auto;
}
.span4,.span5{
width: 49%;
float: left;
}
.span4{
border-right: 1px solid #ddd;
}
.span5{
width: 45%;
padding:0 1em;
}
.span7{
clear: both;
border: 1px solid #ddd;
margin: 0 auto;
width: 320px;
padding: 5px;
border-radius: 5px;
}
#imgc{
margin: 0 0.3em;
border:5px solid #eee;
max-width: 400px;
}
div.frame {
background: #fff;
padding: 5px;
border: solid 2px #ddd;
}
input[type="file"],button{
padding: 5px 20px;
background: #333;
color: #fff;
border: 0;
border-radius: 4px;
cursor: pointer;
}
h1{
color: #0089ca;
}
</style>
<style>
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script>
$(function() {
$("#dialog-form").dialog({
autoOpen: false,
height: 500,
width: 650,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
allFields.val("").removeClass("ui-state-error");
}
});
$("#create-user" )
.button()
.click(function() {
$("#dialog-form").dialog("open");
});
});
</script>
</head>
<body>
<div id="dialog-form">
<fieldset>
<div class="container">
<div class="mini-layout">
<div class="span4">
<?php
//if image uploaded this section will shown
if(isset($image)) {
echo "<h1>Select an area on image</h1><img style='' src='".@$image."' id=\"imgc\" style='width:100%' >";
}
?>
</div>
<div class="span5">
<?php
//if image uploaded this section will be shown
if(@$image) {
echo '<div>';
echo '<h1>Preview</h1>';
echo '<div class="frame" width: 100%; height: 100px;">';
echo '<div id="preview" style="width: 100%; height: 100px; overflow: hidden;">';
echo '<img src="'.@$image.'" style="width: 100px; height: 100px;">';
echo '</div></div></div>';
echo "<div id='thumb'></div>";
echo "<img src='' id='cropedimg' />";
echo '<button id="cropbtn">Crop</button>';
}
?>
</div>
<div class="span7">
<?php
//if any error while uploading
if(@$err) {
echo '<div class="alert alert-error">'.@$err.'</div>';
}
?>
<form id="imgcrop" method="post" enctype="multipart/form-data" action="">
Upload image: <input type="file" name="img" id="img" />
<input type="hidden" name="imgName" id="imgName" value="<?php echo($imgname) ?>" />
<button name="submit">Submit</button>
</form>
</div>
<div style="clear:both"></div>
</div>
</div>
</fieldset>
</div>
<button id="create-user">Create new user</button>
</body>
</html>