자바스크립트 이미지복사 질문이요~ 정보
자바스크립트 이미지복사 질문이요~본문
자바스크립트를 공부하고있는 학생입니다
마우스로 이미지를 드래그해서 지정해놓은 지역으로 갖다놓으면 거기에 그대로 이미지가 복사 되어서 생성되는 방법을 알고싶어요
아래 소스는 글씨복사 예제입니다.
글씨는 잘 되는데 이미지 복사하는건 어떻게 해야하는 거죠?
도와주세요~
<style>
#divDraggable {width: 460px; height: 200px; background-color: orange; color: white;}
#divTarget {width: 460px; height: 200px; background-color: #efefef;}
</style>
<div id="divDraggable" onmousemove="handleMouseMove()" ondragstart="handleDragStart()">
<b>[최카피의 온라인 글쓰기 강좌] 우리는 대통령이 아니다</b><br><br>
<a href="http://korea.internet.com/channel/content.asp?nid=23944">
<img src="http://korea.internet.com/images/nid_image/choi_copy.gif" border="0" align="left">
</a>
좋은 글을 판단하는 기준은 여러 가지가 있겠지만 다음의 세 가지를 기억하자.<br><br>
<b>첫째, 무엇을 말하는가?</b><br>
<b>둘째, 누구에게 말하는가?</b><br>
<b>셋째, 어떻게 말하는가?</b><br><br>
이 중 둘째, 누구에게 말하는가를 우선 명확히 하라. 그러면 오늘부터 더 좋은 글을 쓸 수 있을 것이다.<br><br>
<a href="http://korea.internet.com/channel/content.asp?nid=23944">
<font color="navy"><b>▶ 자세히 보기</b></font>
</a>
</div><br>
<div id="divTarget" ondragenter="handleDragEnter()" ondragover="cancelEvent()" ondragleave="handleDragLeave()" ondrop="drop()">
<b>박스를 마우스로 드래그하여 이 곳에 드롭시키세요!!</b>
</div>
<script language="javascript">
function cancelEvent() {
window.event.returnValue = false;
}
function drop() {
window.event.srcElement.style.backgroundColor = "#efefef";
divTarget.innerHTML = window.event.dataTransfer.getData("text");
}
function handleMouseMove() {
if (window.event.button == 1) {
document.all.divDraggable.dragDrop();
}
}
function handleDragStart() {
window.event.dataTransfer.setData("text", divDraggable.innerHTML)
}
function handleDragEnter() {
window.event.srcElement.style.backgroundColor = "red";
cancelEvent();
}
function handleDragLeave() {
window.event.srcElement.style.backgroundColor = "#efefef";
cancelEvent();
}
</script>
마우스로 이미지를 드래그해서 지정해놓은 지역으로 갖다놓으면 거기에 그대로 이미지가 복사 되어서 생성되는 방법을 알고싶어요
아래 소스는 글씨복사 예제입니다.
글씨는 잘 되는데 이미지 복사하는건 어떻게 해야하는 거죠?
도와주세요~
<style>
#divDraggable {width: 460px; height: 200px; background-color: orange; color: white;}
#divTarget {width: 460px; height: 200px; background-color: #efefef;}
</style>
<div id="divDraggable" onmousemove="handleMouseMove()" ondragstart="handleDragStart()">
<b>[최카피의 온라인 글쓰기 강좌] 우리는 대통령이 아니다</b><br><br>
<a href="http://korea.internet.com/channel/content.asp?nid=23944">
<img src="http://korea.internet.com/images/nid_image/choi_copy.gif" border="0" align="left">
</a>
좋은 글을 판단하는 기준은 여러 가지가 있겠지만 다음의 세 가지를 기억하자.<br><br>
<b>첫째, 무엇을 말하는가?</b><br>
<b>둘째, 누구에게 말하는가?</b><br>
<b>셋째, 어떻게 말하는가?</b><br><br>
이 중 둘째, 누구에게 말하는가를 우선 명확히 하라. 그러면 오늘부터 더 좋은 글을 쓸 수 있을 것이다.<br><br>
<a href="http://korea.internet.com/channel/content.asp?nid=23944">
<font color="navy"><b>▶ 자세히 보기</b></font>
</a>
</div><br>
<div id="divTarget" ondragenter="handleDragEnter()" ondragover="cancelEvent()" ondragleave="handleDragLeave()" ondrop="drop()">
<b>박스를 마우스로 드래그하여 이 곳에 드롭시키세요!!</b>
</div>
<script language="javascript">
function cancelEvent() {
window.event.returnValue = false;
}
function drop() {
window.event.srcElement.style.backgroundColor = "#efefef";
divTarget.innerHTML = window.event.dataTransfer.getData("text");
}
function handleMouseMove() {
if (window.event.button == 1) {
document.all.divDraggable.dragDrop();
}
}
function handleDragStart() {
window.event.dataTransfer.setData("text", divDraggable.innerHTML)
}
function handleDragEnter() {
window.event.srcElement.style.backgroundColor = "red";
cancelEvent();
}
function handleDragLeave() {
window.event.srcElement.style.backgroundColor = "#efefef";
cancelEvent();
}
</script>
댓글 전체
이미지도 잘 되는데요?
존재하지 않는 이미지로 테스트 하신것 같은데, 캐쉬 지우고 새로고침 하신뒤에,
실제로 존재하는 이미지로 테스트 해보세요~.
존재하지 않는 이미지로 테스트 하신것 같은데, 캐쉬 지우고 새로고침 하신뒤에,
실제로 존재하는 이미지로 테스트 해보세요~.