js粘贴图片并显示

Posted 起啥名嘞

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js粘贴图片并显示相关的知识,希望对你有一定的参考价值。

var fromDa;
$(function(){
    document.getElementById(‘app‘).addEventListener(‘paste‘, function(e) {
        if(e.target.tagName=="TEXTAREA"){//防止文本粘贴时触发粘贴图片
            return
        }else if(e.target.tagName=="INPUT"){//防止input粘贴时触发粘贴图片
            return
        }
        if(e.clipboardData) {
            e.preventDefault(); //不让图片在火狐浏览器中展示
            for(var i = 0; i < e.clipboardData.items.length; i++) {
                var c = e.clipboardData.items[i];
                var f = c.getAsFile();
//                console.log(c)
                var reader = new FileReader();
                reader.onload = function(e) {
//                    console.log(e)
                    amount.elimgSrc = reader.result
                    fromDa = new FormData();
                    fromDa.append(‘file‘, f);
                    //                console.log(fromDa.get(‘file‘))
                }
                reader.readAsDataURL(f);
            }
        }
    });
});

html部分:

<div contenteditable="true" id="tankBox" style="width: 130px;height: 97px;border:1px solid #DCDFE6;border-radius: 4px;" @keydown.delete.prevent="keypress">
                                    <img :src="elimgSrc != ‘‘ ? elimgSrc : ‘‘" id="imgSrc" style="max-width: 130px;max-height: 97px;" id="tankBoximgSrc" />
                                </div>
                                <button type="button" class="btn btn-success" style="font-size: 12px;" @click="pasteUploadcontent()">粘贴图片识别</button>
                                <button type="button" class="btn btn-success" style="font-size: 12px;" @click="pasteFun()">取消</button>

这个文本中,用的是vue.js通过虚拟dom渲染;可根据具体情况转换;主要用到的是contenteditable="true"

以上是关于js粘贴图片并显示的主要内容,如果未能解决你的问题,请参考以下文章

js实现ctrl+v粘贴并上传图片

umeditor实现ctrl+v粘贴word图片并上传

CKeditor是怎么把图片转化成一些字符串的?我粘贴一张图片进编辑区,查看代码就是一些字符串?

js实现ctrl+v粘贴图片或是截图

JS获取剪切板内容

Swift新async/await并发中利用Task防止指定代码片段执行的数据竞争(Data Race)问题