今天在博客中加了个新的功能，直接复制图片然后黏贴上传到服务器。
之前是自己弄的markdown编辑器，很多功能不完善，刚开始加了个插入图片的按钮，现在能直接复制图片方便多了。
目前只支持chrome浏览器，哈哈，感觉chrome是最好用的浏览器。
主要原理是利用paste事件，然后拿到里面的图片数据上传到服务器。
下面贴代码
<textarea id="content" />
有个编辑的文本框，然后监听parse事件
document.querySelector('#content').addEventListener('paste', function(event) {
var isChrome = false;
if (event.clipboardData || event.originalEvent) {
//not for ie11 某些chrome版本使用的是event.originalEvent
var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
if (clipboardData.items) {
// for chrome
var items = clipboardData.items, len = items.length, blob = null;
isChrome = true;
for (var i = 0; i < len; i++) {
if (items[i].type.indexOf("image") !== -1) {
//getAsFile() 此方法只是living standard firefox ie11 并不支持
blob = items[i].getAsFile();
}
}
if (blob !== null) {
//阻止默认行为即不让剪贴板内容在编辑框中显示出来
event.preventDefault();
var reader = new FileReader();
reader.onload = function(event) {
// event.target.result 即为图片的Base64编码字符串
var base64_str = event.target.result
uploadImgFromPaste(base64_str);
}
reader.readAsDataURL(blob);
}
}
}
});
上传图片，file就是图片的base64之后的数据
function uploadImgFromPaste(file) {
$.ajax({
type : 'POST',
url : basePath + '/image/copyupload',
data : {
imageContent : file
},
dataType : "json",
success : function(ret) {
}
},
error : function() {
layer.msg("异常！");
}
});
}
后台我们可以接收到图片的base64字符串，然后写成图片
// base64字符串转化成图片
public static boolean GenerateImage(String imgStr) {
BASE64Decoder decoder = new BASE64Decoder();
try {
// Base64解码
byte[] b = decoder.decodeBuffer(imgStr);
// 生成jpeg图片
String imgFilePath = "/Users/yinjihuan/Downloads/test22.png";// 新生成的图片
OutputStream out = new FileOutputStream(imgFilePath);
out.write(b);
out.flush();
out.close();
returntrue;
} catch (Exception e) {
returnfalse;
}
}
我这边是直接将数据写到mongodb的gridfs中
@ResponseBody
@RequestMapping(value = "/image/copyupload")
public Object uploadParseImage(String imageContent, HttpServletRequest request) {
try {
imageContent = imageContent.substring(imageContent.indexOf("base64")+7);
Integer userId = ArticleController.getLoginUserId(request);
if(userId == null) returnnull;
BASE64Decoder decoder = new BASE64Decoder();
// Base64解码
byte[] b = decoder.decodeBuffer(imageContent);
InputStream content = new ByteArrayInputStream(b);
FileVo fileVo = new FileVo("copy.png", "image/png", content,
new BasicDBObject("user_id", userId).append("use", "blog"));
String fileId = filesService.saveFile(fileVo);
Map<String, Object> map = new HashMap<String, Object>();
map.put("success", true);
map.put("fileId", fileId);
returnmap;
} catch (Exception e) {
e.printStackTrace();
return JsonUtils.getJsonError("",e.getMessage());
}
}