最近在做一個項目，需要用戶截圖后，將圖片保存，上傳到服務(wù)器。
傳統(tǒng)的做法是，截圖，保存文件到本地，在web頁面上選擇本地文件并上傳。
現(xiàn)使用jquery及js插件實現(xiàn)，js插件是別人實現(xiàn)的，我只是修改了一些代碼，結(jié)合flask，使之自動上傳到服務(wù)，截圖，復(fù)制到Input，然后自動顯示在div上，并直接上傳到服務(wù)，并把圖片地址返回回來。
效果圖如下：
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: '', //預(yù)覽圖片的容器
imgHeight:200, //預(yù)覽圖片的默認高度
imgIputUrl:'' //服務(wù)返回地址，放入圖片input內(nèi)
};
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
