Question

我正在从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>

Answer 1

使用画布有2个''尺寸'设置：通过CSS你可以设置DISPLAY大小，所以要设置画布的PHYSICAL大小，你必须使用它的属性。所以没有CSS / Style。

以这种方式思考：你创建一个物理尺寸的图像:(比方说）400px * 400px。
然后就像具有物理尺寸的普通图像（jpg，png，gif）一样，您仍然可以选择更改DISPLAYED尺寸，从而更改宽高比：如800px * 600px。通常支持％。

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

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

1 个答案: