반응형
이미지를 회전하고 저장하는 방법
제 애플리케이션에서 저는 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);
});
});
html 코드:
<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");
다음을 살펴보십시오.
그리고:
이미지 회전: 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도)를 폴더에 저장할 수 있습니다.여기서 ASP를 위해 canvas.it 도움말을 사용했습니다.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();
}
?>
이미지와 캔버스를 이용한 nagarjundaram의 자바스크립트 전용 솔루션입니다.
데이터 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에 로드될 때까지 기다리는 콜백을 기록합니다.
언급URL : https://stackoverflow.com/questions/11259881/how-to-rotate-image-and-save-the-image
반응형
'programing' 카테고리의 다른 글
| PowerShell cmdlet의 소스 코드를 볼 수 있습니까? (0) | 2023.08.29 |
|---|---|
| Excel에 붙여넣기 위해 Windows 클립보드 복사 버퍼에 서식 정보 포함 (0) | 2023.08.29 |
| Spring MVC: 인덱스 페이지의 기본 컨트롤러를 만드는 방법은 무엇입니까? (0) | 2023.08.29 |
| El Capitan 업그레이드: 라이브러리가 로드되지 않음: /usr/local/lib/libmysqlclient.18.dylib (0) | 2023.08.29 |
| 텍스트 보기에 맞게 텍스트 글꼴 크기를 조정하는 방법 (0) | 2023.08.29 |