JavaScript로 이미지의 일부를 가져 오는 중

img 태그 (픽셀 포함)에 이미지의 일부를 표시 할 수 있습니까?JavaScript로 이미지의 일부를 가져 오는 중

준비된 큰 이미지 (예 : 32x320 픽셀)와 시작 위치 (X, Y, 예 : 0,32) 및 너비/높이 (예 : 32,32)를 정의하고 스크립트에 두 번째 32x32 픽셀)의 일부분입니다.

2010-04-04 Alper

[HTML/CSS에 이미지의 일부만 표시하려면 어떻게해야합니까?] (https://stackoverflow.com/questions/57725/how-can-i-display-just-a-portion- of-an-image-in-html-css) – vaxquis

참조 된 질문은 html/css에 관한 것이지만 이것은 JavaScript 용입니다. – Alper

귀하의 질문은 암시 적으로 JavaScript DOM에 관한 것이고 DOM 자체는 HTML/CSS에 대한 프로그래밍 백엔드이므로 귀하의 질문은 HTML/CSS 자체에 관한 것이 었습니다. 바로 여기에 대답을 CSS를 가리 키도록 대답했다. HTML/CSS를 고려하지 않고 * JS DOM *을 수행 할 수 없습니다. 다른 대답에서 언급 된 HTML5 캔버스 요소조차도 HTML5 문서 요소입니다. – vaxquis

CSS 속성을 사용하여 JS 속성을 변경할 수 있습니다. 이미지를 원하는 크기의 요소에 대한 배경으로 설정하고 배경 위치로 위치를 조정하여 올바른 부분을 볼 수있게하십시오. 어떤 사람들은 그것을 CSS sprites라고 부릅니다.

출처

2010-04-04 14:41:11

+1 DIV를 사용할 필요조차 없습니다. 나는 투명한 PNG를 사용하고 배경 이미지를 설정합니다.이 목적을 위해서도 잘 작동하지만 float 등을 다루지 않고도 인위적으로 인라인을 사용할 수있는 옵션을 제공합니다. – Robusto

예, 물론이 기능은 모든 요소. img 요소를 사용하는 것은 나에게 다소 더러워 보인다. 아마 display : inline-block; 엘리먼트가 텍스트와 함께 흐르기를 원하면요. –

여러 가지 옵션을 제공하기 위해 항상 HTML5 캔버스를 사용하고 필요에 따라 이미지를 다시 그릴 수 있습니다. 이 작업을 수행하는 방법에 대한 좋은 자습서를 찾을 수 있습니다 : https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images IE가 캔버스를 아직 지원하지 않기 때문에 CSS 스프라이트 방법이 바람직합니다.

출처

2010-04-04 14:48:44

당신은 데이터 URL로 그린 이미지를 저장할 수도 있습니다. http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/ –

JavaScript로 이미지의 일부를 가져 오는 중

답변

관련 문제