这是一个后续问题如何将文本和图像拖放到画布上？ （火狐41.0.1）
我根本不知道如何访问我放到画布上的图像的图像数据。我尝试过类似的事情data = event.dataTransfer.getData("image")，但这一切都不起作用。
function addDragNDropToCanvas() {
document.getElementById('canvas').addEventListener("dragover", function(event) { event.preventDefault();}, false);
//handle the drop
document.getElementById('canvas').addEventListener("drop", function(event) {
event.preventDefault();
console.log('something is dropped on the object with id: ' + event.target.id);
// var directData=event.dataTransfer.getData("image");
console.log(event);
}, false);
}
掉落事件数据中肯定包含图像数据吗？不是吗？？？
（该图像没有自己的 id 属性。）
您的用户可能会执行以下两种拖动中的一种（或两种）：
- 将网页中的 img 元素拖动到画布上，或者
- 将图像文件从本地驱动器拖到画布上。
如果图像是从网页中拖动的：
- 听听
dragover, drop，以及可选的dragenter events.
- 处理所有 3 个事件时，告诉浏览器您正在处理该事件
event.preventDefault以及可选的event.stopPropagation.
- In the
drop处理程序，获取event.dataTransfer.getData('text/plain') which fetches the已删除图像的 .src`。
- 创建一个新的
Image()对象使用.src and drawImage到画布上。
如果图像是从本地驱动器拖动的：
1 和 2. 监听并处理与网页代码中相同的事件。
获取用户放置的本地图像文件event.dataTransfer.files.
创建一个FileReader并读取每个图像文件。这FileReader.readAsDataURL方法将返回一个图像 URL，您可以将其用作.src对于图像对象。
drawImage将每个新图像添加到画布上。
这是允许两者的示例代码：
window.onload=function(){
// canvas related vars
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// dropZone event handlers
var dropZone=document.getElementById("canvas");
dropZone.addEventListener("dragenter", handleDragEnter, false);
dropZone.addEventListener("dragover", handleDragOver, false);
dropZone.addEventListener("drop", handleDrop, false);
//
function handleDragEnter(e){e.stopPropagation(); e.preventDefault();}
//
function handleDragOver(e){e.stopPropagation(); e.preventDefault();}
//
function handleDrop(e){
e.stopPropagation();
e.preventDefault();
//
var url=e.dataTransfer.getData('text/plain');
// for img elements, url is the img src so
// create an Image Object & draw to canvas
if(url){
var img=new Image();
img.onload=function(){ctx.drawImage(this,0,0);}
img.src=url;
// for img file(s), read the file & draw to canvas
}else{
handleFiles(e.dataTransfer.files);
}
}
// read & create an image from the image file
function handleFiles(files) {
for (var i=0;i<files.length;i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)){continue;}
var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
var reader=new FileReader();
reader.onload=(function(aImg){
return function(e) {
aImg.onload=function(){
ctx.drawImage(aImg,0,0);
}
// e.target.result is a dataURL for the image
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
} // end for
} // end handleFiles
}; // end $(function(){});
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<!doctype html>
<html>
<body>
<h4>Drag an image from below onto the canvas, or<br>Drag an image file from your desktop onto the canvas.</h4>
<canvas id="canvas" width=300 height=300></canvas>
<br>
<img width="50" src="https://cfl.dropboxstatic.com/static/images/index/rebrand/logos/glyphs/glyph_french_vanilla.svg">
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
