在画布上拖动和绘制时传输图像数据

Image data transfer on drag and draw on canvas

本文关键字：传输 图像 数据 绘制 拖动      更新时间：2023-12-02

我正在从PC上传一个图像。然后我用文件读取器读取文件，并通过创建img标签来显示图像。然后，我将图像从img标记拖动到画布中，并将其绘制到画布上。我正在使用dragstart和onDrop事件。我使用datatransfer.setdata()和datatransfer.getdata()作为功能。但在下降时，画布上绘制的图像并不像原来那样原始。这是放大版。我不知道为什么会发生这种事！

这是我的代码：

<!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>

画布有两种"大小"设置：通过CSS可以设置DISPLAY大小，因此要设置画布的PHYSICAL大小，必须使用其属性。所以没有CSS/样式。

这样想：您创建一个物理大小为：（比方说）400px*400px的IMAGE
然后，就像具有物理大小的普通图像（jpg、png、gif）一样，您仍然可以选择更改DISPLAYED大小，从而更改纵横比：如800px*600px。通常支持偶数%。

希望这能清楚地解释为什么会发生这种情况，以及为什么你在评论中的解决方案也是正确的解决方案！！

相关文章：