segmentfault提問(wèn)的時(shí)候圖片粘貼自動(dòng)上傳到官方服務(wù)器是怎么做到的?

segmentfault在這里發(fā)布問(wèn)題的時(shí)候圖片粘貼自動(dòng)上傳到官方服務(wù)器是怎么做到的?
求大神指點(diǎn)實(shí)現(xiàn)原理和js,謝謝!
我自己試過(guò)把圖片轉(zhuǎn)為base64的格式,但是會(huì)有跨域問(wèn)題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var img = "https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1504502384804&amp;di=d324be6014719b796d7bbacbf1ef6a05&amp;imgtype=0&amp;src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb7fd5266d0160924ddfdc911de0735fae7cd34db.jpg";
    //var img = "https://127.0.0.1/base64/1.jpg";
    function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
        var dataURL = canvas.toDataURL("image/"+ext);
        return dataURL;
    }
    var image = new Image();
    image.crossOrigin = '*';
    image.src = img;
    image.onload = function(){
        var base64 = getBase64Image(image);
        console.log(base64);
    }
</script>
</body>
</html>

回答

編輯回答

別傷我

paste 事件處理“粘貼”。
事件 event 中，通過(guò) event.clipboardData.items 可以拿到內(nèi)容。
item 的 getAsFile() 方法可以得到一個(gè) blob 對(duì)象。
新瀏覽器，可以通過(guò) FormData 直接處理這個(gè) blob 對(duì)象（直接以 multipart 方式提交了）。

大概的代碼：

// 處理粘貼事件
$(document).off('paste');
$(document).on('paste', function(eventObj) {
    var event = eventObj.originalEvent;

    var imageRe = new RegExp(/image\/.*/);
    var fileList = $.map(event.clipboardData.items, function (o) {
        if(!imageRe.test(o.type)){ return }
        var blob = o.getAsFile();
        return blob;
    });
    if(fileList.length <= 0){ return }

    srv.upload(fileList, function(name) { ... });
}

srv.upload 大概是：

function upload(fileList, callback) {

    for(var i = 0, l = fileList.length; i < l; i++){
        var fd = new FormData();
        var f = fileList[i];
        fd.append('filedata', f);

        var defer = $.ajax({
            url: config.upload,
            type: 'POST',
            dataType: 'json',
            data: fd,
            processData: false,
            contentType: false,
            xhrFields: { withCredentials: true },
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Credentials': 'true'
            },
            success: callback(f.name) || angular.noop,
            error: callback(f.name) || angular.noop
        });
    }

}

2018年6月24日 23:22

編輯回答