在使用summernote过程中，经常会上传图片，但如果我们每次都点击上传图片，使用起来不是特别方便。
现在希望能够直接复制粘贴图片，说做就做，一下是我从网上找到的例子
其中样式 note-editable 是summernote自动生成出来
//summernote
//监听粘贴图片
document.getElementsByClassName('note-editable')[0].addEventListener('paste',function(e){
if ( !(e.clipboardData && e.clipboardData.items) ) {
return;
}
for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
var item = e.clipboardData.items[i];
if (item.kind === "string") {
item.getAsString(function (str) {
console.log(str);
})
} else if (item.kind === "file") {
var f= item.getAsFile();
parseFile(f, 800,function(base64){
$.post("/manager/uploadImg",{"imgStr":base64},function(data){
$('#summernote').summernote('editor.insertImage', data.msg);
});
})
console.log(f);
}
}
});
这里说明一下这个parseFile方法，就是将图片转化为base64编码，并压缩base64编码，然后上传到服务器。
代码我也贴出来吧：
//压缩方法
function parseFile(file, w,callBack) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var newImage = new Image();
var quality = 0.7; //压缩系数0-1之间
newImage.src = reader.result;
console.log("原来长度",reader.result.length)
newImage.setAttribute("crossOrigin", 'Anonymous'); //url为外域时需要
var imgWidth, imgHeight;
newImage.onload = function () {
imgWidth = this.width;
imgHeight = this.height;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w;
canvas.height = w * imgHeight / imgWidth;
} else {
canvas.height = w;
canvas.width = w * imgWidth / imgHeight;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
quality = 0.7;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句
// 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定
while (base64.length / 1024 > 100) {
quality -= 0.01;
base64 = canvas.toDataURL("image/jpeg", quality);
}
// 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
// while (base64.length / 1024 < 50) {
// quality += 0.001;
// base64 = canvas.toDataURL("image/jpeg", quality);
// }
console.log("压缩后长度",base64.length)
callBack(base64)
}
}
}
该例子没有将Base64转为file的例子，我也找了个例子出来
import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import org.springframework.web.multipart.MultipartFile;
public class BASE64DecodedMultipartFile implements MultipartFile {
private final byte[] imgContent;
private final String header;
public BASE64DecodedMultipartFile(byte[] imgContent, String header) {
this.imgContent = imgContent;
this.header = header.split(";")[0];
}
@Override
public String getName() {
return System.currentTimeMillis() + Math.random() + "." + header.split("/")[1];
}
@Override
public String getOriginalFilename() {
return System.currentTimeMillis() + (int) Math.random() * 10000 + "." + header.split("/")[1];
}
@Override
public String getContentType() {
return header.split(":")[1];
}
@Override
public boolean isEmpty() {
return imgContent == null || imgContent.length == 0;
}
@Override
public long getSize() {
return imgContent.length;
}
@Override
public byte[] getBytes() throws IOException {
return imgContent;
}
@Override
public InputStream getInputStream() throws IOException {
return new ByteArrayInputStream(imgContent);
}
@Override
public void transferTo(File file) throws IOException, IllegalStateException {
new FileOutputStream(file).write(imgContent);
}
}
import org.springframework.web.multipart.MultipartFile;
import sun.misc.BASE64Decoder;
public class Base64StrToImage {
public static MultipartFile base64MutipartFile(String imgStr) {
try {
String[] baseStr = imgStr.split(",");
BASE64Decoder base64Decoder = new BASE64Decoder();
byte[] b = new byte[0];
b = base64Decoder.decodeBuffer(baseStr[1]);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {
b[i] += 256;
}
}
return new BASE64DecodedMultipartFile(b, baseStr[0]);
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
}
通过下面的方法，我们就可以转为我们平时上传使用的MultipartFile了
BASE64DecodedMultipartFile base64DecodedMultipartFile = null;
if(StringUtils.isNotEmpty(imgStr)){
base64DecodedMultipartFile = (BASE64DecodedMultipartFile) Base64StrToImage.base64MutipartFile(imgStr);
}
在使用的过程中，我发现粘贴是可以的，但粘贴出来的图片会有两个，一个是原base64的图片，另外一个是上传到服务器返回地址的图片
这是就想可能的没有覆盖到原来的方法，导致重复了，以下是我修改后的例子
$(".summernote").summernote({
height: '450px',
//设置Dialog淡入淡出效果
dialogsFade: true,
fontNames: ['宋体', '微软雅黑', '楷体', '黑体', '隶书', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande',
'Tahoma', 'Times New Roman', 'Verdana'],
lang: 'zh-CN',
toolbar: [
['style', ['style']],
['font', ['bold']],
['color', ['color']],
['insert', ['myphoto']],
['view', ['fullscreen']]
],
buttons: {
myphoto: selectImageButton //自已定义的按钮函数
},
callbacks: {
//onPaste粘贴需要重写，否则粘贴图片时出现重复的图片
onImageUpload:function(e){
//console.info("onImageUpload>>>>>>>>");
},
onPaste: function (ne) {
//ne.preventDefault ? ne.preventDefault() : (ne.returnValue = false);
var returnFlag = true;
var t_clipboardData;
if(typeof ne.clipboardData !='undefined'){
returnFlag = false;
t_clipboardData = ne.clipboardData;
}
if(typeof ne.originalEvent.clipboardData !='undefined'){
returnFlag = false;
t_clipboardData = ne.originalEvent.clipboardData;
}
if(typeof window.clipboardData !='undefined'){
returnFlag = false;
t_clipboardData = ne.originalEvent.clipboardData;
}
if(returnFlag){
return;
}
if(t_clipboardData==null||typeof t_clipboardData =='undefined'){
return;
}
for (var i = 0, len = t_clipboardData.items.length; i < len; i++) {
var item = t_clipboardData.items[i];
if (item.kind === "file") {
var f= item.getAsFile();
parseBase64File(f, 800,function(base64){
var formData = new FormData();
formData.append("imgStr", base64);
$.ajax( {
url : "/file/image/uploadImgStr",
data: formData,
type: 'post',
cache: false,contentType: false,processData: false,
beforeSend: function () {
$.modal.loading("上传中，请稍后...");
},
success : function(result) {
$.modal.closeLoading();
if (result.code == web_status.SUCCESS) {
$('#summernote').summernote('editor.insertImage', result.path);
$.modal.msgSuccess('上传成功')
}else{
$.modal.msgWarning(result.msg)
}
},
error: function(data){
$.modal.closeLoading();
$.modal.alertError("上传失败，HTTP错误。");
}
});
})
}
}
}
}
})
当前共有 0 条评论
谢谢分享了