JS实现图片粘贴到前台界面

最新推荐文章于 2023-09-05 21:14:52 发布

laizhixue

最新推荐文章于 2023-09-05 21:14:52 发布

阅读量976

点赞数 1

分类专栏： JavaScript 文章标签：图片粘贴

JavaScript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片粘贴</title>
    <style>
        #img{
            width: 500px;
        }
    </style>
    <img id="img" src="" alt="">
    通过Ctrl + v将图片粘贴
</head>
<body>
    <script>
        setPasteImg();
        //获取粘贴板上的图片
        function setPasteImg(){
            //粘贴事件
            document.addEventListener('paste', function(event){
                if (event.clipboardData || event.originalEvent) {
                    var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
                    if(clipboardData.items){
                        var  blob;
                        for (var i = 0; i < clipboardData.items.length; i++) {
                            if (clipboardData.items[i].type.indexOf("image") !== -1) {
                                blob = clipboardData.items[i].getAsFile();
                            }
                        }
                        var render = new FileReader();
                        render.onload = function (evt) {
                            //输出base64编码
                            var base64 = evt.target.result;
                            document.getElementById('img').setAttribute('src',base64);
                        }
                        render.readAsDataURL(blob);
                    }
 
                }
 
            })
 
        }
 
    </script>
</body>
</html>

laizhixue

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS实现图片粘贴到前台界面

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图片粘贴&lt;/title&gt; &lt;style&gt; #img{ width:
复制链接

扫一扫