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

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <title>通过Canvas及File API缩放并上传图片</title>
  5 <meta http-equiv="pragma" content="no-cache">
  6 <meta http-equiv="cache-control" content="no-cache">
  7 <meta http-equiv="expires" content="0">
  8 <meta http-equiv="keywords" content="Canvas,File,Image">
 10 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 11 <script>
 12 // 参数,最大高度
 13 var MAX_HEIGHT = 100;
 14 // 渲染
 15 function render(src){
 16     // 创建一个 Image 对象
 17     var image = new Image();
 18     // 绑定 load 事件处理器,加载完成后执行
 19     image.onload = function(){
 20     // 获取 canvas DOM 对象
 21     var canvas = document.getElementById("myCanvas");
 22     // 如果高度超标
 23     if(image.height > MAX_HEIGHT) {
 24     // 宽度等比例缩放 *=
 25     image.width *= MAX_HEIGHT / image.height;
 26     image.height = MAX_HEIGHT;
 27     }
 28     // 获取 canvas的 2d 环境对象,
 29     // 可以理解Context是管理员,canvas是房子
 30     var ctx = canvas.getContext("2d");
 31     // canvas清屏
 32     ctx.clearRect(0, 0, canvas.width, canvas.height);
 33     // 重置canvas宽高
 34     canvas.width = image.width;
 35     canvas.height = image.height;
 36     // 将图像绘制到canvas上
 37     ctx.drawImage(image, 0, 0, image.width, image.height);
 38     // !!! 注意,image 没有加入到 dom之中
 39     };
 40     // 设置src属性,浏览器会自动加载。
 41     // 记住必须先绑定事件,才能设置src属性,否则会出同步问题。
 42     image.src = src;
 43 };
 44 // 加载 图像文件(url路径)
 45 function loadImage(src){
 46     // 过滤掉 非 image 类型的文件
 47     if(!src.type.match(/image.*/)){
 48     if(window.console){
 49     console.log("选择的文件类型不是图片: ", src.type);
 50     } else {
 51     window.confirm("只能选择图片文件");
 52     }
 53     return;
 54     }
 55     // 创建 FileReader 对象 并调用 render 函数来完成渲染.
 56     var reader = new FileReader();
 57     // 绑定load事件自动回调函数
 58     reader.onload = function(e){
 59     // 调用前面的 render 函数
 60     render(e.target.result);
 61     };
 62     // 读取文件内容
 63     reader.readAsDataURL(src);
 64 };
 65 // 上传图片,jQuery版
 66 function sendImage(){
 67     // 获取 canvas DOM 对象
 68     var canvas = document.getElementById("myCanvas");
 69     // 获取Base64编码后的图像数据,格式是字符串
 70     // "data:image/png;base64,"开头,需要在客户端或者服务器端将其去掉,后面的部分可以直接写入文件。
 71     var dataurl = canvas.toDataURL("image/png");
 72     // 为安全 对URI进行编码
 73     // data%3Aimage%2Fpng%3Bbase64%2C 开头
 74     var imagedata = encodeURIComponent(dataurl);
 75     //var url = $("#form").attr("action");
 76     // 1. 如果form表单不好处理,可以使用某个hidden隐藏域来设置请求地址
 77     // <input type="hidden" name="action" value="receive.jsp" />
 78     var url = $("input[name=‘action‘]").val();
 79     // 2. 也可以直接用某个dom对象的属性来获取
 80     // <input id="imageaction" type="hidden" action="receive.jsp">
 81     // var url = $("#imageaction").attr("action");
 82     // 因为是string,所以服务器需要对数据进行转码,写文件操作等。
 83     // 个人约定,所有http参数名字全部小写
 84     console.log(dataurl);
 85     //console.log(imagedata);
 86     var data = {
 87     imagename: "myImage.png",
 88     imagedata: imagedata
 89     };
 90     jQuery.ajax( {
 91     url : url,
 92     data : data,
 93     type : "POST",
 94     // 期待的返回值类型
 95     dataType: "json",
 96     complete : function(xhr,result) {
 97     //console.log(xhr.responseText);
 98     var $tip2 = $("#tip2");
 99     if(!xhr){
100     $tip2.text(‘网络连接失败!‘);
101     return false;
102     }
103     var text = xhr.responseText;
104     if(!text){
105     $tip2.text(‘网络错误!‘);
106     return false;
107     }
108     var json = eval("("+text+")");
109     if(!json){
110     $tip2.text(‘解析错误!‘);
111     return false;
112     } else {
113     $tip2.text(json.message);
114     }
115     //console.dir(json);
116     //console.log(xhr.responseText);
117     }
118     });
119 };
120 function init(){
121     // 获取DOM元素对象
122     var target = document.getElementById("drop-target");
123     // 阻止 dragover(拖到DOM元素上方) 事件传递
124     target.addEventListener("dragover", function(e){e.preventDefault();}, true);
125     // 拖动并放开鼠标的事件
126     target.addEventListener("drop", function(e){
127     // 阻止默认事件,以及事件传播
128     e.preventDefault();
129     // 调用前面的加载图像 函数,参数为dataTransfer对象的第一个文件
130     loadImage(e.dataTransfer.files[0]);
131     }, true);
132     var setheight = document.getElementById("setheight");
133     var maxheight = document.getElementById("maxheight");
134     setheight.addEventListener("click", function(e){
135     //
136     var value = maxheight.value;
137     if(/^\d+$/.test(value)){
138     MAX_HEIGHT = parseInt(value);
139     }
140     e.preventDefault();
141     },true);
142     var btnsend = document.getElementById("btnsend");
143     btnsend.addEventListener("click", function(e){
144     //
145     sendImage();
146     },true);
147 };
148 window.addEventListener("DOMContentLoaded", function() {
149 //
150 init();
151 },false);
152 </script>
153 </head>
154 <body>
155 <div>
156 <h1>通过Canvas及File API缩放并上传图片</h1>
157 <p>从文件夹拖动一张照片到下方的盒子里, canvas 和 JavaScript将会自动的进行缩放.</p>
158 <div>
159 <input type="text" id="maxheight" value="100"/>
160 <button id="setheight">设置图片最大高度</button>
161 <input type="hidden" name="action" value="receive.jsp" />
162 </div>
163 <div id="preview-row">
164 <div id="drop-target" style="width:400px;height:200px;min-height:100px;min-width:200px;background:#eee;cursor:pointer;">拖动图片文件到这里...</div>
165 <div>
166 <div>
167 <button id="btnsend"> 上 传 </button> <span id="tip2" style="padding:8px 0;color:#f00;"></span>
168 </div>
169 </div>
170 <div><h4>缩略图:</h4></div>
171 <div id="preview" style="background:#f4f4f4;width:400px;height:200px;min-height:100px;min-width:200px;">
172 <canvas id="myCanvas"></canvas>
173 </div>
174 </div>
175 </div>
176 </body>
177 </html> 
时间: 2024-11-08 03:52:15

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

