问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

segmentfault提问的时候图片粘贴自动上传到官方服务器是怎么做到的?

头像
蓓蕾心晴
    56324136165

    segmentfault在这里发布问题的时候图片粘贴自动上传到官方服务器是怎么做到的?
    求大神指点实现原理和js,谢谢!
    我自己试过把图片转为base64的格式,但是会有跨域问题

    <!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>
    javascript上传图片node.js跨域上传图片跨域
    阅读 3.5k
    3 个回答
    得票最新
    头像
    yszou
      4.9k2718
      ✓ 已被采纳

      1. paste 事件处理“粘贴”。

      2. 事件 event 中，通过 event.clipboardData.items 可以拿到内容。

      3. item 的 getAsFile() 方法可以得到一个 blob 对象。

      4. 新浏览器，可以通过 FormData 直接处理这个 blob 对象（直接以 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
        });
    }

}
      头像
      testnullundefine
        2.5k32141

        就是一个base64 发送数据。你可以看一下请求：

        clipboard.png

        头像
        蓓蕾心晴
          56324136165
          查看全部 3 个回答
          推荐问题
          宣传栏