为什么图像不能放入画布？

我有一个画布和一个图像。我希望能够将图像拖放到画布上。在控制台中没有任何东西没有定义或任何东西..任何人都有线索？为什么图像不能放入画布？

感谢您的帮助，并为我所有的其他职位！ :)

的javascript：

function first(){ 
    dragedPic = document.getElementById('firstPic'); 
    dragedPic.addEventListener("dragstart", startDrag, false); 
    canvas = document.getElementById('Canvas'); 
    canvas.addEventListener("dragenter", function(e){e.preventDefault();}, false); 
    canvas.addEventListener("dragover", function(e){e.preventDefault();}, false); 
    canvas.addEventListener("drop", dropped, false); 
} 
function startDrag(e){ 
    var code = '<img src="FärgadePapper.png">'; 
    e.dataTransfer.setData('Text', code); 
} 
function dropped(e){ 
    e.preventDefault(); 
    canvas.innerHTML = e.dataTransfer.getData('Text'); 
} 
window.addEventListener("load", first, false);

来源

2013-11-09 user2961869

你应该有数据作为img本身（您检索ById或类似）。 – GameAlchemist

我不太关注。我想，当你放弃图像时，它会发现图像存储和粘贴的地方...... – user2961869

下面的代码工作：

（http://jsbin.com/ukAFev/1/）

var dragedPic = null; 
var canvas = null; 


function first(){ 
    dragedPic = document.getElementById('firstPic'); 
    dragedPic.addEventListener("dragstart", startDrag, false); 
    canvas = document.getElementById('Canvas'); 
    canvas.addEventListener("dragenter", function(e){e.preventDefault();}, false); 
    canvas.addEventListener("dragover", function(e){e.preventDefault();}, false); 
    canvas.addEventListener("drop", dropped, false); 
} 

function startDrag(e){ 
    // the general case is to send the image id. 
    e.dataTransfer.setData('Image', 'firstPic'); 
} 

function dropped(e){ 
// e.preventDefault(); 
    var imgId = e.dataTransfer.getData('Image'); 
    var img = document.getElementById(imgId); 
    var ctx = canvas.getContext('2d'); 
    var ratio = canvas.width/img.naturalWidth; 
    ctx.save(); 
    ctx.scale(ratio, ratio); 
    ctx.drawImage(img, 0,0); 
    ctx.restore(); 
} 
window.addEventListener("load", first);

有了这个网站：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <canvas width=400 height=400 id='Canvas'>Canvas not supported on this Browser </canvas> 
    <br/> 
    <img id = 'firstPic' 
    src='http://www.tlh.ch/images/vote/zoom/4.jpg'/>  
</body> 
</html>

来源

2013-11-09 21:00:55 GameAlchemist

为什么图像不能放入画布？

回答

相关问题