Home/ Questions/Q 8283641
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T10:48:15+00:00

I am uploading an image from PC. Then I read the file with file

  • 0

I am uploading an image from PC. Then I read the file with file reader and display image by creating an img tag. Then I drag the image from the img tag into the canvas and draw it onto canvas. I’m using dragstart and onDrop events. I use datatransfer.setdata() and datatransfer.getdata() for the functionality. But on drop, the image drawn on canvas is not as original. It is a zoomed version. I don’t know why is this happening!

Here is my code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag Demo</title>
<link href="copy.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div style = "border:2px  solid black;">
<canvas id = "canvas" style = "position:relative;width:1000px;height:1000px;top:0px;left:200px; border:2px  solid black;" ondrop="dropIt(event);" ondragover="event.preventDefault();"> </canvas>    
</div>
<div>
    <input type="file" id="fileElem" accept="image/*" style="display:none" >
    <div id="fileSelect" class="drop-area">Select some files</div>
</div>
    <div id="thumbnail"></div>
</div>

<script type="text/javascript">


function dragIt(event) {
event.dataTransfer.setData("URL", event.target.id)
};


function dropIt(event) {
  var theData = event.dataTransfer.getData("URL");
  dt = document.getElementById(theData);
  alert(dt.width);
  alert(dt.height);
  event.preventDefault();
  var c = document.getElementById("canvas");
  var ctx = c.getContext('2d');
  ctx.drawImage(dt, 0, 0);      
};


var count = 0;
var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem");


fileElem.addEventListener("change",function(e){
  var files = this.files
  handleFiles(files)
},false)  


fileSelect.addEventListener("click", function (e) {
    fileElem.click();
  e.preventDefault(); 
}, false);


function handleFiles(files) {  
  for (var i = 0; i < files.length; i++) {  
    var file = files[i];    
    var imageType = /image.*/; 

    if(!file.type.match(imageType)){
      console.log("Not an Image");
      continue;
    }

    var image = document.createElement("img");
    var thumbnail = document.getElementById("thumbnail");
    image.file = file;

    function handlefilereader(evt){
    var target = evt.target || evt.srcElement;
    image.src = evt.target.result;     
    }

    if(document.all) {
            image.src = document.getElementById('fileElem').value;
            }
            else {

    var reader = new FileReader()
    reader.onload = handlefilereader;
    reader.readAsDataURL(file);
    }
    image.id = count;
    count++;
    thumbnail.appendChild(image);
    alert(image.width);
    image.draggable = true;
    image.ondragstart = dragIt;
  }
}

</script>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    With canvas there are 2 ‘size’ settings:
    Through CSS you’ll set the DISPLAY size, so to set the PHYSICAL size of the canvas, you MUST use its attributes. So NO CSS/Style.

    Think about it this way: you create a IMAGE with physical size: (let’s say) 400px*400px.
    Then just as a normal image (jpg,png,gif) that has a physical size, you can still choose to change the DISPLAYED size and thus aspect-ratio: like 800px*600px. Even % is normally supported.

    Hope this explains clearly WHY this happened and why your solution in your comment is also the correct solution!!

    • 0