参考网上的用法，下面是利用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. HihoCoder1672 : 区间问题（[Offer收割]编程练习赛41）（贪心）

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定N个区间[Ai, Bi],请你找到包含元素最少的整数集合S,使得每个区间都至少有两个整数在S中. 例如给定三个区间[1 ...

  2. MySQL学习_计算用户支付方式占比_20161104

    计算用户支付方式占比 SELECT b.*#根据城市ID 年月排序 FROM ( SELECT a.* FROM ( #纵向合并 SELECT b1.ID,a1.城市,a1.收款方式,DATE_FOR ...

  3. P2024 [NOI2001]食物链[扩展域并查集]

    大水题一道啊,几分钟切掉. 还是扩展域,每个点拆3个点,之间连边表示有关系(即捕食关系).然后随便判定一下就好了,不难,毕竟NOI上古题目. #include<iostream> #inc ...

  4. 1068 Bash游戏 V3

    1068 Bash游戏 V3 题目来源: Ural 1180 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 有一堆石子共有N个.A B两个人轮流拿 ...

  5. python爬虫知识点总结（四）Requests库的基本使用

    官方文档:http://docs.python-requests.org/en/master 安装方法 命令行下输入:pip3 install requests.详见:https://www.cnbl ...

  6. Python基础入门知识

    本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...

  7. BZOJ3772：精神污染

    浅谈主席树:https://www.cnblogs.com/AKMer/p/9956734.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem.p ...

  8. bzoj4763

    $分块$ $一个很有趣的技巧$ $在树上选sqrt(n)个关键点,每两个关键点之间的距离<=sqrt(n),每个关键点属于一条链$ $预处理出每两个关键点的bitset$ $每次询问就暴力向上爬 ...

  9. SQL DBA 学习

    http://www.cnblogs.com/CareySon/category/389500.html SQL Pass(13) SQL SERVER(42) SQL Server DBA生涯(1) ...

  10. [51nod1102]面积最大的矩形(单调栈||预处理)

    题意:求序列上某区间最小值乘区间长度的最大值. 解题关键:很早就在<挑战程序设计竞赛>中见过了,单调栈模板题,注意弹栈时如何处理后面的元素. 法一:单调栈 #include<bits ...