参考网上的用法，下面是利用canvas进行的图片压缩

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

    <meta content="yes" name="apple-mobile-web-app-capable">

    <meta content="black" name="apple-mobile-web-app-status-bar-style">

    <meta content="telephone=no" name="format-detection">

    <meta content="email=no" name="format-detection">

    <title>slip</title>

    <style>

        *{padding: ;margin: ;}

    </style>

</head>

<body>

<div class="input">

    <input type="file" id="file" accept="image/*">

</div>

</body>

<script type="text/javascript">

    var img=new Image();

    var reader=new FileReader();

    // 选择的文件对象

    var file = null;

    var eleFlile=document.querySelector('#file');

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

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

    img.onload=function () {

        //图片原始大小

        var originWidth = this.width;

        var originHeight = this.height;

        //限制图片大小

        var maxWidth = ;

        var maxHeight = ;

        var targetWidth = originWidth, targetHeight = originHeight;

        if (originHeight > maxHeight || originWidth > maxWidth) {

            if (originWidth / originHeight > maxWidth / maxHeight) {

                //更宽

                targetWidth = maxWidth;

                targetHeight = Math.round(maxWidth * (originHeight / originWidth));

            } else {

                //更高

                targetHeight = maxHeight;

                targetWidth = Math.round(targetHeight * (originWidth / originHeight))

            }

        }

        //图片缩放

        canvas.width = targetWidth;

        canvas.height = targetHeight;

        //清除画布

        context.clearRect(, , targetWidth, targetHeight);

        //图片压缩

        context.drawImage(img, , , targetWidth, targetHeight);

        //转换上传toBlob

        canvas.toBlob(function (blob) {

            //图片ajax上传

            var xhr=new XMLHttpRequest();

            //文件上传成功

            xhr.onreadystatechange=function () {

                if(xhr.status==){

                    alert("上传成功")

                }

            };

            xhr.open("POST","upload.php",true);

            xhr.send(bolb);

        } ,file.type || 'image/png');

            var newImg = document.createElement("img"),

                url = URL.createObjectURL(blob);

            newImg.onload = function () {

                // no longer need to read the blob so it's revoked

                URL.revokeObjectURL(url);

            };

            newImg.src = url;

            document.body.appendChild(newImg);

//        })

        //图片上传toDataURL

        var url=canvas.toDataURL();

        var newImg = document.createElement("img")

        newImg.src = url;

        document.body.appendChild(newImg);

    }

    //文件base64化

    reader.onload=function (e) {

        img.src=e.target.result;

    };

    eleFlile.addEventListener("change",function (event) {

        file=event.target.files[];

        if(file.type.indexOf("image")==){

            reader.readAsDataURL(file);

        }else {

            alert("请传图片")

        }

    })

</script>

</html>

canvas前端压缩图片的更多相关文章

  1. canvas前端压缩图片和视频首屏缩略图并上传到服务器

    图片: var img = document.createElement('img') img.src = window.URL.createObjectURL(fileObj.file) // 加载 ...

  2. js使用canvas在前端压缩图片

    HTML代码: <input id="file" type="file"> JS代码: var eleFile = document.querySe ...

  3. antdv的Upload组件实现前端压缩图片并自定义上传功能

    Ant Design of Vue的Upload组件有几个重要的api属性: beforeUpload: 上传文件之前的钩子函数,支持返回一个Promise对象. customRequest: 覆盖组 ...

  4. Vue前端压缩图片

    一.在组件包下新建compressImage.js // 压缩图片 // eslint-disable-next-line no-unused-vars export function compres ...

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

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

  6. 利用 canvas 实现压缩图片

    /** * nase64Data --> 要压缩的图片base64数据 * width --> 宽度 * height --> 高度 * _callback --> 回调函数 ...

  7. 结合Vue.js的前端压缩图片方案

    这是一个很简单的方案.嗯,是真的. 为什么要这么做? 在移动Web蓬勃发展的今天,有太多太多的应用需要让用户在移动Web上传图片文件了,正因如此,我们有些困难必须去攻克: 低网速下上传进度缓慢,用户体 ...

  8. 前端压缩图片，前端压缩图片后转换为base64.

    今天利用一上午研究了一下前端如何将5m左右的照片转换base64大小为 100k以内! 有两个链接:https://www.cnblogs.com/007sx/p/7583202.html :http ...

  9. php canvas 前端JS压缩，获取图片二进制流数据并上传

    <?php if(isset($_GET['upload']) && $_GET['upload'] == 'img'){ //二进制数据流 $data = file_get_c ...

随机推荐

  1. hyperledger fabric学习（1）

    第一部分 环境搭建 说明 本次环境搭建是是现在虚拟机中,采用ubuntu 16.04版本,安装多次成功. 首先安装一些常用的工具 sudo apt-get update sudo apt-get in ...

  2. Spring笔记01（基础知识）

    1.基础知识 01.Spring:轻量级Java EE开源框架,它是由Rod Johnson为了解决企业应用程序开发的复杂性而创建. 02.目标:实现一个全方位的整合框架,实现“一站式”的企业应用开发 ...

  3. 「JLOI2011」「LuoguP4568」飞行路线（分层图最短路

    题目描述 Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在nn个城市设有业务,设这些城市分别标记为00到n-1n−1,一共有mm种航线,每种航线连接两个城市,并且 ...

  4. 【C++】*p++ = *p不同环境下操作不同

    实测,Ubuntu16.04,gcc 5.3.0&5.4.0(编译选项选择C++11和不选择新标准结果相同) #include<iostream> using namespace ...

  5. 【前端】jQuery DataTables 使用手册（精简版）

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/5182940.html 前排提醒,这个插件能不用就不用,那么多好的插件等着你,为什么要用它呢?就算用easyui的 ...

  6. Tomcat加载JSP原理

    Tomcat加载JSP主要有以下几个类: JspServlet JspServletWrapper JspCompilationContext JspRuntimeContext JsperLoade ...

  7. Hibernate&nbsp;Session的delete()方法

    本文介绍Hibernate Session的delete()方法.delete()方法用于从数据库中删除与Java对象对应的记录.对应游离对象和持久化对象,delete语句会做出不同的反应. AD:  ...

  8. yzm10的ACM集训小感

    7月30号,ACM集训进行了两周,一切都已on the right way.这时的我适时地从题海中探出头,其实除了刷题,也该写点什么来总结下过去.首先,在第一周里,我学习了数据结构,知道了STL这么一 ...

  9. CentOS7 环境下MySQL5.7 PHP7的安装

    用的都是最新版的包 : php7 mysql5.7 nginx1.8  zabbix3.2.6 替换源为阿里云的源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/ ...

  10. 深入剖析ASP.NET Core2.1部署模型，你会大吃一惊

    ----------------------------   以下内容针对 ASP.NET Core2.1版本,2.2推出windows IIS进程内寄宿 暂不展开讨论---------------- ...