用Canvas+Javascript FileAPI 实现一个图片剪切、滤镜处理、上传下载工具_百度文库
您的浏览器Javascript被禁用，需开启后体验完整功能，
享专业文档下载特权
&赠共享文档下载特权
&10W篇文档免费专享
&每天抽奖多种福利
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
用Canvas+Javascript FileAPI 实现一个图片剪切、滤镜处理、上传下载工具
&&用Canvas+Javascript FileAPI 实现一个图片剪切、滤镜处理、上传下载工具
阅读已结束，下载本文需要
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，同时保存到云知识，更方便管理
加入VIP
还剩16页未读，
定制HR最喜欢的简历
你可能喜欢Jquery手机端附件上传功能 身份证上传表单提交代码
下载资源()次
阅读次数()次
发布时间：
用法简介：
Jquery手机端附件上传功能 身份证上传表单提交代码。文件引用：&script&src=&js/jquery1.8.3.min.js&&&/script&
&script&src=&js/script.js&&&/script&
&script&type=&text/javascript&&
$(function()&{
/*document.documentElement.style.fontSize=document.documentElement.clientWidth*12/320+'px';*/
$(window).on(&load&,&function()&{
$(&#loading&).fadeOut();
//&========================================浮层控制
$(&#tip&.pack&a&).on(&click&,&function()&{
$(&#tip&).fadeOut()
$(&#tip&.pack&p&).html(&&)
function&alerths(str)&{
$(&#tip&).fadeIn()
$(&#tip&.pack&p&).html(str)
$(&.acc_sure&).on(&click&,&function()&{
alerths(&请等待审核！&)
$(&#file0&).change(function()&{
if&(this.files&&&&this.files[0])&{
var&objUrl&=&getObjectURL(this.files[0]);
console.log(&objUrl&=&&&+&objUrl);
if&(objUrl)&{
$(&#img0&).attr(&src&,&objUrl);
$(&#file0&).click(function(e)&{
$(&#img0&).attr(&src&,&objUrl);
//IE下，使用滤镜
this.select();
var&imgSrc&=&document.selection.createRange().
var&localImagId&=&document.getElementById(&sss&);
//图片异常的捕捉，防止用户修改后缀来伪造图片
preload.filters.item(&DXImageTransform.Microsoft.AlphaImageLoader&).src&=&
}&catch&(e)&{
this._error(&filter&error&);
this.img.style.filter&=&&progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\&&&+&data&+&&\&)&;
//建立一個可存取到該file的url
function&getObjectURL(file)&{
var&url&=&
if&(window.createObjectURL&!=&undefined)&{&//&basic
url&=&window.createObjectURL(file);
}&else&if&(window.URL&!=&undefined)&{&//&mozilla(firefox)
url&=&window.URL.createObjectURL(file);
}&else&if&(window.webkitURL&!=&undefined)&{&//&webkit&or&chrome
url&=&window.webkitURL.createObjectURL(file);
相关标签：
网友评论：
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
什么是邮箱订阅？
邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式，用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮，当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。通过Canvas及File API缩放并上传图片完整示例
通过Canvas及File API缩放并上传图片完整示例
创建一个只管的用户界面，并允许你控制图片的大小。上传到服务器端的数据，并不需要处理enctype为 multi-part/form-data 的情况，仅仅一个简单的POST表单处理程序就可以了. 好了，下面附上完整的代码示例
Canvas简介
canvas 是一个HTML5新增的DOM元素，允许用户在页面上直接地绘制图形，通常是使用JavaScript.
创建一个只管的用户界面，并允许你控制图片的大小。上传到服务器端的数据，并不需要处理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.
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.
canvas.height = image.
// 将图像绘制到canvas上
ctx.drawImage(image, 0, 0, image.width, image.height);
// !!! 注意，image 没有加入到 dom之中
// 设置src属性，浏览器会自动加载。
// 记住必须先绑定事件，才能设置src属性，否则会出同步问题。
image.src =
}; 在上面的例子中，你可以使用canvas 的 toDataURL() 方法获取图像的 Base64编码的值(可以类似理解为16进制字符串,或者二进制数据流).
注意： canvas 的 toDataURL() 获取的URL以字符串开头，有22个无用的数据 "data:image/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);
window.confirm("只能选择图片文件");
// 创建 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]);
var setheight = document.getElementById("setheight");
var maxheight = document.getElementById("maxheight");
setheight.addEventListener("click", function(e){
var value = maxheight.
if(/^\d+$/.test(value)){
MAX_HEIGHT = parseInt(value);
e.preventDefault();
var btnsend = document.getElementById("btnsend");
btnsend.addEventListener("click", function(e){
sendImage();
我们还可以做一些其他的处理，比如显示预览图。但如果不想压缩图片的话，那很可能没什么用。我们将采用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", {
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/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");
$tip2.text('网络连接失败!');
var text = xhr.responseT
if(!text){
$tip2.text('网络错误!');
var json = eval("("+text+")");
if(!json){
$tip2.text('解析错误!');
$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&
&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="日,"&
&script src="http://code.jquery.com/jquery-1.7.1.min.js"&&/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.
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.
canvas.height = image.
// 将图像绘制到canvas上
ctx.drawImage(image, 0, 0, image.width, image.height);
// !!! 注意，image 没有加入到 dom之中
// 设置src属性，浏览器会自动加载。
// 记住必须先绑定事件，才能设置src属性，否则会出同步问题。
image.src =
// 加载 图像文件(url路径)
function loadImage(src){
// 过滤掉 非 image 类型的文件
if(!src.type.match(/image.*/)){
if(window.console){
console.log("选择的文件类型不是图片: ", src.type);
window.confirm("只能选择图片文件");
// 创建 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/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");
$tip2.text('网络连接失败!');
var text = xhr.responseT
if(!text){
$tip2.text('网络错误!');
var json = eval("("+text+")");
if(!json){
$tip2.text('解析错误!');
$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]);
var setheight = document.getElementById("setheight");
var maxheight = document.getElementById("maxheight");
setheight.addEventListener("click", function(e){
var value = maxheight.
if(/^\d+$/.test(value)){
MAX_HEIGHT = parseInt(value);
e.preventDefault();
var btnsend = document.getElementById("btnsend");
btnsend.addEventListener("click", function(e){
sendImage();
window.addEventListener("DOMContentLoaded", function() {
&h1&通过Canvas及File API缩放并上传图片&/h1&
&p&从文件夹拖动一张照片到下方的盒子里， canvas 和 JavaScript将会自动的进行缩放.&/p&
&input type="text" id="maxheight" value="100"/&
&button id="setheight"&设置图片最大高度&/button&
&input type="hidden" name="action" value="receive.jsp" /&
&div id="preview-row"&
&div id="drop-target" style="width:400height:200min-height:100min-width:200background:#cursor:"&拖动图片文件到这里...&/div&
&button id="btnsend"& 上 传 &/button& &span id="tip2" style="padding:8px 0;color:#f00;"&&/span&
&div&&h4&缩略图：&/h4&&/div&
&div id="preview" style="background:#f4f4f4;width:400height:200min-height:100min-width:200"&
&canvas id="myCanvas"&&/canvas&
服务端页面，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.
// 写入到文件
FileOutputStream outputStream = new FileOutputStream(new File(photoPathFile,imageName));
outputStream.write(data);
outputStream.flush();
outputStream.close();
private byte[] decode(String imageData) throws IOException{
BASE64Decoder decoder = new BASE64Decoder();
byte[] data = decoder.decodeBuffer(imageData);
for(int i=0;i&data.++i)
if(data[i]&0)
//调整异常数据
data[i]+=256;
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
//如果是IE，那么需要设置为text/html,否则会弹框下载
//response.setContentType("text/charset=UTF-8");
response.setContentType("application/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 = "上传失败,数据太短或不存在";
// 去除开头不合理的数据
imageData = imageData.substring(30);
imageData = URLDecoder.decode(imageData,"UTF-8");
//System.out.println(imageData);
byte[] data = decode(imageData);
int len = data.
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 %&
用云栖社区APP，舒服~
【云栖快讯】云栖社区技术交流群汇总，阿里巴巴技术专家及云栖社区专家等你加入互动，老铁，了解一下？&&
基于深度学习技术及阿里巴巴多年的海量数据支撑， 提供多样化的内容识别服务，能有效帮助用户降低...
API 网关（API Gateway），提供高性能、高可用的 API 托管服务，帮助用户对外...
阿里云函数计算（Function Compute）是一个事件驱动的全托管计算服务。通过函数计...
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效...好记性不如烂笔头
html5+canvas实现图片的压缩上传
在任何项目中，图片的上传都是很常用的功能，在html5未普及之前，人们用插件来实现这个功能，比如jquery.fileupload.js，这些插件虽然功能强大，但是总觉得挺麻烦。如果你的功能的浏览器要求是在IE10以上，那么不妨用html5的FileReader对象来实现。
FileReader对象主要用来把文件读入内存，并且读取文件中的数据。对图片上传这里用到的是该对象的readAsDataURL方法，该方法用于将文件中的数据读取为dataURL，如图为图片转化的部分：
但是在很多时候，选择的图片太大导致上传的过程卡滞，甚至浏览器崩溃而导致上传失败，特别是在移动设备中，这个时候可以通过在文件选取的时候通过获取file对象的size属性来判断文件是否超过限制范围，从而限制上传。当然，还有一种方式，利用canvas来对图片进行压缩。
利用canvas的drawImage方法来绘制图片，并且设置绘制的图片的width跟height，最后再通过canvas的toDataURL方法来生成压缩后的dataUR
下面直接上代码：
&div class="head_img pr"&
&em class="pa"&&/em&
&img src='../images/icon_touxiang.png' alt="" class="modify_img" /&
&input id="photo" type="file" accept="image/*" /&
&/div&jquery:
$('#photo').change(function(){
var _this = $(this)[0],
_file = _this.files[0],
fileType = _file.
console.log(_file.size);
if(/image\/\w+/.test(fileType)){
$.notify.show('图片上传中...', function(){});
var fileReader = new FileReader();
fileReader.readAsDataURL(_file);
fileReader.onload = function(event){
var result = event.target.
//返回的dataURL
var image = new Image();
image.src =
image.onload = function(){
//创建一个image对象，给canvas绘制使用
var cvs = document.createElement('canvas');
var scale = 1;
if(this.width & 1000 || this.height & 1000){
//1000只是示例，可以根据具体的要求去设定
if(this.width & this.height){
scale = 1000 / this.
scale = 1000 / this.
cvs.width = this.width*
cvs.height = this.height*
//计算等比缩小后图片宽高
var ctx = cvs.getContext('2d');
ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
var newImageData = cvs.toDataURL(fileType, 0.8);
//重新生成图片，&span style="font-family: Arial, Helvetica, sans-"&fileType为用户选择的图片类型&/span&
var sendData = newImageData.replace("data:"+fileType+";base64,",'');
$.post('/user/personalchange',{type:'photo',value:sendData},function(data){
if(data.code == '200'){
$('.modify_img').attr('src',newImageData);
$.notify.close();
$.notify.show(data.message, {placement: 'center'});
$.notify.show('请选择图片格式文件', {placement: 'center'});
这只是一个简单的例子，可以把处理压缩的那部分代码独立出来，然后实现选择多个图片是的循环处理。
没有更多推荐了，