<!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. BZOJ4198：[NOI2015]荷马史诗

    浅谈\(Huffman\)树:https://www.cnblogs.com/AKMer/p/10300870.html 题目传送门:https://lydsy.com/JudgeOnline/pro ...

  2. 蓝桥杯 算法训练 ALGO-122 未名湖边的烦恼

    算法训练 未名湖边的烦恼   时间限制:1.0s   内存限制:256.0MB 问题描述 每年冬天,北大未名湖上都是滑冰的好地方.北大体育组准备了许多冰鞋,可是人太多了,每天下午收工后,常常一双冰鞋都 ...

  3. NHibernate使用总结(2)

    首先,映射文件的名称一定要是XXX.hbm.xml且生成方式一定要是嵌入的资源+不复制. hibernate.cfg.xml这个文件要放在根目录下,且生成方式必须是内容+始终复制. private v ...

  4. phonegap制作windows phone包

    下载SDK win7及以下版本下载SDK http://www.microsoft.com/zh-cn/download/confirmation.aspx?id=27570 WIN8下载SDK ht ...

  5. rsync 简单使用 非默认ssh端口 分别从远程获取及推送本地的文件到远程

    rsync: did not see server greetingrsync error: error starting client-server protocol (code 5) at mai ...

  6. How to Enabling and Diabling VxDMP devices for use with Oracle ASM

    Enable DMP support for ASM to make DMP devices visible to ASM as available disks To make DMP devices ...

  7. jackson 进行json与java对象转换 之二

    主要用于测试学习用jackson包实现json.对象.Map之间的转换. 1.准备测试用的Java类 (1)Link类 package test; /** * Description: 联系方式,被u ...

  8. 10-26C#基础回顾、汇总（函数重点）

    第一部分==进制转换 重点记忆: 1.任意进制转十进制 按权展开法 p代表进制数,a/b/c...m分别代表进制数p从右往左第1位--第(n-1)位的数 公式:a*p0+b*p1+c*p2+..... ...

  9. C程序设计语言（K&R） 笔记1

    当作复习... (1)将华氏度 换算成 摄氏度,公式: ℃=(5/9)(̧°F-32) #include <stdio.h> int transformTemprature(int F){ ...

  10. Django之Model操作进阶篇

    常用参数 null 数据库中字段是否可以为空 db_column 数据库中字段的列名 default 数据库中字段的默认值 primary_key 数据库中字段是否为主键 db_index 数据库中字 ...