参考网上的用法，下面是利用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. 2015推荐的Android框架

    一.Guava Google的基于java1.6的类库集合的扩展项目,包括collections, caching, primitives support, concurrency libraries ...

  2. Linux Shell: 统计系统中占用Swap 的程序PID和占用大小

    #!/bin/bash  SUM=0 OVERALL=0 for DIR in `find /proc/ -maxdepth 1 -type d -regex "^/proc/[0-9]+& ...

  3. POJ-3680：Intervals （费用流）

    You are given N weighted open intervals. The ith interval covers (ai, bi) and weighs wi. Your task i ...

  4. 每天一个linux命令（5）：mkdir命令

    版权声明更新:2017-05-09博主:LuckyAlan联系:liuwenvip163@163.com声明:吃水不忘挖井人,转载请注明出处! 1 文章介绍 本文介绍了Linux下命令mkdir. 2 ...

  5. <十五>UML核心视图动态视图之活动图

    一:动态视图 --->动态视图是描述事物动态行为的. --->需要注意的是:动态视图不能够独立存在,它必需特指一个静态视图活uml元素,说明在静态视图规定的事物结构下它们的动态行为. -- ...

  6. python基础知识-列表，元组，字典

    列表(list) 赋值方法: l = [11,45,67,34,89,23] l = list() 列表的方法: #!/usr/bin/env python class list(object): & ...

  7. java 基础知识学习 JVM虚拟机参数配置

    1) 设置-Xms.-Xmx相等: 2) 设置NewSize.MaxNewSize相等: 3) 设置Heap size, PermGen space: Tomcat 的配置示例:修改%TOMCAT_H ...

  8. 面向对象——final关键字

    继承的弊端:打破了封装性 解决方式:final final关键字的特点: 1.final是一个修饰符,即可以修饰类,也可以修饰方法,还可以修饰变量 2.final修饰的类不可以被继承 3.final修 ...

  9. phpstrom添加monokai-sublime主题

    phpstrom默认的主题看起来不是特别舒服,sublime的主题却相当养眼,搜索之后,大为惊喜. 下载地址:https://github.com/sumiaowen/jetbrains-monoka ...

  10. 在MongoDB中修改数据类型

    引言 本文主要讲解Mongodb的类型转换.包括:string转double, string转int, string转Date. 0. 出现类型不一致的原因 ES导入数据到Mongo后,会出现类型统一 ...