0
"입력 파일"덕분에 사용자가 선택한 그림을 "div"에 표시하려고합니다.
내 코드에 어떤 문제가 있는지 알지 못합니다. Kinectic.JS 라이브러리를 사용하고 있습니다. 다음은 내 코드입니다 :이 테스트 havent 한버튼을 사용하여 이미지 불러 오기
`<html>
<head>
<style type="text/css">
#droite { float:right; }
#gauche { float:left; }
</style>
<script src="./Librairies/Canvas/kinetic-v4.5.4.js"></script>
<title>Kinetic test</title>
</head>
<body>
<div id="gauche"></div>
<form name=test>
<div id="droite"><br><br>
Please specify the image you want to appear<br>
<input type="file" name="uploadimage" accept="image/*">
<br><button id="addImg" value="Upload" >Upload</button>
</form>
<script>
function addImage(){
var stage = new Kinetic.Stage({
container: "gauche",
width: 500,
height: 400
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var myImage = new Kinetic.Image({
x: 140,
y: stage.getHeight()/2 - 59,
image: imageObj,
width: 106,
height: 118
});
layer.add(myImage);
stage.add(layer);
};
var f = document.getElementById('uploadimage').files[0];
var name = f.name;
var url = window.URL;
var src = url.createObjectURL(f);
imageObj.src = src;
//console.log(imageObj);
//alert(src);
}
document.getElementById('addImg').addEventListener('click',function(){ addImage(); }, false);
</script>
<form name=testo>
<br>Type some text <br>
<input type="text" name="texte"> <input type="submit" value="Print">
</div>
</form>
</body>
</html>`