如何使用javascript旋转多个图像?
我遵循本教程,本教程只适用于单个图像。多张图片怎么样?有什么想法吗 我有如下javascript代码:如何使用javascript旋转多个图像?,javascript,jquery,Javascript,Jquery,我遵循本教程,本教程只适用于单个图像。多张图片怎么样?有什么想法吗 我有如下javascript代码: var img = null, canvas = null; $(document).ready(function(){ // Initialize image and canvas img = document.getElementById('image'); canvas = document.getElementById('canvas'); if(!ca
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;
}
}
}
<div><!-- my html code -->
<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>
我的html是这样的:
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;
}
}
}
<div><!-- my html code -->
<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>
旋转图像:
这是一个很好的工作在单一的形象,有任何想法,为运行多个形象呢?我应该怎么做?这会有点棘手,但使用jQuery,您应该能够做到这一点。您需要将大部分id更改为类。为每个设置一个画布。您必须将单击事件“e”传递给函数(e),然后传递给旋转图像(e,度)。然后,您需要获取离按钮最近的图像,以便知道要更改的图像。对不起,我没有时间写代码。可能吗?当我用php显示图像时,图像id和文件名相同,如何在javascript中访问它?为多个idif创建数组变量如果您可以解决此问题,请帮助我。我是javascript的新手