이미지 회전 효과를 달성하기 위해 캔버스와 결합된 Javascript_javascript 기술

Weibo에서는 사진을 왼쪽, 오른쪽 등으로 회전할 수 있어 사용자가 다양한 관점에서 사진 효과를 감상할 수 있습니다. 이 기사에서는 예제를 사용하여 Javascript 및 관련 기술을 사용하여 이미지 회전 효과를 얻는 방법을 설명합니다. HTML5 캔버스 태그를 사용하여 이미지를 회전합니다. HTML5를 지원하지 않는 IE6, 7, 8과 같은 브라우저의 경우 IE의 고유한 필터 효과를 사용하여 이미지를 회전합니다.

HTML

페이지에 그림을 배치하고 그림 위에 두 개의 버튼을 배치한 다음 onclick 이벤트를 통해 회전() 함수를 호출하여 그림이 왼쪽이나 오른쪽으로 회전하도록 제어합니다.

<div id="tool"> 
   <a href="#" id="arr_left" onclick="rotate('myimg','left')">向左</a> 
   <a href="#" id="arr_right" onclick="rotate('myimg','right')">向右</a> 
</div> 
<div id="img"> 
   <img src="demo.jpg" width="460" height="305" alt="" id="myimg" /> 
</div> 

자바스크립트

function rotate(obj,arr){ 
  var img = document.getElementById(obj); 
  if(!img || !arr) return false; 
  var n = img.getAttribute('step'); 
  if(n== null) n=0; 
  if(arr=='left'){ 
    (n==0)? n=3:n--; 
  }else if(arr=='right'){ 
    (n==3)? n=0:n++; 
  } 
  img.setAttribute('step',n); 
  ... 
} 

우리는 매개변수 obj가 회전할 이미지 객체의 ID를 나타내고 매개변수 arr이 회전 방향을 나타내는 사용자 정의 함수인 Rotate()를 작성했습니다. 두 개의 고정 값은 왼쪽(왼쪽)과 오른쪽(오른쪽). 상, 하, 좌, 우의 4가지 회전 상태를 기록하기 위해 변수 n을 설정했습니다. 회전 버튼을 클릭하면 지속적인 회전 상태가 보장됩니다. 즉, 각 회전은 마지막 회전 작업을 기준으로 다시 회전됩니다.

그런 다음 IE 브라우저에 따라 다른 처리를 수행해야 합니다. IE 브라우저의 경우 고유한 필터를 사용하여 회전 효과를 얻을 수 있지만 이전 버전의 IE와 호환되도록 필터 사용을 권장하지는 않습니다. , 우리는이 낡은 칼로 돌아가야했습니다.

function rotate(obj,arr){ 
  ... 
  //对IE浏览器使用滤镜旋转 
  if(document.all) { 
    img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')'; 
  // 对现代浏览器写入HTML5的元素进行旋转： canvas 
  }else{ 
    ... 
  } 
} 

코드에서는 document.all을 사용하여 IE 브라우저인지 확인하고, 그렇다면 필터를 사용합니다. Firefox, Chrome과 같은 최신 브라우저에서는 회전 효과를 얻기 위해 캔버스를 사용합니다.

function rotate(obj,arr){ 
  ... 
  // 对现代浏览器写入HTML5的元素进行旋转： canvas 
  }else{ 
    var c = document.getElementById('canvas_'+obj); 
    if(c== null){ 
      img.style.visibility = 'hidden'; 
      img.style.position = 'absolute'; 
      c = document.createElement('canvas'); 
      c.setAttribute("id",'canvas_'+obj); 
      img.parentNode.appendChild(c); 
    } 
    var canvasContext = c.getContext('2d'); 
    switch(n) { 
      default : 
      case 0 : 
        c.setAttribute('width', img.width); 
        c.setAttribute('height', img.height); 
        canvasContext.rotate(0 * Math.PI / 180); 
        canvasContext.drawImage(img, 0, 0); 
        break; 
      case 1 : 
        c.setAttribute('width', img.height); 
        c.setAttribute('height', img.width); 
        canvasContext.rotate(90 * Math.PI / 180); 
        canvasContext.drawImage(img, 0, -img.height); 
        break; 
      case 2 : 
        c.setAttribute('width', img.width); 
        c.setAttribute('height', img.height); 
        canvasContext.rotate(180 * Math.PI / 180); 
        canvasContext.drawImage(img, -img.width, -img.height); 
        break; 
      case 3 : 
        c.setAttribute('width', img.height); 
        c.setAttribute('height', img.width); 
        canvasContext.rotate(270 * Math.PI / 180); 
        canvasContext.drawImage(img, -img.width, 0); 
        break; 
    }; 
  } 
} 

코드에서는 캔버스 요소 개체를 만들고 이미지를 캔버스 개체에 할당합니다. 변수 n이 다른 상태(위, 아래, 왼쪽, 오른쪽 방향)에 있는 경우 캔버스를 사용하여 이미지를 다시 그립니다. .

물론 HTML5를 우회하고 다른 브라우저를 대상으로 하는 이미지 회전 효과를 얻을 수 있는 또 다른 솔루션이 있습니다. use -webkit-transform:rotate(); 그러나 이것은 html5의 캔버스 구현만큼 좋지 않습니다.

위 내용은 이 기사에서 공유한 모든 내용입니다. 마음에 드셨으면 좋겠습니다.