<!DOCTYPE html>

 <html>

 <head>

 <title>通过Canvas及File API缩放并上传图片</title>

 <meta http-equiv="pragma" content="no-cache">

 <meta http-equiv="cache-control" content="no-cache">

 <meta http-equiv="expires" content="0">

 <meta http-equiv="keywords" content="Canvas,File,Image">

 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

 <script>

 // 参数，最大高度

 var MAX_HEIGHT = 100;

 // 渲染

 function render(src){

     // 创建一个 Image 对象

     var image = new Image();

     // 绑定 load 事件处理器，加载完成后执行

     image.onload = function(){

     // 获取 canvas DOM 对象

     var canvas = document.getElementById("myCanvas");

     // 如果高度超标

     if(image.height > MAX_HEIGHT) {

     // 宽度等比例缩放 *=

     image.width *= MAX_HEIGHT / image.height;

     image.height = MAX_HEIGHT;

     }

     // 获取 canvas的 2d 环境对象,

     // 可以理解Context是管理员，canvas是房子

     var ctx = canvas.getContext("2d");

     // canvas清屏

     ctx.clearRect(0, 0, canvas.width, canvas.height);

     // 重置canvas宽高

     canvas.width = image.width;

     canvas.height = image.height;

     // 将图像绘制到canvas上

     ctx.drawImage(image, 0, 0, image.width, image.height);

     // !!! 注意，image 没有加入到 dom之中

     };

     // 设置src属性，浏览器会自动加载。

     // 记住必须先绑定事件，才能设置src属性，否则会出同步问题。

     image.src = src;

 };

 // 加载 图像文件(url路径)

 function loadImage(src){

     // 过滤掉 非 image 类型的文件

     if(!src.type.match(/image.*/)){

     if(window.console){

     console.log("选择的文件类型不是图片: ", src.type);

     } else {

     window.confirm("只能选择图片文件");

     }

     return;

     }

     // 创建 FileReader 对象 并调用 render 函数来完成渲染.

     var reader = new FileReader();

     // 绑定load事件自动回调函数

     reader.onload = function(e){

     // 调用前面的 render 函数

     render(e.target.result);

     };

     // 读取文件内容

     reader.readAsDataURL(src);

 };

 // 上传图片，jQuery版

 function sendImage(){

     // 获取 canvas DOM 对象

     var canvas = document.getElementById("myCanvas");

     // 获取Base64编码后的图像数据，格式是字符串

     // "data:image/png;base64,"开头,需要在客户端或者服务器端将其去掉，后面的部分可以直接写入文件。

     var dataurl = canvas.toDataURL("image/png");

     // 为安全 对URI进行编码

     // data%3Aimage%2Fpng%3Bbase64%2C 开头

     var imagedata = encodeURIComponent(dataurl);

     //var url = $("#form").attr("action");

     // 1. 如果form表单不好处理,可以使用某个hidden隐藏域来设置请求地址

     // <input type="hidden" name="action" value="receive.jsp" />

     var url = $("input[name='action']").val();

     // 2. 也可以直接用某个dom对象的属性来获取

     // <input id="imageaction" type="hidden" action="receive.jsp">

     // var url = $("#imageaction").attr("action");

     // 因为是string，所以服务器需要对数据进行转码，写文件操作等。

     // 个人约定，所有http参数名字全部小写

     console.log(dataurl);

     //console.log(imagedata);

     var data = {

     imagename: "myImage.png",

     imagedata: imagedata

     };

     jQuery.ajax( {

     url : url,

     data : data,

     type : "POST",

     // 期待的返回值类型

     dataType: "json",

     complete : function(xhr,result) {

     //console.log(xhr.responseText);

     var $tip2 = $("#tip2");

     if(!xhr){

     $tip2.text('网络连接失败!');

     return false;

     }

     var text = xhr.responseText;

     if(!text){

     $tip2.text('网络错误!');

     return false;

     }

     var json = eval("("+text+")");

     if(!json){

     $tip2.text('解析错误!');

     return false;

     } else {

     $tip2.text(json.message);

     }

     //console.dir(json);

     //console.log(xhr.responseText);

     }

     });

 };

 function init(){

     // 获取DOM元素对象

     var target = document.getElementById("drop-target");

     // 阻止 dragover(拖到DOM元素上方) 事件传递

     target.addEventListener("dragover", function(e){e.preventDefault();}, true);

     // 拖动并放开鼠标的事件

     target.addEventListener("drop", function(e){

     // 阻止默认事件，以及事件传播

     e.preventDefault();

     // 调用前面的加载图像 函数，参数为dataTransfer对象的第一个文件

     loadImage(e.dataTransfer.files[0]);

     }, true);

     var setheight = document.getElementById("setheight");

     var maxheight = document.getElementById("maxheight");

     setheight.addEventListener("click", function(e){

     //

     var value = maxheight.value;

     if(/^\d+$/.test(value)){

     MAX_HEIGHT = parseInt(value);

     }

     e.preventDefault();

     },true);

     var btnsend = document.getElementById("btnsend");

     btnsend.addEventListener("click", function(e){

     //

     sendImage();

     },true);

 };

 window.addEventListener("DOMContentLoaded", function() {

 //

 init();

 },false);

 </script>

 </head>

 <body>

 <div>

 <h1>通过Canvas及File API缩放并上传图片</h1>

 <p>从文件夹拖动一张照片到下方的盒子里， canvas 和 JavaScript将会自动的进行缩放.</p>

 <div>

 <input type="text" id="maxheight" value="100"/>

 <button id="setheight">设置图片最大高度</button>

 <input type="hidden" name="action" value="receive.jsp" />

 </div>

 <div id="preview-row">

 <div id="drop-target" style="width:400px;height:200px;min-height:100px;min-width:200px;background:#eee;cursor:pointer;">拖动图片文件到这里...</div>

 <div>

 <div>

 <button id="btnsend"> 上 传 </button> <span id="tip2" style="padding:8px 0;color:#f00;"></span>

 </div>

 </div>

 <div><h4>缩略图：</h4></div>

 <div id="preview" style="background:#f4f4f4;width:400px;height:200px;min-height:100px;min-width:200px;">

 <canvas id="myCanvas"></canvas>

 </div>

 </div>

 </div>

 </body>

 </html>

