4

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>
4

1 に答える 1

3

キャンバスには2つの「サイズ」設定があります。CSSを使用してDISPLAYサイズを設定するため、キャンバスの物理サイズを設定するには、その属性を使用する必要があります。したがって、CSS/スタイルはありません。

このように考えてください。物理的なサイズ:(たとえば）400px*400pxの画像を作成します。
次に、物理的なサイズの通常の画像（jpg、png、gif）と同じように、表示サイズを変更して、アスペクト比を800px*600pxのように変更することもできます。通常、％でもサポートされます。

これがなぜこれが起こったのか、そしてあなたのコメントのあなたの解決策が正しい解決策でもある理由を明確に説明することを願っています!!

于 2012-07-25T00:20:59.100 に答える