HTML5 file API加canvas实现图片前端JS压缩并上传 (转载)

一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 最最重要的体验改进点:省略了图片的再加工成本.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的.然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片

用HTML5的File API做上传图片预览功能

用HTML5的File API做上传图片预览功能 前几天做了一个项目,涉及到上传本地图片的功能,正好之前了解过 html5 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(PS : 不得不承认我这个人有多懒,没有需求的时候我向来不主动去学习).移动端完全支持哦!已测试. 下面给大家看看代码吧怎么实现的 第一:HTLM部分(这里不去做漂亮的样式了我们注重学习功能) <input type="file" id="fileElem" mul

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

前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(PS : 不得不承认我这个人有多懒,没有需求的时候我向来不主动去学习).移动端完全支持哦!已测试. 下面给大家看看代码吧怎么实现的 第一:HTLM部分(这里不去做漂亮的样式了我们注重学习功能) <input type="file" id="fileElem" mul

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

前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类似图片预览的功能.但是 File API 的出现,让这一切变成了可能. 跟着楼主由浅入深,了解下强大的 File API 吧. FileList FileList 对象针对表单的 file 控件.当用户通过 file 控件选取文件后,这个控件的 files 属性值就是 FileList 对象.

file API+JCrop 选择、裁剪并上传头像

file API,直接读取本地文件,绕过了后台处理再返回前台的过程,使编程更简单.fileAPI和JCrop的结合使用上传头像. 1.html部分 <input id="demo" type="file" onchange="showPic();"/> <img id="avatar" src=""> 2.fileAPI预览图片(jquery) <script type=&qu

php 下 html5 XHR2 + FormData + File API 上传文件

FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormData的最大优点就是我们可以异步上传一个二进制文件. 例1如下: <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>

通过 File API 使用 JavaScript 读取文件

原文地址:http://www.html5rocks.com/zh/tutorials/file/dndfiles/ 简介 HTML5 终于为我们提供了一种通过 File API 规范与本地文件交互的标准方式.为了举例说明其功能,可使用 File API 在向服务器发送图片的过程中创建图片的缩略图预览,或者允许应用程序在用户离线时保存文件引用.另外,您可以使用客户端逻辑来验证上传内容的 mimetype 与其文件扩展名是否匹配,或者限制上传内容的大小. 该规范通过“本地”文件系统提供了多种文件访

HTML 5 File API:文件拖放上传功能

即将到来的 html5 规范有几个特性,以致使 HTML 远远超出其本身作为一种标记语言的能力,并为 Web 开发者提供了一些强大的脚本工具.负责监督 HTML5 发展进程的 W3C 组织,刚刚出版了一份强有力的规格草案 – HTML5 File API 接口功能. 该 API 的设计初衷,是改善基于浏览器的 Web 应用程序处理文件上传的方式,使文件直接拖放上传成为可能.草案定义了新的输入选项 <input type=”file”> 来处理文件上传. 更为惊喜的是,该 API 为开发者提供了

XMLHttpRequest file API

XMLHttpRequest file API Table of Contents FormData file API jquery file api 上传文件 从 FormData 中新建图片 设置进度条 大文件切割 一些 XMLHttpRequest 2 的 API 相关阅读 FormData 使用 FormData 不需要 setRequestHeader("content-type", "application/x-www-form-urlencoded")