通过Canvas及File API缩放并上传图片-阿里云开发者社区

开发者社区> 铁锚> 正文

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

简介: 原文地址:Resize an Image Using Canvas, Drag and Drop and the File API  示例地址:Canvas Resize Demo  原文作者:Dr. Tom Trenka 原文日期: 2013年8月6日 翻译日期: 2013年8月8日 Tom Trenka 能为"我"的博客写一篇文章,对我来说是一个巨大的荣誉。
+关注继续查看

原文地址:Resize an Image Using Canvas, Drag and Drop and the File API 

示例地址:Canvas Resize Demo 

原文作者:Dr. Tom Trenka
原文日期: 2013年8月6日
翻译日期: 2013年8月8日

Tom Trenka 能为"我"的博客写一篇文章,对我来说是一个巨大的荣誉。Tom是Dojo框架的最初贡献者之一,也是我在SitePen公司的良师益友.我见证了他最顶级的天才能力,并且他总是第一个以前瞻性的解决方案预见了很多棘手的问题。他总是站在局外思考,打破常规但却又坚实可靠地解决边缘问题。本文就是一个完美的例证。

最近我总是被问道要创造一个用户接口API,允许用户上传图片到服务器上(伴随其他的事情),并能在我们公司提供支持的大量网站的客户端上使用。通常来说这都是很容易的事情——创建一个form表单,添加一个file类型的input输入框,让用户从电脑里选择图片,并在form标签上设置enctype="multipart/form-data"表单属性,然后上传即可。非常简单,不是吗?事实上,这里有一个足够简单的例子;点击进入 

但是如果你想要通过某些方式预先处理一下图片再上传,那该怎么办?比如说,你必须先压缩图片尺寸,或者需要图片只能是某些种类的格式,如 png 或者jpg,你怎么办?
用canvas来解决!

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表单处理程序就可以了.

Tom Trenka 博士简介
Tom Trenka ,软件开发者,明尼苏达州首府圣保罗的音乐及其他方面的专家。
DojoX项目的前lead,也是Dojo最早的代码贡献者之一,
Ai Media Group的高级开发工程师(Senior Software Developer),从事复杂数据分析程序的开发.


好了,下面附上完整的代码示例:

<%@ 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 %>
}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
7种鼠标悬停效果,多样的图片说明展示
  今天我们要为您展示如何创建一些简单又不失时尚的图片说明悬停效果。我们的想法应用悬停效果来显示图片对应的标题,作者和链接按钮。对于一些的效果,我们将使用3D变换。这样做的目的是保持奇妙的效果,并为许多不同的变化提供了灵感。
642 0
MySQL 直接存储图片并在 html 页面中展示,点击下载
数据库实体类: package com.easy.kotlin.picturecrawler.entity import java.util.* import javax.
889 0
Scrapy下载图片(下,图片中文字识别)
这里增加应用场景,让图片下载结合自动识别,实现识别转换图片中的电话号码。 背景 在爬取广西人才网的过程当中,发现广西人才网企业联系电话那里不是str,而是将电话生成了一张图片,遇到这种情况,通常有三种不同的处理办法: 将图片地址保存下来,只存url ...
1530 0
关于图片的几个API的用法
建议使用真机测试        一.my.chooseImage: 拍照或从手机相册中选择图片,默认1张,可以设置参数count来选择 上限9张;点击完成后成功返回apFilePaths数组,里面包含图片的类型和base64编码的图片路径信息;      代码示例如下:  my.
530 0
ML之Cosin:基于输入图片RGB均值化转为单向vector利用Cosin(余弦相似度)算法进行判别
ML之Cosin:基于输入图片RGB均值化转为单向vector利用Cosin(余弦相似度)算法进行判别
19 0
+关注
铁锚
Java与数据库开发
271
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载