JS访问剪切板中的图片

　　google出来一个html2canvas，它利用canvas来渲染读取的DOM树，也就是说它只能截取document里的内容，如果要像qq截图那样，应该怎么做？用过百度的Ueditor编辑器的朋友都知道，它是调用了一个exe插件来实现的，由于本人内功不足还不会用c++写一个截屏插件出来，谷歌度娘参考了一番就取巧用js访问剪切板，获取到不管是qq还是系统剪切的图片数据。

　　输入框的结构代码：

    <iframe seamless ng-snapscreen id="dialogEditor" scrolling="no" autofocus placeholder="请输入">

    </iframe>

　　设置iframe：

var _frame = document.getElementById("dialogEditor");

var _window = _frame.contentWindow;

_window.document.designMode="on";//设置为设计模式，就可以填写内容了

_window.document.canHaveHTML=true;//可以包含HTML

　　绑定粘贴事件：

    iframbody.addEventListener( 'paste', function( e ){

            var clipboardData = e.clipboardData,

                i = 0,

                items, item, types;

            if( clipboardData ){

                items = clipboardData.items;

                if( !items ){

                    return;

                }

                item = items[0];

                types = clipboardData.types || [];

                for( ; i < types.length; i++ ){

                    if( types[i] === 'Files' ){

                        item = items[i];

                        break;

                    }

                }

                if( item && item.kind === 'file' && item.type.match(/^image\//i) ){

                    imgReader( item );

                }

            }

        });

　　粘贴事件的 Event 接口对象提供了一个 clipboardData 接口，该接口就保存了系统剪贴板中的数据，如上面所说，目前只有高版本的 Chrome 浏览器能直接访问系统剪贴板的数据。这就给截屏后保存到剪贴板中的图片于网页直接进行交互提供了一个入口。

　　这里所说的截屏，就是 QQ 提供的截屏或者系统自带的 PrtScn 键的截屏功能，或者其他第三方软件提供的截屏功能。

　　从剪贴板中取到了图片数据，就可以用 FileReader 对其进行读取了：

var imgReader = function( item ){

            var blob = item.getAsFile(),

                reader = new FileReader();

            reader.onload = function( e ){

                var img = new Image();

                img.src = e.target.result;

                img.className = 'snapimg';

                img.style.maxWidth = '80px';

                img.style.maxHeight = '60px';

                //document.body.appendChild( img );

                iframbody.appendChild( img );

            };

            reader.readAsDataURL( blob );

        };

　　这是一个简单的演示：

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>利用 clipboardData 在网页中实现截屏粘贴的功能</title>

<style type="text/css">

#box{ width:200px; height:200px; border:1px solid #ddd; }

</style>

</head>

<body>

<h1>利用 clipboardData 在网页中实现截屏粘贴的功能</h1>

<hr />

<div><input type="text" id="testInput" placeholder="截屏后粘贴到输入框中" size="30" /></div>

<script type="text/javascript">

(function(){

    var imgReader = function( item ){

        var blob = item.getAsFile(),

            reader = new FileReader();

        reader.onload = function( e ){

            var img = new Image();

            img.src = e.target.result;

            document.body.appendChild( img );

        };

        reader.readAsDataURL( blob );

    };

    document.getElementById( 'testInput' ).addEventListener( 'paste', function( e ){

    var clipboardData = e.clipboardData,

        i = 0,

        items, item, types;

    if( clipboardData ){

        items = clipboardData.items;

        if( !items ){

            return;

        }

        item = items[0];

        types = clipboardData.types || [];

        for( ; i < types.length; i++ ){

            if( types[i] === 'Files' ){

                item = items[i];

                break;

            }

        }

        if( item && item.kind === 'file' && item.type.match(/^image\//i) ){

            imgReader( item );

        }

    }

    });

})();

</script>

</body>

</html>

秒客网

JS访问剪切板中的图片

相关文章