javascript – HTML5 / Canvas onDrop事件未触发？

2019-07-16 21:35:10 阅读：401 来源： 互联网

我正在玩文件上传,拖放和画布,但由于某种原因,ondrop函数似乎永远不会运行,这里是我工作的小提琴：http://jsfiddle.net/JKirchartz/E4yRv/

相关代码是：

canvas.ondrop = function(e) {
        e.preventDefault();
        var file = e.dataTransfer.files[0],
            reader = new FileReader();
        reader.onload = function(event) {
            var img = new Image(),
                imgStr = event.target.result;
            state.innerHTML += ' Image Uploaded: <a href="' +
                imgStr + '" target="_blank">view image</a><br />';
            img.src = event.target.result;
            img.onload = function(event) {
                context.height = canvas.height = this.height;
                context.width = canvas.width = this.width;
                context.drawImage(this, 0, 0);
                state.innerHTML += ' Canvas Loaded: <a href="' + canvas.toDataURL() + '" target="_blank">view canvas</a><br />';
            };
        };
        reader.readAsDataURL(file);
        return false;
    };

为什么这个事件没有发生？我在firefox和chrome中尝试过它.

解决方法:

为了让drop事件发生,你需要有一个ondragover函数：

canvas.ondragover = function(e) {
    e.preventDefault();
    return false;
};

如果您尝试将猫图片拖动到画布中它仍然无效,则会在Firefox控制台中报告此错误：

[04:16:42.298] uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMFileReader.readAsDataURL]"  nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)"  location: "JS frame :: http://fiddle.jshell.net/_display/ :: <TOP_LEVEL> :: line 57"  data: no]

但是,如果您使用drag an image from your desktop,它将起作用.我认为对于页面中的图像,您应该使用常规的DOM访问方法,只有将外部文件拖入浏览器才需要File API.

标签：javascript,html5,html5-canvas
来源： https://codeday.me/bug/20190716/1482083.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – HTML5 / Canvas onDrop事件未触发？