提问一个div的粘贴图片获取数据流的问题。

qq_35413639 2019-08-23 02:13:13

现在有这样一个需求，需要在可编辑的div中粘贴图片。
正常截图粘贴到div中可以获取到base64的图片数据。
但是从文件夹中粘贴一个图片到div中却获取不到。
例1：微信截图 -> 在DIV中ctrl+v -> 页面显示图片（这种方式可以获取到base64的图片数据。）
例2：从磁盘中找到.jpg后缀名图片 -> 在DIV中ctrl+v -> 页面显示图片（这种方式获取不到base64的图片数据）

测试用的代码如下





<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>



<body>

    <div id="pasteDiv" contenteditable="true" onpaste="getPasteImgData(event);"></div>

</body>



</html>



<script>

    function getPasteImgData(e) {

        if (e.clipboardData && e.clipboardData.items) {

            ele = e.clipboardData.items;

            for (var i = 0; i < ele.length; ++i) {

                if (ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1) {

                    var blob = ele[i].getAsFile();

                    console.log(blob);

                } else {

                    return;

                }

            }

        } else {

            return;

        }

    }



</script>



<style>

    #pasteDiv {

        height: 150px;

        width: 250px;

        background-color: beige;

    }

</style>