HTML5 -拖拽&将JPEG从一个浏览器放到另一个浏览器

HTML5 - Drag & drop a JPEG from browser to browser

本文关键字：浏览器 一个 另一个 拖拽 JPEG HTML5      更新时间：2023-09-26

我已经看到了很多如何实现从桌面拖放JPEG到浏览器的例子。最近我听说还可以从另一个html网站上拖动JPEG到我的浏览器中并加载JPEG。我怎么能意识到这一点呢?

是否与:

 void addElement(
   in Element element
 );

如果你正在使用Jquery，你可以在这里找到一个方法:https://github.com/blueimp/jQuery-File-Upload/wiki/Drag-and-drop-uploads-from-another-web-page

的代码如下:

<script src="https://raw.github.com/betamax/getImageData/master/jquery.getimagedata.min.js"></script>
<script>
$(document).bind('drop dragover', function (e) {
    // Prevent the default browser drop action:
    e.preventDefault();
});
$(document).bind('drop', function (e) {
    var url = $(e.originalEvent.dataTransfer.getData('text/html')).filter('img').attr('src');
    if (url) {
        $.getImageData({
            url: url,
            success: function (img) {
                var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
                if (canvas.getContext && canvas.toBlob) {
                    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
                    canvas.toBlob(function (blob) {
                        $('#fileupload').fileupload('add', {files: [blob]});
                    }, "image/jpeg");
                }
            }
        });
    }
});
</script>
相关文章：