<!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. MyCCL特征码定位原理学习

    这段时间学习WEB方面的技术,遇到了木马免杀特征码定位的问题,这里做一下学习笔记. 这里对MyCCL的分块原理做一下探究 对指定文件生成10个切块 对指定的木马进行切块后,文件列表是这样的. 注意这里 ...

  2. Scala特性: 隐式转换

    1.隐式转换特征: 1)隐式参数的用法 · 获取可能的预期类型 · 获取预期类型,并且拥有预期类型的行为 · 对信息进行补充说明(一般用函数做隐式参数的比较多) 2)隐式类: 3)隐式method:

  3. [IOS 实现TabBar在Push后的隐藏 以及 两级Tabbar的切换]

    翻了好多网页都没找到资料,自己试了下终于成功了,遂分享一下. 1.实现TabBar在Push后的隐藏 假如结构是这样 NavController->A->B,我们想要实现在A里有Tabba ...

  4. MyEclipse 8.5 注册码 生成代码

    import java.io.*; public class MyEclipseGen { private static final String LL = "Decompiling thi ...

  5. 通过Minimal版的iso安装CentOS7之后升级Desktop

    重新安装了CentOS7,但是使用的是Minimal的iso镜像安装的,所以安装之后只有文本界面,这里记录一下重新安装图形界面的过程. 连接网络 通过文本界面登陆后是没有连接网络的,所以需要修改配置连 ...

  6. 深入浅出UML类图

    原作者:http://www.uml.org.cn/oobject/201211231.asp 在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作&l ...

  7. Mysql学习笔记（一）

    技术的王国太过迷人,我刚从事IT就被各种技术所引诱迷惑,什么都想学.我还算言而有信的那一类人,还好有一丁点毅力,于是各种东西都沾染了一点.但是这种遍地开花的情况实在和我的智商不匹配.我没有那么多的精力 ...

  8. java中Scanner和random的用法

    Scanner是默认按照行来读取数字的. 创建一个用来输入的函数 Scanner scan=new Scanner(System.in):system.in是表示从控制台输入. 然后用一个变量类接收这 ...

  9. Python 抓取网页并提取信息(程序详解)

    最近因项目需要用到python处理网页,因此学习相关知识.下面程序使用python抓取网页并提取信息,具体内容如下: #---------------------------------------- ...

  10. JS左右栏目添加器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...