AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2016-03-29 3331
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
创建一个只管的用户界面，并允许你控制图片的大小。上传到服务器端的数据，并不需要处理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 %> 
}



文章标签：
前端开发
JavaScript
API
数据格式
JSON
Java
编解码
HTML5
安全
移动开发
关键词：
API示例
API上传图片
canvas API
API canvas
API file
yemon
目录
相关文章
技术交流18179014480
|
16天前
|
JSON API 数据格式
Amazon商品详情API，json数据格式示例参考
亚马逊商品详情API接口返回的JSON数据格式通常包含丰富的商品信息，以下是一个简化的JSON数据格式示例参考
技术交流18179014480
37 2
土木林森
|
1月前
|
机器学习/深度学习 PyTorch 算法框架/工具
揭秘深度学习中的微调难题：如何运用弹性权重巩固（EWC）策略巧妙应对灾难性遗忘，附带实战代码详解助你轻松掌握技巧
【10月更文挑战第1天】深度学习中，模型微调虽能提升性能，但常导致“灾难性遗忘”，即模型在新任务上训练后遗忘旧知识。本文介绍弹性权重巩固（EWC）方法，通过在损失函数中加入正则项来惩罚对重要参数的更改，从而缓解此问题。提供了一个基于PyTorch的实现示例，展示如何在训练过程中引入EWC损失，适用于终身学习和在线学习等场景。
土木林森
79 4
揭秘深度学习中的微调难题：如何运用弹性权重巩固（EWC）策略巧妙应对灾难性遗忘，附带实战代码详解助你轻松掌握技巧
技术交流18179014480
|
25天前
|
JSON API 数据格式
店铺所有商品列表接口json数据格式示例（API接口）
当然，以下是一个示例的JSON数据格式，用于表示一个店铺所有商品列表的API接口响应
技术交流18179014480
42 1
技术交流18179014480
|
11天前
|
JSON API 数据格式
携程API接口系列，酒店景点详情请求示例参考
携程API接口系列涵盖了酒店预订、机票预订、旅游度假产品预订、景点门票预订等多个领域，其中酒店和景点详情请求是较为常用的功能。以下提供酒店和景点详情请求的示例参考
技术交流18179014480
26 0
技术交流18179014480
|
1月前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索json数据格式示例（API接口）
拍立淘按图搜索API接口为电商平台和购物应用提供了强大的图像搜索功能，能够显著提升用户的购物体验和搜索效率。开发者可以根据自己的需求调用此接口，并处理返回的JSON格式数据来展示推荐商品
技术交流18179014480
53 3
技术交流18179014480
|
15天前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品，该接口返回的通常是一个JSON格式的响应，其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例，同时提供对其关键字段的解释
技术交流18179014480
25 0
游客j4mujezz7vm7y
|
2月前
|
JSON Go API
使用Go语言和Gin框架构建RESTful API：GET与POST请求示例
使用Go语言和Gin框架构建RESTful API：GET与POST请求示例
游客j4mujezz7vm7y
116 6
小白学大数据
|
2月前
|
API iOS开发 开发者
Snapchat API 访问：Objective-C 实现示例
Snapchat API 访问：Objective-C 实现示例
小白学大数据
78 10
技术交流18179014480
|
1月前
|
JSON API 数据格式
商品详情数据JSON格式示例参考（api接口）
JSON数据格式的商品详情数据通常包含商品的多个层级信息，以下是一个综合多个来源信息的JSON数据格式的商品详情数据示例参考：
技术交流18179014480
80 0
LKIDTI数据
|
1月前
|
存储 前端开发 API
Restful API 设计示例
Restful API 设计示例
LKIDTI数据
35 0

热门文章

最新文章

  • 1
    tensorflow object detection API训练公开数据集Oxford-IIIT Pets Dataset
  • 2
    Google地图官方API- 在地图上绘图（自定义标记）
  • 3
    【ASP.NET Web API教程】2.4 创建Web API的帮助页面
  • 4
    关于百度地图api测距显示NaN的解决方案
  • 5
    linux新的API signalfd、timerfd、eventfd使用说明
  • 6
    1、Windows API函数归总，网络函数、消息函数、文件处理
  • 7
    FFmpeg开发笔记（五）：ffmpeg解码的基本流程详解（ffmpeg3新解码api）
  • 8
    各大搜索引擎智能提示API(jsonp实现跨域自动补全建议)
  • 9
    ASP.NET2.0里的web.config配置接口API(转)
  • 10
    通俗易懂：一步步教你 Flask 项目自动生成 API 文档
  • 1
    第十一篇 前沿趋势与展望：深入探索GraphQL、RESTful API、WebSocket、SSE及QUIC与HTTP/3
    113
  • 2
    第九篇 API设计原则与最佳实践
    133
  • 3
    Vue 3.x全面升级指南：Composition API深度探索
    95
  • 4
    结构化克隆API的前世今生：从深拷贝到原生力量structuredClone()
    105
  • 5
    解锁淘宝商品评论API接口：电商数据分析的新视角
    142
  • 6
    探索API接口开发（定制与开发接口）
    133
  • 7
    印刷文字识别产品使用合集之API接口无法调用如何解决
    78
  • 8
    【安全每日一讲】API是什么？解密API背后的奥秘
    90
  • 9
    抖音电商新篇章：douyin.item_get API接口的深度应用
    214
  • 10
    利用Python和Flask构建RESTful API的实战指南
    138

    • 相关电子书

    更多
  • Spring Boot2.0实战Redis分布式缓存
  • CUDA MATH API
  • API PLAYBOOK

    • 相关实验场景

    更多
  • 基于Assistant Api的旅游助手
  • 快速体验智能体API应用
    • 下一篇
    无影云桌面