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

创建一个只管的用户界面,并允许你控制图片的大小。上传到服务器端的数据,并不需要处理enctype为 multi-part/form-data 的情况,仅仅一个简单的POST表单处理程序就可以了. 好了,下面附上完整的代码示例

Canvas简介 
canvas 是一个HTML5新增的DOM元素,允许用户在页面上直接地绘制图形,通常是使用JavaScript.而不同的格式标准也是不同的,比如SVG是光栅API(raster API) 而VML却是向量API(vector API).可以考虑使用Adobe Illustrator(矢量图)作图与使用 Adobe Photoshop (光栅图)作图的区别。 

在canvas(画布)上能做的事情就是读取和渲染图像,并且允许你通过JavaScript操纵图像数据。已经有很多现存的文章来为你演示基本的图像处理——主要关注与各种不同的图像过滤技术( image filtering techniques)——但我们需要的仅仅是缩放图片并转换到特定的文件格式,而canvas完全可以做到这些事情。 



我们假定的需求,比如图像高度不超过100像素,不管原始图像有多高。基本的代码如下所示: 

// 参数,最大高度
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;
}; 

在上面的例子中,你可以使用canvas 的 toDataURL() 方法获取图像的 Base64编码的值(可以类似理解为16进制字符串,或者二进制数据流). 
注意: canvas 的 toDataURL() 获取的URL以字符串开头,有22个无用的数据 "data:image/png;base64,",需要在客户端或者服务端进行过滤. 
原则上只要浏览器支持,URL地址的长度是没有限制的,而1024的长度限制,是老一代IE所独有的。 

请问,如何获取我们需要的图像呢? 
好孩子,很高兴你能这么问。你并不能通过File 输入框来直接处理,你从这个文件输入框元素所能获取的仅仅是用户所选择文件的path路径。按照常规想象,你可以通过这个path路径信息来加载图像,但是,在浏览器里面这是不现实的。(译者注:浏览器厂商必须保证自己的浏览器绝对安全,才能获得市场,至少避免媒体的攻击,如果允许这样做,那恶意网址可以通过拼凑文件路径来尝试获取某些敏感信息). 
为了实现这个需求,我们可以使用HTML5的File API 来读取用户磁盘上的文件,并用这个file来作为图像的源(src,source). 

File API简介 
新的File API接口是在不违背任何安全沙盒规则下,读取和列出用户文件目录的一个途径—— 通过沙盒(sandbox)限制,恶意网站并不能将病毒写入用户磁盘,当然更不能执行。 
我们要使用的文件读取对象叫做 FileReader,FileReader允许开发者读取文件的内容(具体浏览器的实现方式可能大不相同)。 

假设我们已经获取了图像文件的path路径,那么依赖前面的代码,使用FileReader来加载和渲染图像就变得很容易了: 

// 加载 图像文件(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);
}; 

请问,如何获取文件呢? 
小白兔,要有耐心!我们的下一步就是获取文件,当然有好多方法可以实现啦。例如:你可以用文本框让用户输入文件路径,但很显然大多数用户都不是开发者,对输入什么值根本就不了解. 
为了用户使用方便,我们采用 Drag and Drop API接口。 

使用 Drag and Drop API 
拖拽接口(Drag and Drop)非常简单——在大多数的DOM元素上,你都可以通过绑定事件处理器来实现. 只要用户从磁盘上拖动一个文件到dom对象上并放开鼠标,那我们就可以读取这个文件。代码如下: 

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);
}; 

我们还可以做一些其他的处理,比如显示预览图。但如果不想压缩图片的话,那很可能没什么用。我们将采用Ajax通过HTTP 的post方式上传图片数据。下面的例子是使用Dojo框架来完成请求的,当然你也可以采用其他的Ajax技术来实现. 
Dojo 代码如下: 

// 译者并不懂Dojo,所以将在后面附上jQuery的实现
// Remember that DTK 1.7+ is AMD!
require(["dojo/request"], function(request){
// 设置请求URL,参数,以及回调。
request.post("image-handler.php", {
data: {
imageName: "myImage.png",
imageData: encodeURIComponent(document.getElementById("canvas").toDataURL("image/png"))
}
}).then(function(text){
console.log("The server returned: ", text);
});
}); 

jQuery 实现如下: 

// 上传图片,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);
}
});
}; 

OK,搞定!你还需要做的,就是创建一个只管的用户界面,并允许你控制图片的大小。上传到服务器端的数据,并不需要处理enctype为 multi-part/form-data 的情况,仅仅一个简单的POST表单处理程序就可以了. 
好了,下面附上完整的代码示例: 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!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">
<meta http-equiv="description" content="2013年8月8日,renfufei@qq.com">
<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> 

