<!DOCTYPE html>
<html>
<head>
    <title>test chrome paste image</title>
    <style>
        DIV#editable {
            width: 400px;
            height: 300px;
            border: 1px dashed blue;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            function paste_img(e) {
                if (e.clipboardData.items) {
                    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);
                            console.log(blobUrl);
                            var new_img = document.createElement('img');
                            new_img.setAttribute('src', blobUrl);

                            document.getElementById('editable').appendChild(new_img);
                            convertImgToBase64(blobUrl, function (base64Img) {
//                              console.log(base64Img);
                                var xhr = new XMLHttpRequest();
                                xhr.open('POST', '/ajax', true);
                                xhr.setRequestHeader('Content-Type', 'application/json')
                                xhr.onreadystatechange = function () {
                                    if (xhr.readyState == xhr.DONE && /^2\d{2}$/.test(xhr.status)) {
                                    }
                                }
                                xhr.send(base64Img);//把body字符串作为请求体发送到服务器端
                            });
                        }

                    }
                } else {
                    alert('non-chrome');
                }
            }
            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;
        }
    </script>
</head>
<body>
<div id="non-editable">
    <!--<img src="./1.jpg"/>-->
</div>
<div id="editable" contenteditable="true">
</div>
</body>
</html>

用HTML5 File API 实现截图粘贴上传、拖拽上传的更多相关文章

  1. 图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

    一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...

  2. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  3. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  4. HTML5 File API — 让前端操作文件变的可能

    前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...

  5. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  6. HTML5 File api 实现断点续传

    目前市场上大多数的网站的断点上传都是需要安装浏览器插件的,本文就针对高级浏览器的环境下,通过HTML5 File api实现断点上传进行说明 一.实现文件多选 HTML5的<input>新 ...

  7. HTML5 file api读取文件的MD5码工具

    1.工具的用途:用HTML5 file api读取文件的MD5码.MD5码在文件的唯一性识别上有很重要的应用,业内常用MD5进行文件识别.文件秒传.文件安全性检查等: 2.适用性:IE.Chrome皆 ...

  8. HTML5 File API 全介绍

    在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类 ...

  9. HTML5 File API的应用

    HTML5 File API简介 HTML5File API协议族 Directories and System   文件系统和目录读取 FileWriter   写入文件 FileReader   ...

随机推荐

  1. 洛谷 P1781 宇宙总统：sort（string）

    题目描述 地球历公元6036年,全宇宙准备竞选一个最贤能的人当总统,共有n个非凡拔尖的人竞选总统,现在票数已经统计完毕,请你算出谁能够当上总统. 输入输出格式 输入格式: 第一行为一个整数n,代表竞选 ...

  2. LeetCode 95——不同的二叉搜索树 II

    1. 题目 2. 解答 以 \(1, 2, \cdots, n\) 构建二叉搜索树,其中,任意数字都可以作为根节点来构建二叉搜索树.当我们将某一个数字作为根节点后,其左边数据将构建为左子树,右边数据将 ...

  3. LeetCode 104——二叉树中的最大深度

    1. 题目 2. 解答 如果根节点为空,直接返回 0.如果根节点非空,递归得到其左右子树的深度,树的深度就为左右子树深度的最大值加 1. /** * Definition for a binary t ...

  4. Using APIs in Your Ethereum Smart Contract with Oraclize

    Homepage Coinmonks HOMEFILTER ▼BLOCKCHAIN TUTORIALSCRYPTO ECONOMYTOP READSCONTRIBUTEFORUM & JOBS ...

  5. mysql 启动报错

    之前用我这个机器做mysql的测试来,今天启动准备搭建一套线上的主从,结果起不来了... 错误日志: ;InnoDB: End of page dump 170807 11:37:02 InnoDB: ...

  6. 蓝牙核心技术概述（四）：蓝牙协议规范（HCI、L2CAP、SDP、RFOCMM）（转载）

    一.主机控制接口协议  HCI 蓝牙主机-主机控模型 蓝牙软件协议栈堆的数据传输过程: 1.蓝牙控制器接口数据分组:指令分组.事件分组.数据分组(1).指令分组 如:Accpet Connection ...

  7. Java 继承和访问控制

    类的继承 Java中使用extends来实现继承 通过继承,子类自动拥有了基类(supercalss)的所有成员. Java只支持单继承,一个子类只允许有一个基类,一个基类可以有多个子类. class ...

  8. 寒假作业end

    开始写博客的个人体会 自己打的链表过不了,果然,心存侥幸是不行的,被揪出来也不错,很感谢畅畅酱. 学术诚信的重要性 爱因斯坦说过:"大多数人说是才智造就了伟大的科学家,他们错了,是人格.&q ...

  9. qwe

    这次作业我负责的部分是把爬取完的聊天记录经行数据挖掘以及经行各种普通过滤高级过滤等. 运行截图如下: 数据分为四部分:账户名.qq/邮箱.包含关键词的发言次数.包含关键词的发言字数. 遇到的困难及解决 ...

  10. JS DOM视频相关的知识

    1.实现点击a标签改变图片时,如果a的href属性有一个目标网址,但是点击又必须跳转到另外一张图,往往会最后跳转到目标网址,可以在onclick事件函数中加入ruturn false,阻止跳转到页面. ...