文章出處

   chrome有很多人性化的API,比如拖拽, 比如圖片可以轉化為base64等;

   比如知乎上面的回復中可以直接黏貼圖片,  就不需要手動點擊圖片上傳按鈕, 選擇圖片, 確認上傳等等; 知乎參考地址:打開

 

   讓編輯器支持word的復制黏貼, 其中圖片會轉化為base64編碼, 如果是通過遠程打開這個靜態頁, 黏貼word文檔的時候, 圖片不會黏貼進來, 因為遠程地址無法訪問本地磁盤的絕對路徑, 如果把下面代碼保存成靜態界面打開, 那么word中的圖片都可以看見, 而且都會被轉化為base64編碼;

   編輯器支持截屏的黏貼

   讓編輯器支持圖片直接拖拽, 直接拖拽即可添加圖片, 功能更加強大, 而且圖片也是base64編碼;

 

  使用的話這new Edit(), 參數為一個可編輯的元素, 比如有contenteditable屬性的div或者iframe元素等:

<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>

 

 
   很多網上的編輯器里 對圖片的支持單一, 都會考慮IE6, IE7,  ff, chrome, 各種兼容問題;

   這個解決方案適合基于chrome內核的瀏覽器, FF的兼容沒有處理, 因為所有的圖片數據都是基于base64, 圖片就沒有上傳這一說法了,圖片都變成了字符串, 不過這個有個劣勢就是每一次提交的數據都會比較大;

 

DataURL與File,Blob,canvas對象之間的互相轉換的Javascript

通過Canvas及File API縮放并上傳圖片

 

作者: NONO
出處:http://www.cnblogs.com/diligenceday/
QQ:287101329 


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()