javascript - transferencia - transferir dibujo a lienzo
Transferencia de datos de imagen en arrastre y dibujo en lienzo (1)
Estoy cargando una imagen desde la PC. Luego leo el archivo con el lector de archivos y visualizo la imagen creando una etiqueta img. Luego, arrastro la imagen desde la etiqueta img al lienzo y la dibujo sobre el lienzo. Estoy usando eventos dragstart y onDrop. Yo uso datatransfer.setdata () y datatransfer.getdata () para la funcionalidad. Pero al caer, la imagen dibujada en el lienzo no es tan original. Es una versión ampliada. ¡No sé por qué está pasando esto!
Aquí está mi código,
<!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>
Con lienzo hay 2 configuraciones de "tamaño": a través de CSS, configurará el tamaño de PANTALLA, por lo que para establecer el tamaño FÍSICO del lienzo, DEBE usar sus atributos. Así que NO CSS / Style.
Piénselo de esta manera: crea una IMAGEN con tamaño físico: (digamos) 400px * 400px.
Entonces, al igual que una imagen normal (jpg, png, gif) que tiene un tamaño físico, aún puede optar por cambiar el tamaño MOSTRADO y por lo tanto la relación de aspecto: como 800px * 600px. Incluso el% es normalmente compatible.
Espero que esto explique claramente POR QUÉ sucedió y por qué su solución en su comentario también es la solución correcta.