在我的应用程序中,我在div,一个按钮中有一个图像。
我想旋转显示的图像并在使用 jquery 单击按钮时保存旋转的图像。
我已经使用了代码:
http://code.google.com/p/jquery-rotate/
和jquery代码:
$(function() { // doc ready
var rotation = 0; // variable to do rotation with
$("#img").click(function() {
rotation = (rotation + 45) % 360; // the mod 360 probably isn't needed
$("#cropbox").rotate(rotation);
});
});
网页代码:
<img src="demo_files/pool.jpg" id="cropbox" />
<input type="button" id="img" name="img" value="click" />
当我使用上面的代码时,有两个图像,一个是旧图像,另一个是旋转的图像。
在这里,我想旋转相同的图像并仅显示旋转的图像。并将旋转的图像保存在目录中。
如何使用 jquery 执行此操作?如果用jquery做不到,那么我怎么能用php/ajax呢?
//define image path
$filename="image.jpg";
// Load the image
$source = imagecreatefromjpeg($filename);
// Rotate
$rotate = imagerotate($source, $degrees, 0);
//and save it on your server...
imagejpeg($rotate, "myNEWimage.jpg");
看看:
图像旋转()
和:
file_put_contents()
图像旋转:PNG 或 JPEG 取决于文件类型,并保存在您的服务器上
// File and rotation
$rotateFilename = '/var/www/your_image.image_type'; // PATH
$degrees = 90;
$fileType = strtolower(substr('your_image.image_type', strrpos('your_image.image_type', '.') + 1));
if($fileType == 'png'){
header('Content-type: image/png');
$source = imagecreatefrompng($rotateFilename);
$bgColor = imagecolorallocatealpha($source, 255, 255, 255, 127);
// Rotate
$rotate = imagerotate($source, $degrees, $bgColor);
imagesavealpha($rotate, true);
imagepng($rotate,$rotateFilename);
}
if($fileType == 'jpg' || $fileType == 'jpeg'){
header('Content-type: image/jpeg');
$source = imagecreatefromjpeg($rotateFilename);
// Rotate
$rotate = imagerotate($source, $degrees, 0);
imagejpeg($rotate,$rotateFilename);
}
// Free the memory
imagedestroy($source);
imagedestroy($rotate);
它对我有用,试试吧。
<?php //image rotate code here
if(isset($_POST['save']))
{
$degrees=90;
$new_file=$sourceName;
$filename ="http://localhost/dostoom/files_user/1000/4/153.jpg";
$rotang = $degrees;
list($width, $height, $type, $attr) = getimagesize($filename);
$size = getimagesize($filename);
switch($size['mime'])
{
case 'image/jpeg':
$source =
imagecreatefromjpeg($filename);
$bgColor=imageColorAllocateAlpha($source, 0, 0,
0, 0);
$rotation = imagerotate($source,
$rotang,$bgColor);
imagealphablending($rotation, false);
imagesavealpha($rotation, true);
imagecreate($width,$height);
imagejpeg($rotation,$new_file);
chmod($filename, 0777);
break;
case 'image/png':
$source =
imagecreatefrompng($filename);
$bgColor=imageColorAllocateAlpha($source, 0, 0,
0, 0);
$rotation = imagerotate($source,
$rotang,$bgColor);
imagealphablending($rotation, false);
imagesavealpha($rotation, true);
imagecreate($width,$height);
imagepng($rotation,$new_file);
chmod($filename, 0777);
break;
case 'image/gif':
$source =
imagecreatefromgif($filename);
$bgColor=imageColorAllocateAlpha($source, 0, 0,
0, 0);
$rotation = imagerotate($source,
$rotang,$bgColor);
imagealphablending($rotation, false);
imagesavealpha($rotation, true);
imagecreate($width,$height);
imagegif($rotation,$new_file);
chmod($filename, 0777);
break;
case 'image/vnd.wap.wbmp':
$source =
imagecreatefromwbmp($filename);
$bgColor=imageColorAllocateAlpha($source, 0, 0,
0, 0);
$rotation = imagerotate($source,
$rotang,$bgColor);
imagealphablending($rotation, false);
imagesavealpha($rotation, true);
imagecreate($width,$height);
imagewbmp($rotation,$new_file);
chmod($filename, 0777);
break;
}
}
?>
它将有助于旋转图像并以图像具有的任何角度保存图像。 例如,我们将图像旋转 180 度。我们可以将该图像(180 度)保存到我们的文件夹中。在这里我们使用了 canvas.it 对 ASP.NET 开发人员有帮助
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" id="CLoseToggle" onclick="CloseModal()">×</button>
<h4 class="modal-title">Image Preview</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 cr-img-box">
<asp:Image ID="CropImg" ImageUrl="" runat="server" class="north"/>
<canvas id="canvas"></canvas>
<input type="hidden" id="hfData" runat="server"/>
<input type="hidden" id="hdnCropImageFileLocation"/>
</div>
</div>
</div>
<div class="modal-footer">
<div style="text-align: center;">
<input type="button" id="btnRotate" class="btn btn-sm btn-info" value="Rotate"/>
<asp:Button ID="OKFinalSave" class="btn btn-sm btn-info" Text="Submit" runat="server"
OnClick="OKFinalSave_Click"/>
</div>
</div>
</div>
</div>
</div>
protected void OKFinalSave_Click(object sender, EventArgs e)
{
string
CropImageLocation = ConfigurationManager.AppSettings["CropFileLocation"].ToString();
CropImageLocation = CropImageLocation + DateTime.Now.ToString("yyyyMMdd") + "''" + LoanNumber.Value;
string
a = CropImageLocation + "''" + LoanNumber.Value + "_SIGN";
string
base64String = hfData.Value.Replace("data:image/png;base64,", string.Empty);
byte[]
bytes = Convert.FromBase64String(base64String);
string
filePath = a;
if (!Directory.Exists(CropImageLocation)) {
Directory.CreateDirectory(CropImageLocation);
}
if (File.Exists(a)) {
File.Delete(CropImageLocation + "''" + LoanNumber.Value + "_SIGN");
}
System.IO.File.WriteAllBytes(CropImageLocation + "''" + LoanNumber.Value + "_SIGN.jpeg", bytes);
SaveCropedPath(LoanNumber.Value, CropImageLocation + "''" + LoanNumber.Value + "_SIGN.jpeg");
}
<script type = "text/javascript" >
var img = null, canvas = null;
$(function () {
$("#canvas").css("display", "none");
img = document.getElementById('CropImg');
canvas = document.getElementById('canvas');
if (!canvas || !canvas.getContext) {
canvas.parentNode.removeChild(canvas);
} else {
//img.style.position = 'absolute';
//img.style.visibility = 'hidden';
}
RotateImage(0);
$('#btnRotate').click(function () {
$("#CropImg").css("display", "none");
$("#canvas").css("display", "block");
if (img.className == "north") {
RotateImage(90);
img.className = "west";
} else if (img.className == "west") {
RotateImage(180);
img.className = "south";
} else if (img.className == "south") {
RotateImage(270);
img.className = "east";
} else if (img.className == "east") {
RotateImage(0);
img.className = "north";
}
});
});
function RotateImage(degree) {
if (document.getElementById('canvas')) {
var context = canvas.getContext('2d');
var cw = img.width, ch = img.height, cx = 0, cy = 0;
switch (degree) {
case 90:
cw = img.height;
ch = img.width;
cy = img.height * (-1);
break;
case 180:
cx = img.width * (-1);
cy = img.height * (-1);
break;
case 270:
cw = img.height;
ch = img.width;
cx = img.width * (-1);
break;
}
canvas.setAttribute('width', cw);
canvas.setAttribute('height', ch);
context.rotate(degree * Math.PI / 180);
context.drawImage(img, cx, cy);
document.getElementById('hfData').value = canvas.toDataURL();
} else {
switch (degree) {
case 0:
image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
break;
case 90:
image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
break;
case 180:
image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
break;
case 270:
image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
break;
}
}
}
</script>
您可以尝试我的解决方案来旋转图像
<?php
ob_start();
// Content type
header('Content-type: image/jpeg');
class RotateImage {
private $_path;
private $_degrees;
public function __construct($path, $degrees){
$this->_path = $path;
$this->_degrees = $degrees;
}
public function rotate() {
$image = new Imagick($this->_path);
$image->rotateimage('black', $this->_degrees);
echo $image->getImageBlob();
exit();
}
}
if($_SERVER['REQUEST_METHOD'] == 'GET'){
$sourceImagePath = isset($_GET['image_path']) ? $_GET['image_path'] : null;
$degrees = isset($_GET['degrees']) ? $_GET['degrees'] : 90;
$obj = new RotateImage($sourceImagePath, $degrees);
return $obj->rotate();
}
?>
基于
nagarjun daram使用图像和画布的Javascript解决方案。
使用数据 URL,完整工作示例:https://jsfiddle.net/f8d46umz/7/
请注意,跨源图像可能不起作用,至少在小提琴上是这样。
主旋转代码:
function rotateDegrees(degrees, imgSrc, callback){
var canvasElement = document.getElementById('canvas'); //or create
if (!canvasElement || !canvasElement.getContext) {
return showUnsupported();
}
//We use an additional img to get the sizes
var img = document.getElementById('tmpImg'); //or create
img.onload = function(){
var cw = img.width,
ch = img.height,
cx = 0,
cy = 0;
switch (degrees) {
case 90:
cw = img.height;
ch = img.width;
cy = img.height * (-1);
break;
case 180:
cx = img.width * (-1);
cy = img.height * (-1);
break;
case 270:
cw = img.height;
ch = img.width;
cx = img.width * (-1);
break;
}
var context = canvas.getContext('2d');
canvas.setAttribute('width', cw);
canvas.setAttribute('height', ch);
context.rotate(degrees * Math.PI / 180);
context.drawImage(img, cx, cy);
var result = canvas.toDataURL();
callback && callback(result);
}
img.src = imgSrc;
}
注意等待图像加载到临时 img 中的回调