Clipboard API and events 里面描述了剪切板事件onpaste,通过onpaste可以访问剪切板数据,然后使用blob、和FileReader方法将剪切板数据转为dataurl即可。

类似QQ截图,然后直接粘贴到网页上传。非常方便。

相关代码片段:DEMO

/**
     * 通过reader方式生成dataurl图片
     * @param event
     */
    function handlePaste(event) {
        var items = (event.clipboardData || event.originalEvent.clipboardData).items;
        console.log(JSON.stringify(items)); // will give you the mime types
        var blob = items[0].getAsFile();
        var reader = new FileReader();
        reader.onload = function(event){
            console.log(event.target.result)}; // data url!
        reader.readAsDataURL(blob);
    }

    /**
     * createObjectURL方式,创建图片文件
     * @param e
     */
    function handlePaste2(e) {
        var items = e.originalEvent.clipboardData.items;

        for (var i = 0; i < items.length; ++i) {
            console.log(items[i].type);
            if (items[i].kind == 'file' && items[i].type == 'image/png') {
                var blob = items[i].getAsFile();
                var img = document.createElement('img');
                img.src = window.URL? window.URL.createObjectURL(blob) : window.webkitURL.createObjectURL(blob);
                $("#js_editor").html(img);
            }
        }
    };

One thought on “Clipboard API实现截图粘贴到网页

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

required