<html>

    <head></head>

    <body>

    <script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>

        <div id="edit" contenteditable="true" style="width:400px;height:400px;border:1px solid #f00">

        </div>

    <script>

        function Edit( editEl ) {

            editEl = $(editEl);

            $(editEl).bind("paste", clipFn);

            function clipFn(ev) {

                //把剪贴板中的img通过canvas中专为base64字符串;

                var canvas = document.createElement("canvas");

                var context = canvas.getContext("2d");

                //从word拷贝时候会得到text/html数据;

                var html = $(ev.originalEvent.clipboardData.getData("text/html"));

                html.find("img").each(function () {

                    var img = document.createElement("img");

                    var src = $(this).attr("src"); //.replace(/\\/gi,"\/");

                    var _this = this;

                    img.src = src;

                    img.onload = function () {

                        canvas.width = img.width;

                        canvas.height = img.height;

                        context.drawImage(img, 0, 0, img.width, img.height);

                        var dataBase64 = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

                        $("img").each(function (index, el) {

                            //匹配图片;

                            if ($(this).attr("src").replace(/[\/\\]/g,"") ===  src.replace(/[\/\\]/g,"")) {

                                el.src = dataBase64;

                            };

                        });

                        img.onerror = function() {

                            console.log("图片加载失败");

                        };

                        img.onload = null;

                    };

                });

                //如果通过截图或者复制图片的方式会得到  type为"imgage"的图片;

                var ele = ev.originalEvent.clipboardData.items;

                for (var i = 0; i < ele.length; ++i) {

                    if ( ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1 ) {

                        var blob = ele[i].getAsFile();

                        readBlobAsDataURL(blob, function( base64 ) {

                            var img= document.createElement('img');

                            img.setAttribute('src', base64);

                            editEl.append(img);;

                        });

                        //阻止默认事件, 避免重复添加;

                        ev.originalEvent.preventDefault();

                    };

                };

            };

            //绑定拖拽事件

            //要给个响应

            editEl.bind("dragover", function() {

                return false;

            });

            //触发事件的响应

            editEl.bind("drop", function(ev) {

                loadImage( ev.originalEvent.dataTransfer.files[0] , function( result ) {

                    editEl.append( "<img src="+result+" />" );

                });

                return false;

            });

            // 加载 图像文件(url路径)

            function loadImage(src, callback){

                // 过滤掉 非 image 类型的文件

                if(!src.type.match(/image.*/)){

                    if(window.console){

                        console.log("选择的文件类型不是图片: ", src.type);

                    } else {

                        window.confirm("只能选择图片文件");

                    }

                    return;

                }

                // 创建 FileReader 对象 并调用 render 函数来完成渲染.

                var reader = new FileReader();

                // 绑定load事件自动回调函数

                reader.onload = function(e){

                    // 调用前面的 render 函数

                    callback(e.target.result);

                };

                // 读取文件内容

                reader.readAsDataURL(src);

            };

            function readBlobAsDataURL(blob, callback) {

                var a = new FileReader();

                a.onload = function(e) {callback(e.target.result);};

                a.readAsDataURL(blob);

            };

        };

    </script>

    <script>

        new Edit("#edit");

    </script>

    </body>

</html>