4

我正在从 PC 上传图像。然后我用文件阅读器读取文件并通过创建一个 img 标签来显示图像。然后我将图像从 img 标签拖到画布中并将其绘制到画布上。我正在使用 dragstart 和 onDrop 事件。我使用datatransfer.setdata()and 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>
4

1 回答 1

3

使用画布有 2 个“大小”设置：通过 CSS 您将设置显示大小，因此要设置画布的物理大小，您必须使用它的属性。所以没有 CSS/样式。

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

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

于 2012-07-25T00:20:59.100 回答