美文网首页
JavaScript粘贴时获取截图的图片

JavaScript粘贴时获取截图的图片

作者: linweiyu21 | 来源:发表于2017-09-01 09:46 被阅读0次
<script type="text/javascript">
    /**
     * 剪贴板粘贴图片
     */
    // 绑定粘贴事件
    (function () {
        document.getElementById( 'userInput' ).addEventListener( 'paste', function( e ){
            var clipboardData = e.clipboardData;
            var i = 0;
            var 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 );
                }
            }
        });

        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 );
        };
    })();
</script>

相关文章

网友评论

      本文标题:JavaScript粘贴时获取截图的图片

      本文链接:https://www.haomeiwen.com/subject/znehjxtx.html