<!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">

 <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>

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

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

    创建一个只管的用户界面,并同意你控制图片的大小.上传到server端的数据,并不须要处理enctype为 multi-part/form-data 的情况.只一个简单的POST表单处理程序就能够了. ...

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

    原文地址:Resize an Image Using Canvas, Drag and Drop and the File API 示例地址:Canvas Resize Demo 原文作者:Dr. T ...

  3. [FILE API]利用Javascript上传图片

    1.HTML结构 <label for="file-input">File:</label> <input type="file" ...

  4. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

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

    前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...

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

    前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...

  7. HTML5 File API 全介绍

    在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类 ...

  8. canvas学习之API整理笔记（二）

    前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...

  9. html5 文件系统File API

    前言: 在做浏览器上传图片的时候,一般采用form表单上传,这种上传无法预览图片,无法查看图片大小,无法知道图片的类型等等!那么在html5 File API提供了这些表单无法实现的功能,而且还支持拖 ...

随机推荐

  1. android备忘录

    1.跑马灯-滚动字幕 多用于广告,在屏幕上方滚动显示,可以是文字,图片等 #滚动字幕 TextView 中加(singleLine="true",ellipsize="m ...

  2. HDU1150 Machine Schedule

    匈牙利算法 目前为止还是半懂不懂的状态 #include<iostream> #include<cstdio> #include<cstring> using na ...

  3. PHP守护进程

    php也是可以直接进行守护进程的启动与终止的,相对于shell来说会简单很多,理解更方便,当然了php的守护进程要实现自动重启还是要依赖于shell的crontab日程表,每隔一段时间去执行一次脚本看 ...

  4. JSP+JavaBean+Servlet+Oracle新增功能中对Date类型的字段的处理

    Oracle库中userinfo表borth字段是Date类型,age年纪字段是int类型.age字段要根据borth来自动计算 先说一下我遇到的问题: insert into的时候遇到日期转换类型错 ...

  5. f

     module.exports = util; }); 除了define之外,我们看到module.exports = util;这一句比较特殊.这句是在说,我util模块向外暴露的接口就这些,其他所 ...

  6. 【原】使用webpack打包的后，公共请求路径的配置问题

    在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时,我们就这样使用 这种 ...

  7. Memcached深度分析

    Memcached是danga.com(运营LiveJournal的技术团队)开发的一套分布式内存对象缓存系统,用于在动态系统中减少数据库负载,提升性能.关于这个东西,相信很多人都用过,本文意在通过对 ...

  8. js 对象属性复制到另一个对象

    var obj={a:1,b:2,c:3} var newObj={};for(var i in obj){newObj[i]=obj[i];}console.log(newObj);

  9. Java——文件选择框：JFileChooser

    import java.awt.BorderLayout; import java.awt.Container; import java.awt.event.ActionEvent; import j ...

  10. js 滚动加载iframe框中内容

    var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest; //滚动加载 var scrollLoad =function( ...