<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>上传文件</title>

    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">

        /*

        三个参数

        file：一个是文件(类型是图片格式)，

        w：一个是文件压缩的后宽度，宽度越小，字节越小

        objDiv：一个是容器或者回调函数

        photoCompress()

        */

        function photoCompress(file, w, objDiv) {

            var ready = new FileReader();

            /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/

            ready.readAsDataURL(file);

            ready.onload = function () {

                var re = this.result;

                canvasDataURL(re, w, objDiv)

            }

        }

        function canvasDataURL(path, obj, callback) {

            var img = new Image();

            img.src = path;

            img.onload = function () {

                var that = this;

                // 默认按比例压缩

                var w = that.width,

                    h = that.height,

                    scale = w / h;

                w = obj.width || w;

                h = obj.height || (w / scale);

                var quality = 0.7;  // 默认图片质量为0.7

                //生成canvas

                var canvas = document.createElement('canvas');

                var ctx = canvas.getContext('2d');

                // 创建属性节点

                var anw = document.createAttribute("width");

                anw.nodeValue = w;

                var anh = document.createAttribute("height");

                anh.nodeValue = h;

                canvas.setAttributeNode(anw);

                canvas.setAttributeNode(anh);

                ctx.drawImage(that, 0, 0, w, h);

                // 图像质量

                if (obj.quality && obj.quality <= 1 && obj.quality > 0) {

                    quality = obj.quality;

                }

                // quality值越小，所绘制出的图像越模糊

                var base64 = canvas.toDataURL('image/jpeg', quality);

                // 回调函数返回base64的值

                callback(base64);

            }

        }

        /**

        * 将以base64的图片url数据转换为Blob

        * @param urlData

        *            用url方式表示的base64图片数据

        */

        function convertBase64UrlToBlob(urlData) {

            var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],

                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

            while (n--) {

                u8arr[n] = bstr.charCodeAt(n);

            }

            return new Blob([u8arr], { type: mime });

        }

        //上传文件方法

        function UpladFile() {

            var fileObj = document.getElementById("file").files[0]; // js 获取文件对象

            photoCompress(fileObj, {

               width:1000

            }, function (base64Codes) {

                jQuery.ajax({

                    async: true,

                    type: "POST", //用POST方式传输

                    dataType: "text", //数据格式:JSON

                    url: 'http://localhost:804/Ajax/APIS.ashx?time=' + new Date().getMilliseconds(), //目标地址

                    data: "base64=" + base64Codes + "&action=ajaxFileUpload",

                    success: function (msg) {

                        alert(msg);

                    }

                });

            });

        }

    </script>

</head>

<body>

使用canvas形式压缩图片并上传：

<span id="percentage"></span><span id="time"></span>

<br /><br />

<input type="file" id="file" name="myfile" accept="image/x-png, image/jpg, image/jpeg, image/gif"/>

<input type="button" onclick="UpladFile()" value="上传" />

</body>

</html>

　　

使用canvas压缩图片 并上传的更多相关文章

  1. HTML5 Canvas前台压缩图片并上传到服务器

    1.前台代码: <input id="fileOne" type="file" /> <input id="btnOne" ...

  2. javaScript:压缩图片并上传

    html代码: <input id="file" type="file" name="filesName"> js代码: var ...

  3. ios中摄像头/相册获取图片，压缩图片，上传服务器方法总结

    相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过UIImagePickerController类提供的交互对话框来从相册中选择图像.但是,注意:相册中的图片机器路径无法直 ...

  4. 微信小程序压缩图片并上传到服务器（拿去即用）

    这里注意一下,图片压缩后的宽度是画布宽度的一半 canvasToTempFilePath 创建画布的时候会有一定的时间延迟容易失败,这里加setTimeout来缓冲一下 这是单张图片压缩,多张的压缩暂 ...

  5. js压缩图片并上传，不失真，保证图片清晰度

    <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  6. 微信小程序 压缩图片并上传

    转自https://segmentfault.com/q/1010000012507519 wxml写入 <view bindtap='uploadImg'>上传</view> ...

  7. canvas剪裁图片并上传，前端一步到位，无需用到后端

    背景: 当前主流的图片剪裁主要有两种实现方式. 1:flash操作剪裁.2:利用js和dom操作剪裁. 目前看来这个剪裁主要还是先通过前端上传图片到服务器,然后前端操作后把一些坐标和大小数据传到后台, ...

  8. html5压缩图片并上传

    手机端图片有很大的,上传的时候很慢,这时候就要压缩一下了,有一个开源的js可以压缩图片的大小,开源地址如下:https://github.com/think2011/localResizeIMG3 代 ...

  9. Xamarin.Android 压缩图片并上传到WebServices

    随着手机的拍照像素越来越高,导致图片赞的容量越来越大,如果上传多张图片不进行压缩.质量处理很容易出现OOM内存泄漏问题. 最近做了一个项目,向webservices上传多张照片,但是项目部署出来就会出 ...

随机推荐

  1. STL理论基础、容器、迭代器、算法

    一.STL基本概念 STL(Standard Template Library,标准模板库)是惠普实验室开发的一系列软件的统称.现然主要出现在C++中,但在被引入C++之前该技术就已经存在了很长的一段 ...

  2. JavaWeb框架_Struts2_(一)----->Struts2 框架入门

    1.  框架入门 2.1  Struts2简介 (1). Struts2是一种基于MVC模式的的轻量级Web开发框架. MVC模式:MVC全名是Model View Controller,是模型(mo ...

  3. (转)C# 特性（Attribute）详细介绍

    本文转载自:http://www.cnblogs.com/luckdv/articles/1682488.html 1.什么是Atrribute 首先,我们肯定Attribute是一个类,下面是msd ...

  4. 【转】LTE 全过程流程

    LTE 过程全流程 1. UE处于关闭状态 2. 打开UE电源. 3. 搜索附近的频率 4. 同步时间 5. 小区搜索 6. 小区选择 7. 解码MIB 8. 解码SIB 9. 初始化RACH过程 1 ...

  5. 线程及同步的性能 – 线程池/ ThreadPoolExecutors/ ForkJoinPool

    线程池和ThreadPoolExecutors 虽然在程序中可以直接使用Thread类型来进行线程操作,但是更多的情况是使用线程池,尤其是在Java EE应用服务器中,一般会使用若干个线程池来处理来自 ...

  6. thrift rpc 使用常见问题解答和经验

    Thrift是一个非常棒的工具,是Facebook的开源项目,目前的开发非常的活跃,由Apache管理,所以用的是Apache Software License,这非常重要,因为可以放心的对其修改并用 ...

  7. spring学习七

    一: web.xml中常用配置元素? <servlet></servlet>: 在向servlet或JSP页面制定初始化参数或定制URL时,首先命名servlet或JSP页面. ...

  8. Celery-4.1 用户指南: Task(任务)

    任务是构建 celery 应用的基础块. 任务是可以在任何除可调用对象外的地方创建的一个类.它扮演着双重角色,它定义了一个任务被调用时会发生什么(发送一个消息),以及一个工作单元获取到消息之后将会做什 ...

  9. 2015.1.15 利用航线id取所有点的函数创建视图

    1.根据航路id取所有航路点的函数 create or replace function alinepnts(alid in number) return tab_airline_pnt is --返 ...

  10. sql语句优化方案

    1. 为查询缓存优化你的查询 NOW() 和 RAND() 或是其它的诸如此类的SQL函数都不会开启查询缓存,因为这些函数的返回是会不定的易变的. 所以,你所需要的就是用一个变量来代替MySQL的函数 ...