clipboardData：在编辑框中支持复制粘贴图片

最新推荐文章于 2023-09-12 14:10:53 发布

Whitess007

最新推荐文章于 2023-09-12 14:10:53 发布

阅读量7.5k

点赞数

文章标签： clipboardData 编辑框粘贴图片

本文链接：https://blog.csdn.net/rencaishigepi/article/details/80277810

版权

这个版本目前不支持移动和ie10及其以下，避免浪费浏览者时间

在编辑框里支持粘贴图片，可省去用户截图保存、再删除的麻烦。查阅了许多资料都是两三年前的了，现在clipboardData的支持程度也比较高了，所以可以很方便的使用了，好大的福音啊。

但我并没有具体测试支持的浏览器都是什么版本，目前我们常用的应该是没问题的了。

没那么强大的逻辑，还喜欢用现成的，所以就想着怎么把代码节省一些。也就造成了目前这个版本，只能获取到图片的base64位编码，其他的功能不满足的还需要自己去拓展。

这一版是引用了jquery，如果在angular环境中，这可能会有些问题，比如与$sce.trustAsHtml()冲突或者当使用event.clipboardData时，会获取不到（因为event已经被jquery包装过了）。

代码块

index.html：

<!DOCTYPE html>
<html lang="en" ng-app="demo">

<head>
    <meta charset="UTF-8">
    <title>截图上传</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <style>
        .demo{
            border: solid 1px #999;
            padding: 0.5em;
            margin: 1em 0 0 0;
            box-sizing: contentbox;
            width: 80%;
        }
    </style>
</head>

<body ng-controller="ctrlDemo">
    <div class="demo" ng-click="paste()">
        3333333333333333333
        <div class="reader" contenteditable="true" aria-hidden="true" tabindex="-1" style="width: 100px; height: 100px;position: fixed;overflow:hidden;"></div>
    </div>
    <div id="list"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.6.8/angular.js"></script>
<script src="index3.js"></script>
</html>

index.js

'use strict';
var app = angular.module('demo',[]);
app.controller('ctrlDemo',['$scope', function($scope) {
    function pasteImage(imgObj) {
        var reader = new FileReader();
        reader.readAsDataURL(imgObj);
        // 读取文件后将其显示在网页中
        reader.onload = function(e) {
            var img = new Image(), p = document.createElement('p');
            img.src = e.target.result;
            p.appendChild(img);
            $('#list').append(p);
        };
    }
    function imgReader(item) {
        var blob = item.getAsFile(),
            reader = new FileReader();
        reader.onload = function(e){
            var img = new Image(), p = document.createElement('p');
            img.src = e.target.result;
            p.appendChild(img);
            $('#list').append(p);
        };
        reader.readAsDataURL(blob);
    }; 
    $scope.paste = function() {
        $('.reader').focus();
    }
    /*
    jquery的写法
    $('.demo').on('click', (function(event) {
        return $('.reader').focus();
    }));
    */
    $('.reader').on('paste', function(event) {
        // 通过事件对象访问系统剪贴板
        var clipboardData = event.originalEvent.clipboardData, files, items, item;
        if (clipboardData) {
            /*files = clipboardData.files;
              if (files && files.length) {
                 pasteImage(files[0]);
                 return;
              }
            */ 
            /*用 items 能支持更多的浏览器*/
            items = clipboardData.items;

            if(items && items.length) {
                for(var i=0; i<clipboardData.types.length; i++) {
                    if(clipboardData.types[i] === 'Files') {
                        item = items[i];
                        break;
                    }
                }
                if( item && item.kind === 'file' && item.type.match(/^image\//i) ){ 
                    imgReader(item); 
                } 
            }
        }
    });
}]);

效果图：
这里写图片描述

如果需要这种样式的，可以点开这个链接进行查看：
https://github.com/aYellowApple/clipboardData
这里写图片描述
参考资料：
最全面的：https://ruby-china.org/topics/17266
获取灵感的：一个知乎上的回答，翻了翻历史记录没找到那个链接

Whitess007

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
clipboardData：在编辑框中支持复制粘贴图片

这个版本目前不支持移动和ie10及其以下，避免浪费浏览者时间在编辑框里支持粘贴图片，可省去用户截图保存、再删除的麻烦。查阅了许多资料都是两三年前的了，现在clipboardData的支持程度也比较高了，所以可以很方便的使用了，好大的福音啊。但我并没有具体测试支持的浏览器都是什么版本，目前我们常用的应该是没问题的了。没那么强大的逻辑，还喜欢用现成的，所以就想着怎么把代码节省一些。也就造成...
复制链接

扫一扫