그래서 내 index.html 파일의 javascript를 통해 동적으로 생성 된 이미지의 src를 복사하는 데 실패했으며 원본의 src가 복사되어 해당 이미지를 표시하는 다른 html 페이지에 새 이미지를 만들고 싶습니다. . 모든 의견이나 제안을 주시면 감사하겠습니다. 아래 관련 코드 :
첫 페이지의 전체 스크립트 :
window.onload = function() {
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
var filecanvas = document.getElementById('check');
var context = filecanvas.getContext('2d');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function(e) {
fileDisplayArea.innerHTML = "";
var img = new Image();
img.src = reader.result;
img.id = 'newimg';
sessionStorage.setItem("CachedImage", img.src);
fileDisplayArea.appendChild(img);
var canvasimage = new Image();
canvasimage.onload = function () {
context.drawImage(canvasimage,100,200);
};
canvasimage.src = reader.result;
}
reader.readAsDataURL(file);
window.open('../markup/image.html');
} else {
fileDisplayArea.innerHTML = "File not supported!"
}
});
}
두 번째 페이지의 전체 스크립트 + html :
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
window.onload = function() {
var newimage = document.getElementById('ni');
newimage.src = sessionStorage.getItem("CachedImage");
newimage.alt = 'Cannot be displayed';
};
</script>
<img id='ni' src="" />
</body>
</html>
클라이언트 측과 서버 측 모두에서이 작업을 수행 할 수 있습니다. 클라이언트 측에서는 세션 저장소 또는 로컬 저장소 옵션을 사용할 수 있습니다. 서버 측에서 데이터를 검색하려면 값을 반환하는 함수를 만들어야합니다. 나중에 데이터에 액세스 할 수 있습니다.
파일 경로 만 전달하므로 세션과 같은 클라이언트 측 스토리지를 사용하는 것이 좋습니다.
소스 코드 :
첫 페이지의 자바 스크립트 코드 :
var img = new Image();
img.src = reader.result;
img.id = 'newimg';
sessionStorage.setItem("CachedImage", img.src); // save image source into sessions
두 번째 페이지의 자바 스크립트 코드 :
var newimage = new Image();
newimage.id = 'ni';
newimage.src = sessionStorage.getItem("CachedImage"); // retrieve image src from sessions
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다