Javascript 如何旋转图像并保存图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11259881/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-24 05:11:04 来源:igfitidea点击:
How to rotate image and save the image
提问by galtech.Mariya
In my application i have an image in a div,a button.
在我的应用程序中，我在 div 中有一个图像，一个按钮。
I want to rotate the image displayed and save the rotated image when i clicked on the button using jquery.
当我使用 jquery 单击按钮时，我想旋转显示的图像并保存旋转的图像。
I already used the code:
我已经使用了代码：
http://code.google.com/p/jquery-rotate/
http://code.google.com/p/jquery-rotate/
and jquery code:
和 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);
});
});
html code:
html代码：
<img src="demo_files/pool.jpg" id="cropbox" />
<input type="button" id="img" name="img" value="click" />
When i using above code ,There have two images one is the old image and another is the rotated image.
当我使用上面的代码时，有两个图像，一个是旧图像，另一个是旋转后的图像。
Here i want to rotate the same image and displaying only the rotated image .And save the rotated image ina directory.
在这里，我想旋转相同的图像并仅显示旋转后的图像。并将旋转后的图像保存在目录中。
How can i do this using jquery? If it is not possible with jquery then how can i do it possible with php/ajax?
我如何使用 jquery 做到这一点？如果 jquery 无法实现，那么我如何使用 php/ajax 实现呢？
回答by
//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");
Take a look at:
看一眼：
And:
和：
回答by Ghanshyam Gohel
Image rotation: PNG or JPEG depend on file type with save on your server
图像旋转：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);
It's works for me, try it.
它对我有用，试试吧。
回答by Mukesh Kumar Bijarniya
<?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;
}
}
?>
回答by Ankit Singh
You can try my solution to rotate the image
您可以尝试我的解决方案来旋转图像
<?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();
}
?>
回答by nagarjun daram
it will helps to rotate an image and save the image in whatever the angle image has. for example we rotated image into 180 degrees .we can save that image (180 degrees) into our folder.here we used canvas.it helps for ASP.NET developers
它将有助于旋转图像并将图像保存在任何角度图像中。例如，我们将图像旋转 180 度。我们可以将该图像（180 度）保存到我们的文件夹中。这里我们使用了画布。它对 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>
