转载：http://www.5180it.com/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/bbs/admin/1/98.html

可以直接复制截图图片的 这是非常好用的地方 具体的安装方法不过多介绍

wordpress插件后台直接搜索Imagepaste

用效果：截图后直接粘贴就粘贴到WordPress的文章编辑中来了，我是不是又懒了许多！

哦，对了QQ截图是不能自定义格式的，往往截的图带有几个字，QQ截图xxxxx.jpg,这个不少主机不支持中文，图片读取不出来，我们将上传的图片自动命名一下

根据时间来自动重命名

add_filter('wp_handle_upload_prefilter', 'custom_upload_filter' );
function custom_upload_filter( $file ){
	$info = pathinfo($file['name']);
	$ext = $info['extension'];
	$filedate = date('YmdHis').rand(10,99);//为了避免时间重复，再加一段2位的随机数
	$file['name'] = $filedate.'.'.$ext;
    return $file;
}


把上面那段代码加到你主题的functions.php中就可以了

在上一篇文章中讲到如何将gif复制到粘贴板，粘贴到QQ聊天窗口还能显示动画的动能，有些网友就有疑惑了（主要针对不懂C++代码的人而言），这些数字到底什么意思呢？这里具体讲解一下这些数字是怎么计算出来的：


例如：

Version:0.9
StartHTML:00000097
EndHTML:00000209
StartFragment:00000113
EndFragment:00000173
<html>
<body>
<!--StartFragment-->
<img src="file:///D:/loading.gif" />
<!--EndFragment-->
</body>
</html>

 


下面显示的是每行文本的长度：

Version:0.9				// 第1行长度：11+2(CR+LF)
StartHTML:00000097			// 第2行长度：18+2(CR+LF)	97=前面5行数据长度总和，也就是html文本标签<html>之前的所有文本信息总长度
EndHTML:00000209			// 第3行长度：16+2(CR+LF)	209=总共12行数据总长度之和
StartFragment:00000113		        // 第4行长度：22+2(CR+LF)	113=前面7行数据长度总和，也就是html文本标签<!--StartFragment-->之前的所有文本信息总长度	
EndFragment:00000173		        // 第5行长度：20+2(CR+LF)	173=前面9行数据长度总和，也就是html文本标签<!--EndFragment-->之前的所有文本信息总长度	
<html>					// 第6行长度：6+2(CR+LF)
<body>					// 第7行长度：6+2(CR+LF)
<!--StartFragment-->		        // 第8行长度：20+2(CR+LF)	
<img src="file:///D:/loading.gif" />	// 第9行长度：36+2(CR+LF)	
<!--EndFragment-->			// 第10行长度：18+2(CR+LF)	
</body>					// 第11行长度：7+2(CR+LF)
</html>					// 第12行长度：7


StartHTML：97=13+20+18+24+22

StartFragment：113=97+8+8

EndFragment：173=113+22+38

EndHTML：209=173+20+9+7


疑惑：

Version:0.9 长度是11，为什么上面显示的是11+2=13呢？其实我们在编程写文本的时候，每行文件末尾就加了回车CR(\r)和换行LF(\n)符号，所以此处+2做了处理。

 

Unix系统里，每行结尾是<换行>，即“\n”。

Windows系统里，每行结尾是<回车>+<换行>，即“\r\n”。

Mac系统里，每行结尾是<回车>，即“\r”。

我们在日常生活中，有时需要把某些网页或者网站的内容给复制下来，然后重新编辑和整理，但现在很多网站都限制相应的大篇幅复制，要么让你注册会员，要么让你买会员，各种限制让你不得不适用snip来进行截图操作，不过有的时候截图的图片只可以进行参考，无法进行编辑，现在提出使用两种方法来进行复制

方法一：

打开相应的网页，复制文字受限，然后再相应的网页，一般右键或者其他操作，到可以出来print(打印）如：



然后直接复制(copy):如下图copy的结果。

一、什么叫网签？ 1、网签是房地产买卖时，需要买卖双方做的一个网络签约售房手续。 例如：一手房买卖，销售公司销售员向你出售一套房，你认可满意，前期多数会被要求缴纳订金， 签署预购房协议，之后进行“网签”，也就是说房屋的信息都在当地房地局网络备案；买卖时，有 销售员会帮你输入一些网签的商品房买卖合同，然后打印出来，他们盖章，你签字，然后交钱什 么。 2、二手房也是有网签的，只不过是需要原房主带着房本跟你一同去房产交易所大厅通过房产交易所 大厅的工作人员帮你们双方办理，如果有中介公司，中介公司也会帮你们协同处理。

该办法可以处理大多数网页，同时也可以将print 的网页打印保存为pdf 文件

对于从pdf 文件的复制粘贴的基本操作，在此不详述

方法二：选择去查看网页源代码

如果可以直接查看源代码的文字复制，直接完成操作，但有些文档类网页甚至连源码也不会呈现其文字，怎么办？其实也有很多不同的网页插件，专门来实现相应的功能，见仁见智。

网页不能复制文字咋回事？用这招轻松破除限制-太平洋电脑网 (pconline.com.cn)

同时也推荐不怕麻烦的同学：

Chrome 浏览器扩展神器暴力猴_sushengbuhuo的博客-CSDN博客

https://www.tampermonkey.net/index.php?version=4.11&ext=dhdg&updated=true

 

最新2020,12,07更新第三种方法：

在网页复制的实践中，还有一种复制相应的需要的或者装载相应的内容，图片，然后去掉相应不需要的内容好方法，本文实践于CSDN的博客书写过程：

1.找到相应喜欢的网页内容如：



2.在相应的Google等浏览器，按F12，然后Element， 在Element下选择Copy，如图：



3.在CSDN的博客书写中的Markdown编辑中复制



如图所示，该编辑器分为左右两侧，在左侧1部分Copy 上一步骤的Element的Copy内容，2侧显示的内容如上2所示

4.内容或图片复制

在2侧的内容选择你需要的文字或者图片都可以实现Copy操作，2侧也有一些HTML的文本格式等内容的代码可忽略不计，该操作是使用的Markdown编辑器，

其他的类似编辑器应该也可以实现该过程.

 

授之于鱼不如授之渔！共同进步！

当然尊重别人的知识产权，但同时也应该有一定的开源精神。