캔버스를 사용한 이미지 시각화. 크기를 조정하는 방법?

친구를위한 웹 사이트 사진 갤러리를 만들고 있습니다. 이미지는 간단한 DOM 이미지 객체 (<img src="" />)로로드되며이 이미지의 크기는 브라우저 크기를 기반으로합니다. CSS로 크기를 조정합니다.캔버스를 사용한 이미지 시각화. 크기를 조정하는 방법?

CSS 크기 조정이 이미지의 품질을 변경하고 꽤 많은 픽셀을 나타 내기 때문에 최적의 해결책은 아닙니다. 캔버스로 이미지를 렌더링 한 다음 크기를 조정하여 품질이 여전히 유효하다고 생각했지만이 온라인에 대한 정보는 찾을 수 없습니다.

아이디어가 있으십니까? 이 같은

출처

2010-03-07 Luca Matteis

뭔가 :

<html> 
<head> 
<script type="text/javascript"> 

function init(){ 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 

    var image = new Image(); 
    image.onload = function(){ 
     ctx.drawImage(image, x, y, width, height); 
    }; 

    image.src = "filename.jpg"; 
} 
</script> 
</head> 
<body onload="init()"> 
<canvas id="canvas" width="640" height="480"></canvas> 
</body> 
</html>

아마 최고의 자원 : Btw는 https://developer.mozilla.org/en/Canvas_tutorial/Using_images

: 당신이 실행할 수있는 이미지를로드 할 때 도메인 문제를 건너. 나는 파이어 폭스에서 오류 NS_SECURITY 어쩌구처럼 어쩌면 같아요 .. 그냥 귀하의 페이지와 이미지가 같은 장소에서 오는 있는지 확인하십시오. 개발을 테스트하기 위해 웹 서버를 사용해야 할 수도 있습니다. Firefox에서 개발할 때 JavaScript에서이 보안 제한을 무시하도록 배치 할 수 있습니다. netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); 다른 모든 브라우저에서 코드가 손상 될 수 있으므로 배포하기 전에이를 제거해야합니다.

출처

2010-03-07 23:23:23 Ronald

캔버스를 사용한 이미지 시각화. 크기를 조정하는 방법?

답변

관련 문제