显示多个图像与PHP无法与jQuery的旋转？

我想用php显示图像并使用canvas + jquery旋转该图像。问题是单张照片一切正常。但是当imgae显示多个时，旋转失败。我知道问题是图像ID或JavaScript上的画布ID，但我无法解决这个问题。你可以帮我吗？显示多个图像与PHP无法与jQuery的旋转？

这里是我的PHP代码：

while($data = mysql_fetch_array($aksi)):?> 

    <div> 
     <img src="image/<?php echo $data['dir']; ?>" 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&deg;</a> 
     <a href="javascript:;" id="rotate180">180&deg;</a> 
     <a href="javascript:;" id="rotate270">270&deg;</a> 
    </p> 


    <?php 
$no++; 
endwhile; 
?>

这里是javascript代码：

<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; 
     } 
    } 
}

来源

2016-02-13 IIM NUR DIANSYAH

使用任何给定ID在页面上不能超过1个元素。因为你这样做了，你的代码被破坏了。你如何期望**（a）** jQuery知道哪个'＃rotate'按钮应该有附加的事件处理程序，然后**（b）**处理按钮的代码有什么想法它应该将图像应用于变换？ _EDIT_：画布也一样。 – enhzflep

好的。那么我应该怎么做先生？ –

我的事情...... 不要使用ID标签为重复项目几次。将其更改为Class标签，然后打电话给我;）

我最好！

来源

2016-02-13 08:33:44

你能告诉我一个例子吗？ –

在您的php文件中，将ID标记更改为交换图像的Class标记。

显示多个图像与PHP无法与jQuery的旋转？

回答

相关问题