JS에 의해 이미지 회전을 달성하는 세 가지 방법

저자：Eve Cole 업데이트 시간：2025-03-11 01:32:01

1 JQueryRotate.js를 사용한 구현

샘플 코드 :

코드 사본은 다음과 같습니다.

<! doctype html>

<html>

<헤드>

<제목> </title>

<스타일 유형 = "텍스트/CSS">

#div1 {

너비 : 800px;

높이 : 600px;

배경색 : #ff0;

위치 : 절대;

}

.imgrotate {

너비 : 100px;

높이 : 80px;

위치 : 절대;

상단 : 50%;

왼쪽 : 50%;

여백 : -40px 0 0 -50px;

}

</스타일>

</head>

<body>

</div>

</body>

var num = 0;

$ ( "#input2"). 클릭 (function () {

Num ++;

$ ( "#img1"). 회전 (90*num);

});

</스크립트>

</html>

테스트 결과 : chrome의 효과는 정상이며 IMG 객체는 여전히 회전 후 IMG 객체입니다 IMG 객체는 여전히 회전 후 원래 방법에 따라 얻어지며 JS 오류 가보고됩니다. 이미지 객체를 얻으려면 클래스에 따라 얻을 수 있습니다. 이 방법은 이미지가 회전 한 후 다른 작업이 수행되지 않으면 사용할 수 있습니다. 이미지 확대 또는 감소와 같은 다른 작업이 수행되는 경우이 방법은 구현하기가 더 복잡합니다.

코드 사본은 다음과 같습니다.

</rvml : 그룹>

</span>

2 Microsoft에서 제공 한 매트릭스 개체 사용

샘플 코드 :

코드 사본은 다음과 같습니다.

<! doctype html>

<html>

<헤드>

<제목> </title>

<스타일 유형 = "텍스트/CSS">

#div1 {

너비 : 800px;

높이 : 600px;

배경색 : #ff0;

위치 : 절대;

}

.imgrotate {

너비 : 100px;

높이 : 100px;

위치 : 절대;

상단 : 50%;

왼쪽 : 50%;

여백 : -50px 0 0-50px;

}

#imgrotate {

너비 : 100px;

높이 : 100px;

위치 : 절대;

상단 : 50%;

왼쪽 : 50%;

여백 : -50px 0 0-50px;

}

</스타일>

</head>

<body>

</div>

</body>

함수 회전 (id, angle, whens) {

var p = document.getElementById (id);

// 지속성을 위해 이미지 태그 내부에 각도를 저장합니다.

if (! whence) {

p.angle = ((p.angle == 정의되지 않은? 0 : p.angle) + 각도) % 360;

} 또 다른 {

p.angle = 각도;

}

if (p.angle> = 0) {

var rotation = math.pi * p.angle / 180;

} 또 다른 {

var rotation = math.pi * (360+p.angle) / 180;

}

var costtheta = math.cos (회전);

var sintheta = math.sin (회전);

if (document.all &&! window.opera) {

var canvas = document.createElement ( 'IMG');

Canvas.src = p.src;

캔버스. height = p.height;

canvas.width = p.width;

canvas.style.filter = "progid : dximagetransform.microsoft.matrix (m11 ="+costheta+", m12 ="+(-sintheta)+", m21 ="+sintheta+", m22 ="+costheta+", sizingmethod = '' 자동 확장 ') ";

} 또 다른 {

var canvas = document.createElement ( 'canvas');

if (! p.oimage) {

canvas.oimage = new image ();

canvas.oimage.src = p.src;

} 또 다른 {

canvas.oimage = p.oimage;

}

canvas.style.width = canvas.width = math.abs (costheta*canvas.oimage.width) + math.abs (sintheta*canvas.oimage.height);

canvas.style.height = canvas.height = math.abs (costheta*canvas.oimage.height) + math.abs (sintheta*canvas.oimage.width);

var context = canvas.getContext ( '2d');

context.save ();

if (회전 <= math.pi/2) {

context.translate (sintheta*canvas.oimage.height, 0);

} else if (rotation <= math.pi) {

context.translate (canvas.width, -costheta*canvas.oimage.height);

} else if (회전 <= 1.5*math.pi) {

context.translate (-Costheta*canvas.oimage.width, canvas.height);

} 또 다른 {

context.translate (0, -sintheta*canvas.oimage.width);

}

context.rotate (회전);

Context.DrawImage (canvas.oimage, 0, 0, canvas.oimage.width, canvas.oimage.height);

Context.Restore ();

}

canvas.id = p.id;

canvas.angle = p.angle;

P.parentNode.ReplaceChild (Canvas, P);

}

함수 Rotateright (ID, 각도) {

회전 (id, angle == 정의되지 않은? 90 : angle);

}

함수 rotateleft (id, angle) {

회전 (id, angle == 정의되지 않은? -90 :-angle);

}

$ ( "#input1"). 클릭 (function () {

$ ( "img.imgrotate"). attr ( "id", "imgrotate");

rotateleft ( "Imgrotate", 90);

$ ( "#imgrotate"). attr ( "Top", "50%");

$ ( "#imgrotate"). attr ( "왼쪽", "50%");

$ ( "#imgrotate"). attr ( "margin", "-50px 0 -50px");

});

</스크립트>

</html>

테스트 결과 : 효과는 Chrome에서 정상이지만 IMG 객체는 회전 후 캔버스 객체가되고 IMG 객체는 여전히 회전 후 IMG 객체입니다. Matrix ()에는 많은 매개 변수가 있으며 사용시 더 많은 계산이 필요합니다.

3 Microsoft에서 제공하는 BasicImage 객체 사용

샘플 코드 :

코드 사본은 다음과 같습니다.

<! doctype html public "-// w3c // dtd xhtml 1.0 엄격한 // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-srtrict.dtd">

<헤드>

</head>

<body>

</body>

var num = 0;

$ ( "#input2"). 클릭 (function () {

Num = (Num + 1) % 4;

document.getElementById ( 'image'). style.filter = 'progid : dximagetransform.microsoft.basicimage (rotation ='+num+')';

});

</스크립트>

</html>

테스트 결과 : 효과는 크롬에서 회전 할 수 없으며 IE8 하에서 효과는 정상입니다. BasicImage ()에는 하나의 매개 변수 만 있습니다.

이 세 가지 방법의 코드를 보면 본질적으로 솔루션이라는 것을 알 수 있습니다. Canvas 객체를 사용하여 Chrome에서 구현하고 VML 또는 Matrix () 또는 BasicImage ()를 사용하여 IE8에서 구현하십시오. 최근에 구성 요소를 변환했습니다. jQueryRotate.js는 IE8 하에서 새로운 객체를 생성하기 때문에 이미지를 회전시키고 확대하는 것이 포함됩니다. 나중에 Chrome의 JQueryRotate를 사용하여 Chrome 및 IE8을 개별적으로 처리하고 IE8의 BasicImage ()를 사용하여 코드의 단순성과 가독성을 보장했습니다.