参考网上的用法，下面是利用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. Ubuntu 16.04上编译SkyEye的测试程序

    一.首先确保Ubuntu系统上已经安装了Skyeye.skyeye-testsuite和arm-linux-gcc交叉编译工具链,如果没有安装请参考: 1.Skyeye的安装:http://www.c ...

  2. ZJOI2012题解

    t1灾难 给一个食物网 如果一个生物吃的所有东西都灭绝了 它也跟着灭绝 求每个生物灭绝时跟着灭绝的生物数量 支配树裸题,我们先拓扑排序,然后建立一棵树满足一个点灭绝时,有且仅有它的子树跟着灭绝 考虑如 ...

  3. Spring笔记03（Spring创建对象的三种方式）

    1.创建对象的三种方式和bean的生命周期的验证: Animal接口代码: package cn.pb.dao; /** * 动物接口 */ public interface Animal { //吃 ...

  4. 洛谷【P3960】列队

    浅谈树状数组与线段树:https://www.cnblogs.com/AKMer/p/9946944.html 题目传送门:https://www.luogu.org/problemnew/show/ ...

  5. C#的Unit Test如何根据exception来判断函数是否执行正确

    添加ExpectedException属性, 然后指定异常类型, catch后决定Assert.IsTrue The following class contains the method to te ...

  6. python list列表sort、sorted、reverse排序

    列表排序:sort是修改原列表,sorted提供原列表的一个有序副本 li=[2,1,4,5,0]li.sort() #默认从小到大print li结果:[0, 1, 2, 4, 5] li=[2,1 ...

  7. SpringBoot之导入导出Excel

    1.添加springBoot支持 <dependency> <groupId>org.apache.poi</groupId> <artifactId> ...

  8. 常量指针-指向常量的指针,指针常量-指针本身是常量,常量-不能更改值的常量,数组指针-是指针int (*p)[n] 指针数组-是数组int *p[n]

    1.常量指针 定义:具有只能够读取内存中数据,却不能够修改内存中数据的属性的指针,称为指向常量的指针,简称常量指针. 声明:const int * p; int const * p; 注:可以将一个常 ...

  9. AngularJs(Part 3)--注册服务

    有以下5中方法注册一个AngularJS可以识别的Service value和constant是两个极其简单的方法,只有少数情况下会使用. service已经开始复杂了起来.而factory是我认为既 ...

  10. Spring入门第七课

    Bean之间的关系:继承和依赖. 继承Bean配置 Spring允许继承bean的配置,被继承的bean称为父bean,继承这个父bean的Bean称为子Bean. 子Bean从父Bean中继承配置, ...