textarea输入框粘贴截图自动生成url 自动选定 自动复制

前端代码

我使用的是sweetalert2页面弹窗的textarea来承载图片粘贴。这是前端的html代码

<li>
    <a href="#" title="点击粘贴图片/截图" id="parseBtn">
        <i class="fa fa-file-photo-o"></i>
    </a>
</li>

---

js中的弹框代码，textareaIns就是自己的需要的输入框。因为他是插件，所以我是这样获取的。

$('#parseBtn').click(function(){
        // 定义textarea的对象
        let textareaIns;

        swal({
            title: '图片请粘贴在这里',
            input: 'textarea',
            inputAttributes: {spellcheck: false},
            showCancelButton: true,
            confirmButtonText: '复制',
            cancelButtonText: '取消',
            showLoaderOnConfirm: true,
            onOpen: function(box){
                textareaIns = $(box).find('textarea:visible');
                inputPaste(textareaIns, (url)=>{
                    // 赋值新的结果只
                    textareaIns.val(url);
                    // 选择粘贴对象
                    textareaIns.select();
                });
            }
        }).then(function(res) {
            if(res.value){
                // 执行自动复制
                document.execCommand("Copy"); // 执行浏览器复制命令

                // 复制成功
                $.admin.toastr.success('复制成功');
            }

        })
    });

以上是监听粘贴事件的详情代码，在弹框打开的时候，注册当前的textarea的监听事件。
特点：

• 使用inputPaste函数的回调函数获取已经上传到服务器的url地址。
• 使用textareaIns.select()全选当前的获取的url的值。
• 点击“复制”按钮执行document.execCommand("Copy")自动复制到剪贴板，可以直接粘贴。

---

// 监听到当前的元素
    function inputPaste(ele, callback) {
        // 监听粘贴事件
        ele.on('paste',  (ev)=>{
            var items = (ev.clipboardData || ev.originalEvent.clipboardData).items;
            for (var index in items) {
                var item = items[index];
                console.log(item.kind);
                if (item.kind === 'file') {
                    var reader = new FileReader();
                    reader.readAsDataURL(item.getAsFile());
                    reader.onload = function (event) {
                        //将剪切板中复制信息转换成一种base64格式字符串
                        var base64 = event.target.result;
                        //ajax上传图片
                        $.ajax({
                            url: "/admin/paste/upload",
                            type: 'post',
                            data: {'base64': base64},
                            async: false,
                            dataType: 'json',
                            success: function (res) {
                                if (res.success){
                                    callback(res.url);
                                }
                            },
                            error: function () {
                                alert('图片上传错误');
                            }
                        });
                    }
                }

            }
        });
    }

以上是处理粘贴图片的代码。由于获取到剪切板的图片文件是base64字符串，所有这里使用了ajax的普通的post上传方法。
这里对应剪贴板事件进行了封装，可以移植到你需要处理的任何元素。

---

效果截图如下

这里仅仅是前端的代码，如果有需要了解php后端是如何接受并存储base64图片的，请查看后面的博客。