web前端socket聊天室功能和在线编辑器上传编辑内容的时候经常会需要上传一些图文信息，但是很多编辑器不支持截图粘粘的功能，这里参考了网友分享的可用方法做一个记录。

 <html>

 <head>

     <title>截图粘粘</title>

     <style type='text/css'>

         #editable {

             width: 600px;

             height: 400px;

             border: 1px dashed red;

         }

     </style>

     <script type="text/javascript">

         window.onload = function () {

             function paste_img(e) {

                 if (e.clipboardData.items) {

                     var ele = e.clipboardData.items

                     for (var i = 0; i < ele.length; ++i) {

                         if (ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1) {

                             var blob = ele[i].getAsFile();

                             window.URL = window.URL || window.webkitURL;

                             var blobUrl = window.URL.createObjectURL(blob);

                             var new_img = document.createElement('img');

                             convertImgToBase64(blobUrl, function(base64Img){

                                 new_img.setAttribute('src', base64Img);

                                 document.getElementById('editable').appendChild(new_img);

                             });

                         }

                     }

                 } else {

                     alert('您的浏览器不支持粘贴图片功能,请换更高版本浏览器.');

                 }

             }

             document.getElementById('editable').onpaste = function () {

                 paste_img(event);

                 return false;

             };

         }

         function convertImgToBase64(url, callback, outputFormat){

             var canvas = document.createElement('CANVAS'),

                 ctx = canvas.getContext('2d'),

                 img = new Image;

             img.crossOrigin = 'Anonymous';

             img.onload = function(){

                 canvas.height = img.height;

                 canvas.width = img.width;

                 ctx.drawImage(img,0,0);

                 var dataURL = canvas.toDataURL(outputFormat || 'image/png');

                 callback.call(this, dataURL);

                 canvas = null;

             };

             img.src = url;

         }

     //方法2 图片转base64 body监听粘贴

     $('body').on('paste', function(e){

         alert('1212');

         var clipboard = e.clipboardData;

         var type = clipboard.items[0].type;

         alert('-=-=-');

         if (type.match(/image/)) {

             var blob = clipboard.items[0].getAsFile();

             var file = new FileReader();

             file.on('loadend', function(e){

                 alert(e.target.result);

                 console.log('image',e.target.result);

             });

             file.readAsDataURL(blob);

         } else {

             alert(type);

             console.log('not an image',type);

         }

     });

     </script>

 </head>

 <body>

 <div id="editable" contenteditable="true">

 </div>

 </body>

 </html>

html 截图粘粘图片JS的更多相关文章

  1. Nginx对于图片,js等静态文件的缓存设置

    以下是自学it网--中级班上课笔记 网址:www.zixue.it Nginx对于图片,js等静态文件的缓存设置 注:这个缓存是指针对浏览器所做的缓存,不是指服务器端的数据缓存. 主要知识点: loc ...

  2. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  3. c# 根据窗口截图，合并图片

    c# 根据窗口截图,合并图片 public class CaptureWindows { #region 类 /// <summary> /// Helper class containi ...

  4. cropper.js 二次开发：截图并下载图片

    cropper.js 是一个基于jquery的图片截取库. 参考:https://blog.csdn.net/weixin_38023551/article/details/78792400 我的代码 ...

  5. js能否实现截图，截图之后的图片数据再下载到本地？

    https://www.zhihu.com/question/20763177 http://www.cnblogs.com/yanweidie/p/5203943.html

  6. 使用canvas截图网页为图片并解决跨域空白以及模糊问题

    前几天给了个需求对浏览器网页进行截图,把网页统计数据图形表等截图保存至用户本地. 首先对于网页截图,我用的是canvas实现,获取你需要截图的模块的div,从而使用canvas对你需要的模块进行截图. ...

  7. idea中JSP页面不能访问静态资源（图片,js,css）

    必须配置SpringMvc对访问静态资源的支持,idea默认就是在main/webapp 下的文件路径,要在web-info同级的resource文件下放置,JSP中 ${pageContext.re ...

  8. html2canvas截图问题，图片跨域导致截图空白

    年前的一个项目,要做一个H5截屏分享的功能,使用的是html2canvas插件,截图功能是实现了,但是跨域的图片死活不出来, 经过几天谷歌百度和不断的尝试,终于找到解决办法了,一共经历了让人心力憔悴的 ...

  9. 点击滚动图片JS部分代码以及css设置注意事项

    下面js代码可以实现8张图片点击左右按钮后切换的过渡动画效果 var pslul11=document.getElementById('pslul11')var pslspan1=document.g ...

随机推荐

  1. C/C++函数指针，指针函数的用法，用处

     先看函数指针 int func2(int x); /* 声明一个函数 */ int (*q2) (int x); /* 声明一个函数指针 */ q2=func2;    /* 将func函数的首地址 ...

  2. 本机浏览器访问不到Linux虚拟机中的nginx开启页面

    1.使用该执行打开端口文件vi /etc/sysconfig/iptables 2.随便复制一行现有内容,将你要打开的端口设置上就行了,这里是打开80端口-A INPUT -m state --sta ...

  3. Flask入门flask-script 蓝本 钩子函数(三)

    1 flask-script扩展库 概念: 是一个flask终端运行的解析器 ,因为项目完成以后,代码改动会有风险,所以借助终端完成不同启动项的配置 安装 pip3 install flask-scr ...

  4. .NET部分知识点整理

    .Net学习 Visual Studio2018 企业版:NJVYC-BMHX2-G77MM-4XJMR-6Q8QF 专业版:KBJFW-NXHK6-W4WJM-CRMQB-G3CDH 开发工具常用V ...

  5. day007-线程池、Lambda

    1. 线程池 就好生活中的游泳池,可以容纳多人在池子里游泳.戏水.线程池里可以有多个正在运行的线程,同时执行已经提交了的多个任务. 什么是线程池?一个用来创建和管理线程的容器. 线程池的原理 线程复用 ...

  6. 基于CAS的SSO单点登录-实现ajax跨域访问的自动登录（也相当于超时重连）

    先补课,以下网址可以把CAS环境搭起来. [JA-SIG CAS服务环境搭建]http://linliangyi2007.iteye.com/blog/165307 [JA-SIG CAS业务架构介绍 ...

  7. 【Spring实战】—— 8 自动装配

    本篇介绍一下自动装配的知识,Spring为了简化配置文件的编写.采用自动装配方式,自动的装载需要的bean. 自动装配 有以下几种方式: 1 byName 通过id的名字与属性的名字进行判断,要保证B ...

  8. PWM----调节LED亮度

    - - --调节两个LED灯亮度 module led_pwm ( clk, rst, //cnt1_pwm, out1, out2, out3, out4 ); input clk, rst; // ...

  9. 点击一个按钮，如何让一个<div id=a>……</div>隐藏或显现？

    <div id=divid>123</div>< button onclick="usr()">Click</button>< ...

  10. Fiori里花瓣的动画效果实现原理

    Fiori里的busy dialog有两种表现形式,一种是下图里的花朵形状,由5个不断旋转的花瓣组成.另一种是下图的3/4个圆环不断旋转的效果. 关于前者的效果,可以看我制作的这个视频.这个视频是手动 ...