jquery旋转图像并用同名文件保存(覆盖)? [英] jquery rotate an image and save them with same name file (overwrite)?
问题描述
我有一个这样的简单场景:我想旋转图像,并保存它们现有的旧文件。现在,所有功能都已完成,但是当我下载/保存图像时,它总是会创建新的文件名。这是我的代码:
i have a simple scenario like this: I want to rotate an image, and save them existing old file. now, all function is done, but when i download/save the image, it always create new file name. here is my code:
<div>
<img src="image/a.png" alt="" id="image" />
<canvas id="canvas"></canvas>
</div>
<p>
<strong>Rotate Image: </strong>
<a href="javascript:;" id="resetImage">Reset Image</a>
<a href="javascript:;" id="rotate90">90°</a>
<a href="javascript:;" id="rotate180">180°</a>
<a href="javascript:;" id="rotate270">270°</a>
</p>
<a id="download">Download as image</a>
我的js代码:
<script type="text/javascript">
var img = null, canvas = null;
$(document).ready(function(){
// Initialize image and canvas
img = document.getElementById('image');
canvas = document.getElementById('canvas');
if(!canvas || !canvas.getContext){
canvas.parentNode.removeChild(canvas);
} else {
img.style.position = 'absolute';
img.style.visibility = 'hidden';
}
rotateImage(0);
// Handle clicks for control links
$('#resetImage').click(function(){ rotateImage(0); });
$('#rotate90').click(function(){ rotateImage(90); });
$('#rotate180').click(function(){ rotateImage(180); });
$('#rotate270').click(function(){ rotateImage(270); });
});
function rotateImage(degree)
{
if(document.getElementById('canvas')){
var cContext = canvas.getContext('2d');
var cw = img.width, ch = img.height, cx = 0, cy = 0;
// Calculate new canvas size and x/y coorditates for image
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;
}
// Rotate image
canvas.setAttribute('width', cw);
canvas.setAttribute('height', ch);
cContext.rotate(degree * Math.PI / 180);
cContext.drawImage(img, cx, cy);
} else {
// Use DXImageTransform.Microsoft.BasicImage filter for MSIE
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>
谢谢你的答复:)
推荐答案
你的问题有2个部分(据我所知)
Your question have 2 parts (as I understood)
保存和同名文件。
所以要保存,您只需要更改属性 href $ c链接
#download
的$ c>到图像的dataURL,如下所示:
So To save them you just need to change the attribute href
of the link #download
to the dataURL of the image, like this:
$('#download').attr('href', canvas.toDataURL())
当然,您必须设置属性 下载
-
Of Course that you have to set the link the attribute download
-
将我们带到第二个问题同名 - 您可以指定名称通过设置下载
属性的值来下载文件,如:
which bring us to the second question with same name - you can specify the name of the file which will be downloaded by setting the download
attribute's value as you want, like:
<a id="download" download="you_name_the_file.jpg">Download as image</a>
完整代码(由于安全原因,此处无法使用,您可以看到实时版本< a href =https://dl.dropboxusercontent.com/u/18298179/Code%20snippets/stackoverflow%20-%20jquery-rotate-an-image-and-save-them-with-same-name-file-overwrite /index.htmlrel =nofollow noreferrer>这里)
The full code (it will not work here because of security reason, you can see the live version here)
var img = null, canvas = null;
$(document).ready(function(){
// Initialize image and canvas
img = document.getElementById('image');
canvas = document.getElementById('canvas');
if(!canvas || !canvas.getContext){
canvas.parentNode.removeChild(canvas);
} else {
img.style.position = 'absolute';
img.style.visibility = 'hidden';
}
rotateImage(0);
// Handle clicks for control links
$('#resetImage').click(function(){ rotateImage(0); });
$('#rotate90').click(function(){ rotateImage(90); });
$('#rotate180').click(function(){ rotateImage(180); });
$('#rotate270').click(function(){ rotateImage(270); });
});
function rotateImage(degree)
{
if(document.getElementById('canvas')){
var cContext = canvas.getContext('2d');
var cw = img.width, ch = img.height, cx = 0, cy = 0;
// Calculate new canvas size and x/y coorditates for image
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;
}
// Rotate image
canvas.setAttribute('width', cw);
canvas.setAttribute('height', ch);
cContext.rotate(degree * Math.PI / 180);
cContext.drawImage(img, cx, cy);
$('#download').attr('href', canvas.toDataURL())
} else {
// Use DXImageTransform.Microsoft.BasicImage filter for MSIE
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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img src="your_image_url.jpg" alt="" id="image" />
<canvas id="canvas"></canvas>
</div>
<p>
<strong>Rotate Image: </strong>
<a href="javascript:;" id="resetImage">Reset Image</a>
<a href="javascript:;" id="rotate90">90°</a>
<a href="javascript:;" id="rotate180">180°</a>
<a href="javascript:;" id="rotate270">270°</a>
</p>
<a id="download" download="mqdefault.jpg">Download as image</a>
这篇关于jquery旋转图像并用同名文件保存(覆盖)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!