HTML5 캔버스 - 미리보기와 이미지의 다른 크기가있는 확장 가능한 섹션

Question

해결해야 할 몇 가지 복잡한 문제가 있습니다. 이제 html5에서 객체 캔바스를 지원하는 자바 스크립트에서 이러한 함수를 작성해야합니다. html5는 그림의 일부를 잘라내어 미리보기에 표시합니다. 나는 이미지의 다른 해상도보다 더해야합니다. 나는 이것을 위해 jQuery 라이브러리, 특히 jquery.Jcrop.js를 사용한다. 미리보기의 그림에서 볼 수있는 부분은 나중의 목적을 위해 나중에 사용한다. 파일에 잘린 형태로 쓰기 가능해야한다. 캔버스의 기회. 이 스크립트는 잘 작동하지만 문제는 크기가 큰 사진부터 작은 사진으로 크기를 조정하려고 할 때입니다. 각 사진이 브라우저 창에서 높이 500 픽셀로 고정되도록하고 싶습니다. 내가 스크립트의 현재의 모습이 아래에 제시 :

function updatePreview(c) 
{ 
if (parseInt(c.w) > 0) 
{ 
var rx = 200/c.w; 
var ry = 300/c.h; 

// Show canvas image preview2 
var imageObj = $("#target")[0]; 
var canvas = $("#preview2")[0]; 
var context = canvas.getContext("2d"); 
canvas.setAttribute('width', '200'); 
canvas.setAttribute('height', '300'); 
//context.scale(2, 2); 
context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, 
canvas.width, canvas.height); 

$('#preview').css({ 
width: Math.round(rx * boundx) + 'px', 
height: Math.round(ry * boundy) + 'px', 
marginLeft: '-' + Math.round(rx * c.x) + 'px', 
marginTop: '-' + Math.round(ry * c.y) + 'px' 
}); 
} 
}; 

을 그리고 여기에 스크립트가 첫 번째 미리보기가 CSS를 기반으로

<table> 
<tr> 
<td> 
<img src="http://imgon.net/di-M7Z9.jpg" id="target" 
alt="obrazek" height="450"/> 
</td> 
<td> 
<div style="width:200px;height:300px;overflow:hidden;"> 
<img src="http://imgon.net/di-M7Z9.jpg" id="preview" alt="Preview" /> 
</div> 
<br /> 
<div> 
<canvas id="preview2" style="width:200px;height:300px;"></canvas> 
</div> 
</td> 
</tr> 
</table> 

를 처리 할 수 ​​있도록하는 간단한 HTML 코드이고 제대로 작동하지만 CSS는 그림의 일부만 다루고 실제로 자르지 않습니다. 대비, 캔버스는 고해상도로 사진을보고 미리보기에는 크기 조정 된 이미지의 세그먼트가 반영되지 않습니다 (나는 섹션 만 확대했습니다). 이것은 Firefox에서 발생합니다. Internet Explorer의 경우 특수 라이브러리이므로 캔버스의 결과는 CSS의 경우와 같습니다. 내 마지막 질문은. 스케일링 된 이미지에 대한 미리보기를 만들고 원래 해상도에 대한 미리보기를 만드는 기능을 어떻게 말할 수 있습니까? 나는 Math.round (rx * boundx)와 같은 변수 c.y와 cx Math.round (ry * boundy) 대신에 대입하려고 시도했지만 올바르지 않습니다. 여기서 스크립트를 볼 수있는 페이지를 제공합니다. agd-brita.pl/mobile2/tutorial.html 도움을 요청합니다. 진심으로 감사드립니다.

Answer 1

jCrop이 어떻게 대답하는지 조금 이해해야했습니다. http://jsfiddle.net/maitrekaio/Wre8w/
주요 포인트는 CSS 작업을 캔버스로 작업하는 것은 정말 다른 것입니다 그리고 당신은 다른 계산을해야한다는 :

나는 내 솔루션의 작동 방식을 보여주기 위해 바이올린을했다.
그럼에도 불구하고 시작은 동일합니다. 이미지 요소가 target이고 내부에 자르기가 있습니다. 작물의 세부 사항은 jCrop에 의해 주어지며, 이미지 요소의 크기는 내 displayedImg 변수에 저장됩니다.

CSS의 미리보기

preview-container가 포함 된 이미지의 일부를보고 우리를하자 창 같다. 포함 된 이미지 요소의 크기가 조정되지 않았으므로 치수는 그림 realImg의 치수와 같습니다. 작물의 크기가 조정되고 움직일 때 우리는 창문이 똑같이한다는 느낌을 주어야합니다. 실제로 크기가 조정되고 이동 된 이미지가 포함되어 있습니다. 어떻게 계산할 수 있습니까?
비율 (crop/displayedImg)이 비율 (preview/realImg)과 동일해야한다는 것을 쉽게 알 수 있습니다. realImg = (displayedImg * preview)/자르기
이렇게하면 CSS 미리보기에 적용되는 너비, 높이, x (marginLeft) 및 y (marginTop)를 쉽게 계산할 수 있습니다.

캔버스에 대한 캔버스 미리보기

, 우리는 우리가 context.drawImage(), 우리 자르고 크기를 조정할 수있는 하나의 가장 복잡한 버전을 사용합니다 것을 알고있다. 이 메소드의 첫 번째 매개 변수는 JS 이미지 객체이며 target 이미지를 사용합니다. 이번에는 실제 이미지에서 작물을 계산하고 표시된 이미지에서 자르기를 알고 자합니다.(crop/displayedImg)는 (realImgCrop/realImg)와 같아야합니다. 그것은 우리에게 수식을 제공합니다 : realImgCrop = (crop * realImg)/displayedImg
완료되었습니다!