<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>onpaste event example</title>

 </head>

 <body id="editor" onpaste="pasteIntercept(event)">

     <h2>日志</h2>

     <textarea rows="15" cols="80" id="log" readonly="true"></textarea>

     <div>

         <img src="" id="img" alt="">

     </div>

 <script>

     function log(txt) {

         document.getElementById("log").appendChild(document.createTextNode(txt + "\n"));

     }

     /*

      在网页粘贴图片

      1.监听paste事件

      2.创建FileReader对象读取图像数据

      3.发送数据到后台返回图片地址

      4.将图片地址显示图片

      */

     function pasteIntercept(d) {

         log("粘贴!");

         var obj = {

             data:''

         }

         for (var b = 0; b < d.clipboardData.items.length; b++) {

             var c = d.clipboardData.items[b];

             if (c.type == "image/png") {

                 obj.mode = 1;

                 var a = new FileReader();

                 a.onloadend = function () {

                     obj.data = this.result.substr(this.result.indexOf(",") + 1);

                     img.src='data:image/png;base64,' + obj.data;

                 };

                 a.readAsDataURL(c.getAsFile());

                 break;

             }

         }

     }

     //    document.getElementById("editor").addEventListener("paste", pasteIntercept, false);

 </script>

 </body>

 </html>

网页js粘贴截图的更多相关文章

  1. 【在网页中获取截图数据】Chrome和Firefox下的实战经验

    [转载自我在segmentfault的专栏:https://segmentfault.com/a/1190000004584071] 最近在实现一个功能,需求如下: 前提:当前页面无弹窗 页面任意位置 ...

  2. redmine screenshot paste(粘贴截图)

    前言 本文所使用的 redmine 3.1.x 查看redmine版本:以管理员帐号登录 – 点 管理 – 点 信息,示例如下: 在线插件库 插件仓库,可以下载丰富的插件: http://www.re ...

  3. C#和网页js互调代码

    C#和网页js互调代码 1.先写个网页放在主程序目录下:test.html <!DOCTYPE html> <html lang="en" xmlns=" ...

  4. 转载 【iOS开发】网页JS与OC交互（JavaScriptCore） OC ----->JS

      目标 本文介绍利用苹果在iOS7时发布的JavaScriptCore.framework框架进行js与OC的交互.我们想要达到的目标是: OC调用网页上的js方法 网页js调用APP中的OC方法 ...

  5. 如何实现批量截取整个网页完整长截图,批量将网页保存成图片web2pic/webshot/screencapture/html2picture

    如何实现批量截取整个网页完整长截图,批量将网页保存成图片web2pic/webshot/screencapture [困扰?疑问?]: 您是否正受到:如何将网页保存为图片的困扰?网页很高很长截图截不全 ...

  6. markdown直接粘贴截图

    通过代码方式 cmd markdown粘贴截图 https://www.jianshu.com/p/ae048b5090f8

  7. html2canvas.js插件截图空白问题

    发现使用 html2canvas.js插件截图保存在前端很方便.学习过程中预计问题. 截图出现空白和截图不全. 问题原因: html2canvas.js插件截图是基于body标签的,如果body存在滚 ...

  8. Node.js & 页面截图 & 生成画报

    Node.js & 页面截图 & 生成画报 https://zzk.cnblogs.com/my/s/blogpost-p?Keywords=headless solution 使用 ...

  9. 使用vscode编辑markdown文件（可粘贴截图）

    使用markdown粘贴截图时,操作步骤比较多: 1)截取图片: 2)将图片存在特定位置: 3)记住图片路径,在markdown文件中编写代码: 4)预览效果: 而word之类的文档编辑器,只需要截图 ...

随机推荐

  1. 2017广东工业大学程序设计竞赛决赛 H tmk买礼物

    题意: Description 今天是校赛的日子,为了庆祝这么喜庆的日子,TMK打算买些礼物给女票LSH庆祝一下. TMK进入了雪梨超市,然后刚踏入的一瞬间,店主就对TMK说:“恭喜你成为了本店第21 ...

  2. [BZOJ1878][SDOI2009]HH的项链 莫队

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1878 不带修改的莫队,用一个桶记录一下当前区间中每种颜色的数量就可以做到$O(1)$更新了 ...

  3. 4 Visual Effects 视觉效果 读书笔记 第四章

    4   Visual Effects    视觉效果        读书笔记 第四章 Well, circles and ovals are good, but how about drawing r ...

  4. codeforces_1075_C. The Tower is Going Home

    http://codeforces.com/contest/1075/problem/C 题意:一个长宽均为1e9的棋盘,n个垂直障碍在x列无限长,m个水平障碍在第y行从第x1列到x2列.可以水平和垂 ...

  5. python_MachineLearning_感知机PLA

    感知机:线性二类分类器(linear binary classifier)   感知机(perceptron)是二类分类的线性模型,其输入为实例的特征向量,输出为实例的类别,取+1和-1二值.感知机对 ...

  6. java将字段映射成另一个字段，关于 接口传参 字段不对应转换

    在接口开发中我们经常会遇到一个问题,打个比方,我们的实体类A中有两个字段user和pwd但是接口中需要username和password这怎么办呢,我想到了两种方法:1.新创建一个实体类B或者new一 ...

  7. 第一节、ES6的开发环境搭建

    https://blog.csdn.net/zls986992484/article/details/70819462 下面这个不好使 https://blog.csdn.net/gao5311624 ...

  8. Educational Codeforces Round 58 (Rated for Div. 2) （前两题题解）

    感慨 这次比较昏迷最近算法有点飘,都在玩pygame...做出第一题让人hack了,第二题还昏迷想错了 A Minimum Integer(数学) 水题,上来就能做出来但是让人hack成了tle,所以 ...

  9. LINUX系统---中级相关操作和知识

    LINUX系统的中级,来搞一些LINUX安全相关的东西,还有在公司生成中长搞的集群. RHCS集群 什么是高可用 什么是热备 什么是分布式

  10. 编译时报错，找不到指定路径下的command，而路径是正确的。

    使用的Fedora 18 64位的系统kernel,内核为3.6.10.按照要求使用yum install *** 安装各项工具. path路径使用提供的toolchain,各种路径也安装正确,却发现 ...