<!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. BZOJ1070 [SCOI2007]修车

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  2. BZOJ3240 [Noi2013]矩阵游戏

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  3. Linux列出安装过的程序

    命令行: dpkg -l apt-cache(模糊搜索apt-cache search 包名) pkgnames yum list(ubuntu下试了无效) rpm -aq(ubuntu下试了无效)

  4. DedeCMS Xss+Csrf Getshell \dede\file_manage_control.php

    目录 . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 对这个漏洞的利用方式进行简单的概括 . 这个漏洞的利用前提是需要登录到后台进行操作 ...

  5. xpath中/和//的差别

    xpath中 "/"是在子节点中查找,"//"是在所有子节点中查找,包括子节点的子节点. example: leve1/leve2:得到文本leve2 leve ...

  6. 【Alpha版本】 第七天 11.15

    一.站立式会议照片: 二.项目燃尽图: 三.项目进展: 成 员 昨天完成任务 今天完成任务 明天要做任务 问题困难 心得体会 胡泽善 完成我要招聘的招聘详情显示,完成简历填写及显示功能 完成我要应聘的 ...

  7. MVC页面重定向'页面跳转

    MVC页面重定向,主要有以下几种形式: 1.Response.Redirect();方法 using System; using System.Collections.Generic; using S ...

  8. SSM的各个配置文件

    SqlMapConfig.xml文件:(这是带了mybatis的分页插件的配置) <?xml version="1.0" encoding="UTF-8" ...

  9. Maven中的dependencyManagement 意义

    1.在Maven中dependencyManagement的作用其实相当于一个对所依赖jar包进行版本管理的管理器. 2.pom.xml文件中,jar的版本判断的两种途径 1:如果dependenci ...

  10. 使用angularjs定义html中的属性ng-attr-(suffix)

    html中的属性很多,同样可以使用angularjs来定义: ng-attr-(suffix)=只能使用变量定义 <div title="angularjs中的title"& ...