我正在从 PC 上传图像。然后我用文件阅读器读取文件并通过创建 img 标签显示图像。然后我将图像从 img 标签拖到 Canvas 中并将其绘制到 Canvas 上。我正在使用 dragstart 和 onDrop 事件。我使用 datatransfer.setdata() 和 datatransfer.getdata() 来实现功能。但是在放下时，在 Canvas 上绘制的图像并不像原来的那样。这是一个放大版本。我不知道为什么会这样!
这是我的代码:
<!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>
最佳答案
对于 Canvas ，有 2 个“大小”设置: 通过 CSS，您将设置显示大小，因此要设置 Canvas 的物理大小，您必须使用它的属性。所以没有 CSS/样式。
这样想:您创建一个物理尺寸为:(假设)400px*400px 的图像。
然后就像具有物理尺寸的普通图像(jpg、png、gif)一样，您仍然可以选择更改显示尺寸，从而更改纵横比:如 800px*600px。通常支持偶数 %。
希望这能清楚地解释为什么会发生这种情况以及为什么您在评论中的解决方案也是正确的解决方案!!
关于javascript - 在 Canvas 上拖动和绘制图像数据传输，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11578480/