通过拖放在画布上传输图像数据

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

来源

2012-07-20 MJQ

得到的解决方案，我是设置宽度和高度以像素为单位。只要把它们放在风格之外，它就对了！ – MJQ 2012-07-20 12:26:36

用帆布有2个“大小”的设置：通过CSS，你会设置的显示尺寸，所以设置画布的物理尺寸，则必须使用其属性。所以没有CSS /风格。

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

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

来源

2012-07-25 00:20:59 GitaarLAB

通过拖放在画布上传输图像数据

回答

相关问题