参考网上的用法，下面是利用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. perl 语言学习总结

    .#!/usr/bin/perl -w 内建警告信息,Perl发出警告 .字符串 . 连接符 .重复次数 .字符串与数字之间的自动转换 .; + += *= .= not and or xor .pr ...

  2. P4311 士兵占领[最大流]

    题目地址 有一个$M * N$的棋盘,有的格子是障碍.现在你要选择一些格子来放置一些士兵,一个格子里最多可以放置一个士兵,障碍格里不能放置士兵.我们称这些士兵占领了整个棋盘当满足第i行至少放置了$L_ ...

  3. wxPython学习资料

    [译]wxPython布局管理简介 https://www.pystack.org/wxpython_sizer/ 设计器.代码分离 http://book.douban.com/review/578 ...

  4. typedef 函数指针的用法

    转自:http://www.cnblogs.com/shenlian/archive/2011/05/21/2053149.html typedef 函数指针的用法 在网上搜索函数指针,看到一个例子. ...

  5. 点阵字体显示系列之一：ASCII码字库的显示

    http://blog.csdn.net/subfate/article/details/6444578 起因: 早在阅读tslib源代码时就注意到里面有font_8x8.c和font_8x16.c两 ...

  6. lwip 移植

    一.源码目录结构 api . core.netif. include core下又有IPV4 . IPV6 . SNMP 和.c文件 include下又有IPV4.IPV6.LWIP.netif ne ...

  7. 安装pillow

    最近想学Python的图像操作.首要任务就是安装pillow.这个强大的图形处理工具. 但是我遇到了一个问题. Collecting pilow  Could not find a version t ...

  8. C++ 右值引用与移动操作

    右值引用和移动操作是C++11提出的新概念,通过这些操作,可以降低拷贝操作带来的消耗.先来简单介绍一下左值和右值. 左值一般指的是一个对象,或者说是一个持久的值,例如赋值的返回值.下标操作.解引用以及 ...

  9. 交互原型设计软件axure rp学习之路(一)

    开始学习之前,请一定要明白:Axure是个极其极其极其简单的软件.因为你所做的就是拖部件,打字,拖部件,打字,最多加个对齐.如果你能把axure当作word或者ppt来用,那你就学会了axure. A ...

  10. CloseHandle()函数的使用

    CloseHandle()函数的使用?? 很多程序在创建线程都这样写的:............ThreadHandle = CreateThread(NULL,0,.....);CloseHande ...