summernote 复制粘贴上传图片

转载:http://www.5180it.com:8080/bbs/admin/1/98.html


在使用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编码,然后上传到服务器。

代码我也贴出来吧:

这里说明一下这个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错误。");

                               }

                           });

                  })

                       }

                   }

                }

            }

        })


转载:http://www.5180it.com:8080/bbs/admin/1/98.html

你可能感兴趣的:(summernote 复制粘贴上传图片)