Issue
I want to upload the image in web page. There is no error in the code but still I can't upload the image in web page and show it in canvas. The image is upload in the web page but it not show in the canvas which i created. Please help me to find what wrong with my code? here is the code for hole html page.
function upload(){
var dd=document.getElementById('can');
var filein=document.getElementById('finp');
var img = new SimpleImage(filein);
img.drawTo(dd);
}
function docolor(){
var dd1=document.getElementById("can2");
var colin=document.getElementById("clr");
var col=colin.value;
dd1.style.backgroundColor=col;
}<html>
<head>
<script src="http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"></script>
</head>
<body>
<h3>HTML code for canvas and upload button</h3>
<canvas id="can">
</canvas>
<h3>Load Image</h3>
<input type="file" multiple="false" accept="image/*" id="finp" onclick="upload()" >
</body>
</html>Solution
I think there is a mismatch in the IDs you use in HTML elements and JS Code.
function upload(){
var dd=document.getElementById('can');
var filein=document.getElementById('finp');
var img = new SimpleImage(filein);
img.drawTo(dd);
}
function docolor(){
var dd1=document.getElementById("can2");
var colin=document.getElementById("clr");
var col=colin.value;
dd1.style.backgroundColor=col;
}<script src="http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js" ></script>
<canvas id='can' class='canvasRoundCorders'></canvas>
<input id='finp' type='file' accept='image/*' onchange="upload()">Answered By - Harshana Serasinghe Answer Checked By - Senaida (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.