通过Canvas及File API缩放并上传图片完整示例的更多相关文章

  1. 通过Canvas及File API缩放并上传图片完整演示样例

    创建一个只管的用户界面,并同意你控制图片的大小.上传到server端的数据,并不须要处理enctype为 multi-part/form-data 的情况.只一个简单的POST表单处理程序就能够了. ...

  2. 通过Canvas及File API缩放并上传图片

    原文地址:Resize an Image Using Canvas, Drag and Drop and the File API 示例地址:Canvas Resize Demo 原文作者:Dr. T ...

  3. [FILE API]利用Javascript上传图片

    1.HTML结构 <label for="file-input">File:</label> <input type="file" ...

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

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

  5. 【小月博客】用HTML5的File API做上传图片预览功能

    前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...

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

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

  7. HTML5 File API 全介绍

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

  8. canvas学习之API整理笔记（二）

    前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...

  9. html5 文件系统File API

    前言: 在做浏览器上传图片的时候,一般采用form表单上传,这种上传无法预览图片,无法查看图片大小,无法知道图片的类型等等!那么在html5 File API提供了这些表单无法实现的功能,而且还支持拖 ...

随机推荐

  1. POJ1185 炮兵阵地

    题目描述 Description 司令部的将军们打算在N × M的网格地图上部署他们的炮兵部队.一个N × M的地图由N行M列组成,地图的每一格可能是山地(用"H"表示),也可能是 ...

  2. 树莓派实现远程开机局域网电脑（WOL协议+etherwake+华硕主板Z97）秒变花生壳开机棒

    一.花生壳映射树莓派 参考: http://www.cnblogs.com/EasonJim/p/6100181.html http://www.cnblogs.com/EasonJim/p/6100 ...

  3. [SVN Mac的SVN使用]

    在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境.在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还 ...

  4. BZOJ3393：[USACO LPHONE] 激光通讯

    分层图+堆优化的dijkstra 将原图分为4层,分别是只向上,向下,向左,向右建立边,然后层与层之间的转移很好处理.稠密图,应该用堆优化的dijkstra. //OJ 1845 //by Cydia ...

  5. cocos2d 2.2.6 win7下的配置

    我搭建cocos2.6的开发环境需要安装工具包括: 1.Visual Studio 2012(由于不兼容win7,需要安装Update 4)和虚拟光驱daemon tool,虚拟光驱的下载地址:htt ...

  6. 远程连接实验室的VPN

    Windows 7 (win8类似)的用户请按以下步骤进行操作:1.点击“开始”菜单,然后点击“控制面板”,然后点击“查看网络和任务”.2.点击“设置新连接或网络”.3.点击“连接到工作区”,然后点击 ...

  7. mysql-python

    sudo pip install MySQL-python centos安装 python-dev包提示No package python-dev available: 出现此问题的原因是python ...

  8. Linux下安装setup tools小工具

    1, 最小化的linux系统(centos\redhat)默认都是没有安装setup图形小工具的,你输入setup命令会提示 command not found . 如果要使用这个命令安装方法 1.安 ...

  9. windows 修改hosts 脚本

    @echo off echo "请注意你的杀毒软件提示,一定要允许" echo. & pause @del C:\Windows\System32\drivers\etc\ ...

  10. Java数据结构——哈希表