사진 회전 솔루션 3가지_기본-JS 튜토리얼-php.cn

사진 회전 솔루션 3가지_기본

WBOY

풀어 주다： 2016-05-16 17:13:21

원래의

1081명이 탐색했습니다.

이미지 회전 효과에 대한 연구
최근 프로젝트에서 이미지 회전 기능이 필요해서 연구를 좀 했습니다. 다양한 브라우저에서의 이미지 회전 지원을 정리해 보겠습니다

1. 이미지 로테이션 계획

1) CSS3는 이미지 회전 기능을 구현합니다. 지원되는 브라우저는 Chrome이고 Firefox Opera는 지원되지 않습니다.

구체적인 코드는 다음과 같습니다: -moz-transfrom:rotate(90deg);-webkit-ransfrom:rotate(90deg);
위 코드는 이미지를 시계 방향으로 90도 회전한다는 의미입니다. 실제로 회전할 수도 있습니다. 어느 정도. 그러나 CSS3를 지원하는 유일한 브라우저는 chrome, firefox3.6, safari이며, 즉 브라우저는 이를 지원하지 않습니다. 그렇다면 IE
에서는 어떻게 처리해야 할까요? 그래서 우리는 다음과 같은 해결책을 가지고 있습니다

2) IE에서 필터를 통해 회전

구체적인 코드는 다음과 같습니다. filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
여기서 회전 매개변수는 0,1,2,3일 수 있습니다. 즉, 이 숫자에 90 회전을 곱한다는 뜻입니다. 각도. IE에서 임의의 각도로 회전하려면 매트릭스 변환 필터를 사용해야 합니다. 일상적으로
우리 대부분은 90의 배수인 변환을 사용합니다. 여기서는 임의의 각도에 대해 논의하지 않습니다. 하지만 여전히 문제가 있습니다. 브라우저가 Internet Explorer가 아니고 CSS3를 지원하지 않는 경우 이미지 회전을 인식하면 캔버스도 이미지를 회전할 수 있습니다.

3) 캔버스를 사용하여 이미지 회전

Canvas는 Chrome, Firefox, Opera 및 기타 브라우저에서 지원되며 JavaScript 기반의 그리기 API가 있습니다. 먼저 캔버스 JavaScript를 사용하여 이미지를 회전하는 방법을 살펴보겠습니다

코드는 다음과 같습니다.

코드 복사코드는 다음과 같습니다. :

 
var test = function(){
 var canvas = document.getElementById("result");
 var oImg = document.getElementById("Img") 
 canvas.height = 300;
 canvas.width = 200;
 var context = canvas.getContext("2d");
 context.save();
 context.translate(200,0) ;
 context.rotate (Math.PI/3);
 context.drawImage(oImg, 0, 0, 300, 200);
 context.restore();
 oImg.style.display = "없음";
};

위 코드는 먼저 캔버스 객체를 가져온 다음 높이를 설정하고 그리기를 시작합니다. 이렇게 하면 캔버스의 중심점과 회전 각도가 변경된 다음 이미지를 캔버스에 그려서 저장한 다음
이전 이미지를 숨깁니다. 이 방법은 구현이 비교적 원활합니다.

2. 다양한 솔루션 비교

css3를 구현해도 원본 이미지가 차지하는 공간의 크기는 변하지 않지만, IE 아래의 필터를 사용하면 원본 이미지가 차지하는 공간이 변경됩니다. 이미지의 크기입니다.
실제로 IE는 캔버스도 지원합니다. 캔버스 스크립트만 인용하면 됩니다. 이는 Google에서 제공하는 것입니다. 그런데 이 스크립트는 압축 전 20k가 넘게 좀 크네요
IE에서는 필터를 사용하고, 캔버스 태그를 사용하는 다른 브라우저에서는 필터를 사용하는 것을 선호합니다.