php+jquery在線切圖代碼[防dedecms]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cropper</title>
<!-- css -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/imagecropper/assets/skins/sam/imagecropper.css" />
<!-- js -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&2.5.2/build/dragdrop/dragdrop-min.js&2.5.2/build/element/element-beta-min.js&2.5.2/build/resize/resize-beta-min.js&2.5.2/build/imagecropper/imagecropper-beta-min.js&2.5.2/build/connection/connection-min.js&2.5.2/build/json/json-min.js"></script>
<style type="text/css">
a:link, a:visited, a:active{
color: #000;
text-decoration: none;
font-weight: bold;
}
a:hover{
color: #fff;
background-color: #000;
}
#hd{
font-size: 2em;
font-weight: bold;
text-align: left;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
margin: 10px 0 10px 0;
}
#uploadForm, #downloadLink{
text-align: center;
}
#imageContainer{
margin: 20px 0px 20px 0;
}
#ft{
margin-top: 10px;
padding-top: 10px;
border-top:1px solid #ccc;
text-align: center;
}
</style>
<script type="text/javascript">
uploader = {
carry: function(){
// set form
YAHOO.util.Connect.setForm('uploadForm', true);
// upload image
YAHOO.util.Connect.asyncRequest('POST', 'upload.php', {
upload: function(o){
// parse our json data
var jsonData = YAHOO.lang.JSON.parse(o.responseText);
// put image in our image container
YAHOO.util.Dom.get('imageContainer').innerHTML = '<img id="yuiImg" src="' + jsonData.image + '" width="' + jsonData.width + '" height="' + jsonData.height + '" alt="" />';
// init our photoshop
photoshop.init(jsonData.image);
// get first cropped image
photoshop.getCroppedImage();
}
});
}
};
photoshop = {
image: null,
crop: null,
//url: null,
init: function(image){
// set our image
photoshop.image = image;
// our image cropper from the uploaded image
photoshop.crop = new YAHOO.widget.ImageCropper('yuiImg');
photoshop.crop.on('moveEvent', function() {
// get updated coordinates
photoshop.getCroppedImage();
});
},
getCroppedImage: function(){
var coordinates = photoshop.getCoordinates();
var url = 'crop.php?image=' + photoshop.image + '&cropStartX=' + coordinates.left +'&cropStartY=' + coordinates.top +'&cropWidth=' + coordinates.width +'&cropHeight=' + coordinates.height;
YAHOO.util.Dom.get('downloadLink').innerHTML = '<a href="' + url + '">download cropped image</a>';
},
getCoordinates: function(){
return photoshop.crop.getCropCoords();
}
};
// add listeners
YAHOO.util.Event.on('uploadButton', 'click', uploader.carry);
</script>
</head>
<body class="yui-skin-sam">
<div id="doc4" class="yui-t7">
<div id="hd">
AJAX image cropper - YUI-based
</div>
<div id="bd">
<form action="upload.php" enctype="multipart/form-data" method="post" name="uploadForm" id="uploadForm">
Image : <input type="file" name="uploadImage" id="uploadImage" />
<input type="button" id="uploadButton" value="Upload"/>
</form>
<div id="imageContainer"></div>
<div id="downloadLink"></div>
</div>
<div id="ft">
<a href="http://htmlblog.net">HTML Blog</a>
</div>
</div>
</body>
</html>
上面為index.php文件
根據x,y,來用php重新繪圖
<?php
// get variables
$imgfile = $_GET['image'];
$cropStartX = $_GET['cropStartX'];
$cropStartY = $_GET['cropStartY'];
$cropW = $_GET['cropWidth'];
$cropH = $_GET['cropHeight'];
// Create two images
$origimg = imagecreatefromjpeg($imgfile);
$cropimg = imagecreatetruecolor($cropW,$cropH);
// Get the original size
list($width, $height) = getimagesize($imgfile);
// Crop
imagecopyresized($cropimg, $origimg, 0, 0, $cropStartX, $cropStartY, $width, $height, $width, $height);
// force download nes image
header("Content-type: image/jpeg");
header('Content-Disposition: attachment; filename="'.$imgfile.'"');
imagejpeg($cropimg);
// destroy the images
imagedestroy($cropimg);
imagedestroy($origimg);
?>
這裡是圖片上的，
<?php
if(!empty($_FILES["uploadImage"])) {
// get file name
$filename = basename($_FILES['uploadImage']['name']);
// get extension
$ext = substr($filename, strrpos($filename, '.') + 1);
// check for jpg only
if ($ext == "jpg") {
// generate unique file name
$newName = 'images/'.time().'.'.$ext;
// upload files
if ((move_uploaded_file($_FILES['uploadImage']['tmp_name'], $newName))) {
// get height and width for image uploaded
list($width, $height) = getimagesize($newName);
// return json data
echo '{"image" : "'.$newName.'", "height" : "'.$height.'", "width" : "'.$width.'" }';
}
else {
echo '{"error" : "An error occurred while moving the files"}';
}
}
else {
echo '{"error" : "Invalid image format"}';
}
}
?>
