从剪切板获取截图并上传到服务器

最近在做一个项目，需要用户截图后，将图片保存，上传到服务器。
传统的做法是，截图，保存文件到本地，在web页面上选择本地文件并上传。
现使用jquery及js插件实现，js插件是别人实现的，我只是修改了一些代码，结合flask，使之自动上传到服务，截图，复制到Input，然后自动显示在div上，并直接上传到服务，并把图片地址返回回来。
效果图如下：

image.png

html页面显示

<!doctype html>
<html>
<body>
<script src='js/jquery.min.js'></script>
<script src='js/screenshot-paaste.js'></script>
<input id='copyimg' tpye='text' placeholder='screenshots ctrl+v paste here'>
<span>return picurl</span><input id='rpic'>
<div id='imgPreview'></div>
<script type='text/javascript'>
  $('#copyimg').screenshotPaste({
    imgContainer:'#imgPreview', //view pic holder
    imgHeight:50,
    imgInputUrl:'#picurl'
  })
</script>
</body>
</html>

js插件代码：

(function ($) {
  $.fn.screenshotPaste=function(options){
    var me = this;

    if(typeof options =='string'){
      var method = $.fn.screenshotPaste.methods[options];

      if (method) {
        return method();
      } else {
        return;
      }
    }

    var defaults = {
      imgContainer: '',  //预览图片的容器
      imgHeight:200,    //预览图片的默认高度
      imgIputUrl:''         //服务返回地址，放入图片input内 
    };
    
    options = $.extend(defaults,options);

    var imgReader = function( item ){
      var file = item.getAsFile();
      var reader = new FileReader();
      
      reader.readAsDataURL( file );
      reader.onload = function( e ){
        var img = new Image();

        img.src = e.target.result;
        //ajax上传图片，返回图片地址
        var imgurl;
        $.ajax({
            async:false,
            type:"post",
            url:'/updateImg',
            data:{scr:img.src},
            success:function(data,status){
                if(status == "success"){imgurl=data.imgsrc;}
            }
        });
        //return imgurl;
        $(img).css({ height: options.imgHeight });
        $(img).attr("onclick","javascript:showimage("+"'"+imgurl+"'"+")");
        $(document).find(options.imgContainer)
        .html('')
        .show()
        .append(img);
        $(document).find(options.imgInputUrl)
        .val(imgurl);
      };
    };
    //事件注册
    $(me).on('paste',function(e){
      var clipboardData = e.originalEvent.clipboardData;
      var items, item, types;

      if( clipboardData ){
        items = clipboardData.items;

        if( !items ){
          return;
        }

        item = items[0];
        types = clipboardData.types || [];

        for(var i=0 ; i < types.length; i++ ){
          if( types[i] === 'Files' ){
            item = items[i];
            break;
          }
        }

        if( item && item.kind === 'file' && item.type.match(/^image\//i) ){
          imgReader( item );
        }
      }
    });

    $.fn.screenshotPaste.methods = {
      getImgData: function () {
        var src = $(document).find(options.imgContainer).find('img').attr('src');

        if(src==undefined){
          src='';
        }

        return src;
      }
    };
  };
})(jQuery);

后台代码：

from flask import Flask,render_template,jsonify
import base64
import os
import time

app = Flask(__name__)

@app.route('/updateImg',methods=['GET','POST']
def updateImg():
  base64img = request.form.get('scr')
  strs = re.match('^data:imge/(jped|png|gif);base64,',base64img)
  base64img = base64img.replace(strs.group(),'')
  imgdata = base64.b64decode(base64img)
  a,b = str(time.time()).split('.')
  path = os.path.join('/picserver',a + '.png')
  with open(path,'wb') as file:
    file.write(imgdata)
  return jsonify({'success':200,'imgsrc':path})

完成。github地址:https://github.com/hyzhangyong/flask-screenshot-paste

最后编辑于：2019.04.23 13:56:32