服务端页面,receive.jsp 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="sun.misc.BASE64Decoder"%>
<%@page import="java.io.*"%>
<%@page import="org.springframework.web.util.UriComponents"%>
<%@page import="java.net.URLDecoder"%>
<%!
// 本文件:/receive.jsp
// 图片存放路径
String photoPath = "D:/blog/upload/photo/";
File photoPathFile = new File(photoPath);
// references: http://blog.csdn.net/remote_roamer/article/details/2979822
private boolean saveImageToDisk(byte[] data,String imageName) throws IOException{
int len = data.length;
//
// 写入到文件
FileOutputStream outputStream = new FileOutputStream(new File(photoPathFile,imageName));
outputStream.write(data);
outputStream.flush();
outputStream.close();
//
return true;
}
private byte[] decode(String imageData) throws IOException{
BASE64Decoder decoder = new BASE64Decoder();
byte[] data = decoder.decodeBuffer(imageData);
for(int i=0;i<data.length;++i)
{
if(data[i]<0)
{
//调整异常数据
data[i]+=256;
}
}
//
return data;
}
%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
//如果是IE,那么需要设置为text/html,否则会弹框下载
//response.setContentType("text/html;charset=UTF-8");
response.setContentType("application/json;charset=UTF-8");
//
String imageName = request.getParameter("imagename");
String imageData = request.getParameter("imagedata");
int success = 0;
String message = "";
if(null == imageData || imageData.length() < 100){
// 数据太短,明显不合理
message = "上传失败,数据太短或不存在";
} else {
// 去除开头不合理的数据
imageData = imageData.substring(30);
imageData = URLDecoder.decode(imageData,"UTF-8");
//System.out.println(imageData);
byte[] data = decode(imageData);
int len = data.length;
int len2 = imageData.length();
if(null == imageName || imageName.length() < 1){
imageName = System.currentTimeMillis()+".png";
}
saveImageToDisk(data,imageName);
//
success = 1;
message = "上传成功,参数长度:"+len2+"字符,解析文件大小:"+len+"字节";
}
// 后台打印
System.out.println("message="+message);
%>
{
"message": "<%=message %>",
"success": <%=success %>
} 
时间: 2024-09-19 08:57:21

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

W3C 用于在 web 应用中处理文件的 API(W3C File API for representing file objects in web applications)

File API W3C Last Call Working Draft 12 September 2013 This Version: http://www.w3.org/TR/2013/WD-FileAPI-20130912/ Latest Published Version: http://www.w3.org/TR/FileAPI/ Latest Editor's Draft: http://dev.w3.org/2006/webapi/FileAPI/ Previous Version

html5 File API的文件操作使用例子

写在前面 这段时间一直有朋友在问文件上传下载的事,搜一下论坛发现相关的问题不少,但是不够系统,本着为人民服务的态度本文试着将一些问题整理一下,争取用初学者可以更明确的去处理相关的问题.文件上传是开发中绕不过的一个坎儿,对于很多没有经验的人来说,简直懵逼,目前我所知道的上传方式有下面这几种: 传统flash上传 隐藏iframe框上传 表单数据提交 HTML5的新工具--File API 本文限于篇幅先介绍最后一种使用html5 File API进行文件上传的相关细节. 历史上,JavaScrip

使用HTML5 File API实现客户端log读写

本文主要介绍使用http://www.aliyun.com/zixun/aggregation/79228.html"> HTML5 File API 实现客户端 log 读写,并实现客户端 log 下载功能,帮助用户更方便的收集客户端 log. 在 HTML 5 里,从 Web 网页上访问本地文件系统变的十分的简单,那就是使用 File API. 这个 File 规范说明里提供了一个 API 来表现 Web 应用里的文件对象,您可以通过编程来选择它们,访问它们的信息.File API 有

html5- HTML5 File API 实现客户端log 请问有人做过吗?在线等

问题描述 HTML5 File API 实现客户端log 请问有人做过吗?在线等 http://www.ibm.com/developerworks/cn/web/1210_jiangjj_html5log/ 在线等 很急的 求大神帮助

php实现按指定大小等比缩放生成上传图片缩略图的方法_php技巧

本文实例讲述了php实现按指定大小等比缩放生成上传图片缩略图的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: /**  * *  *等比缩放  * @param unknown_type $srcImage   源图片路径  * @param unknown_type $toFile     目标图片路径  * @param unknown_type $maxWidth   最大宽  * @param unknown_type $maxHeight  最大高  * @par

JavaScript File API实现文件上传预览_javascript技巧

一.概述以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScript 一直是无法访问本地文件的.于是,为了在浏览器中能够实现诸如拖拽并上传本地文件这样的功能,我们就不得不求助于特定浏览器所提供的各种技术了.比如对于 IE,我们需要通过 ActiveX 控件来获取对本地文件的访问能力,而对于 Firefox,同样也要借助插件开发.由于不同浏览器的技术实现不尽相

JavaScript File API文件上传预览_javascript技巧

对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情,通常我们能做的仅仅是使用<input type="file">标签来上传文件.实现过程是:选取文件的时候value 属性保存了用户指定的文件的名称,表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名.再获取服务器返回的地址,然后做预览. 但是如果有一天我们要上传一个图片,传了图片后预览想换另一张图片,就又得先上传到服务器再预览.在网络比较慢的情况下,这样真的很折腾. 所以我们某些时候需要先预览

通过 File API 使用 JavaScript 读取文件

通过 File API 使用 JavaScript 读取文件 By Eric Bidelman 已发布: 六月 18th, 2010Comments: 273 简介 HTML5 终于为我们提供了一种通过 File API 规范与本地文件交互的标准方式.为了举例说明其功能,可使用 File API 在向服务器发送图片的过程中创建图片的缩略图预览,或者允许应用程序在用户离线时保存文件引用.另外,您可以使用客户端逻辑来验证上传内容的 mimetype 与其文件扩展名是否匹配,或者限制上传内容的大小.

HTML5的File API使用介绍

File API的宗旨是为Web开发人员提供一种安全的方式,以便在客户端访问用户计算机中的文件,并更好地对这些文件执行操作. HTML5虽然可以让我们访问本地文件系统,但是文件只有在用户触发了文件读取行为才能读取到File API,这通常在发生在表单文件选择和拖拽的情况下. 一. File API的兼容性 File API在各大主流浏览器中的支持情况如下图所示: 备注:图片转载自: http://www.ibm.com/developerworks/cn/web/1210_jiangjj_htm