直接上代码：（具体看注释）

需要引用jquery.min.js

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>压缩图片</title>

</head>

<body>

    <input type="file" name="file" id="file">

    <div id="container"></div>

    <script src="../jquery-3.3.1.min.js"></script>

    <script>

    $(function(){

        $("#file").on("change",function(){

            var file = this.files[0]

            photoCompress(file, 200, $("#container")[0])

        })

    })

    /**@argument

     * file:文件（图片形式）

     * w：文件压缩后的宽度

     * objDiv：容器或者回调函数

     **/

    function photoCompress(file, w, objDiv){

        var ready = new FileReader() // 异步文件读取机制

        ready.readAsDataURL(file) // 图片预览

        ready.onload = function(){

            var re = this.result

            canvasDataURL(re, w, objDiv)

        }

    }

    function canvasDataURL(re, w, objDiv){

        var newImg = new Image()

        newImg.src = re

        var imgWidth,

            imgHeight

            offsetX = 0,

            offsetY = 0

        // img的onload事件中同步执行绘制图像的函数，就可以一边装载一边绘制了

        newImg.onload = function(){

            var img = document.createElement("img")

            img.src = newImg.src

            imgWidth = img.width

            imgHeight = img.height

            var newHeight = Math.round(imgHeight * w / imgWidth) // 按比例计算压缩后的图片高度

            var canvas = document.createElement("canvas")

            canvas.width = w

            canvas.height = newHeight

            var ctx = canvas.getContext('2d')

            // clearRect(x,y,width,height)

            // 参数说明：x、y矩形起点的横纵坐标，width、height表示矩形宽高

            ctx.clearRect(0,0,w,newHeight)

            // 重置图片宽高为压缩后的宽高

            imgWidth = w

            imgHeight = newHeight

            // drawImage(image,x,y,w,h)

            // 参数说明：image-Image对象，x、y是绘制时该图像在画布中的起始坐标。w、h表示绘制时图像的宽高

            // 该方法也可以复制图片某个区域：drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)

            // 参数说明：image-Image对象，sx、sy是复制源图像中被复制区域的起点横纵坐标，sw、sh时候被复制区域的宽高

            // dx、dy是表示复制后的目标图像在画布中的起始横纵坐标，dw，dh是复制后的目标图像的宽高

            ctx.drawImage(img,offsetX,offsetY,imgWidth,imgHeight)

            /*******************start复制局部区域放大(需要把画布宽高都增加200) *************/

            // ctx.drawImage(img,360,390,800,400,imgWidth,0,150,100)

            /*********************************** end **********************************/

            /*******************************start像素处理 *******************************/

            // 像素处理：下面定义的imagedata其实是一个CanvasPixelArray对象，具有height、width、data等属性。

            // data属性是一个保存像素数据的数组，每四个为一组，按顺序分别表示：红色值，绿色值，蓝色值，透明度值。

            // var imgdata = ctx.getImageData(0,0,imgWidth,imgHeight)

            // var imgdataArr = imgdata.data

            // var imgdataLen = imgdataArr.length

            // console.log(imgdataArr)

            // for(var i = 0; i < imgdataLen; i += 4){

            //     imgdataArr[i] = 255 - imgdataArr[i] // red

            //     imgdataArr[i+1] = 255 - imgdataArr[i+1] // green

            //     imgdataArr[i+2] = 255 - imgdataArr[i+2] // blue

            // }

            // ctx.putImageData(imgdata,0,0) // 重置像素值后重绘图像：参数分别表示：imgdata-像素组，重绘图像的起点横纵坐标

            /*********************************** end **********************************/

            var base64 = canvas.toDataURL('img/png',0.7) // 参数表示：指定的图片类型，图片质量

            if(typeof objDiv === 'object'){

                objDiv.appendChild(canvas)

                // console.log(base64)

            } else if(typeof objDiv === 'function'){

                objDiv(base64)

            }

        }

    }

    </script>

</body>

</html>

如有问题请指出~

canvas图片压缩，局部放大，像素处理的更多相关文章

  1. vue开发中vue-resource + canvas 图片压缩、上传、预览

    1.使用vue-resource上传,也可以自定义ajax上传: 2.使用<input type="file" @change="submit()" na ...

  2. js canvas图片压缩

    function preview_picture(pic){ var r=new FileReader(); r.readAsDataURL(pic); r.onload=function(e){ d ...

  3. 基于canvas的前端图片压缩

    /*common*/ /** * canvas图片压缩 * @param {[Object]} opt [配置参数] * @param {[Function]} cbk [回调函数] * @retur ...

  4. HTML5 CANVAS 实现图片压缩和裁切

    原文地址:http://leonshi.com/2015/10/31/html5-canvas-image-compress-crop/?utm_source=tuicool&utm_medi ...

  5. 使用FormData数据做图片上传： new FormData() canvas实现图片压缩

    使用FormData数据做图片上传: new FormData()       canvas实现图片压缩 ps: 千万要使用append不要用set   苹果ios有兼容问题导致数据获取不到,需要后台 ...

  6. Js利用Canvas实现图片压缩

    最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢.为此,需要对图片进行压缩处理来优化上传功能.以下是具体实现: /* * 图片压缩 * img 原始图片 ...

  7. [H5-Compress-Image]利用canvas实现 javascript 图片压缩处理_基于requirejs模块化的代码实现

    // 还存在有问题的代码,问题在于processFile()中// 问题:在ipone 5c 下,某些图片压缩处理后,上传到服务器生成的文件size为0,即是空白 ;define(['mod/tool ...

  8. Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

  9. canvas前端压缩图片

    参考网上的用法,下面是利用canvas进行的图片压缩 <!DOCTYPE html> <html> <head> <meta charset="ut ...

随机推荐

  1. BZOJ 3150 [Ctsc2013]猴子 ——期望DP 高斯消元

    一堆牌的期望等于每张牌的期望值和. 考虑三个人的游戏即可得到. 然后每张牌遇到另外一张的概率相同,然后就可以列方程求解了. #include <cmath> #include <cs ...

  2. swarm 发布服务

    1.发布服务 2.发布服务 服务发现:Swarm模式内置DNS组件,自动为每个服务分配DNS记录,然后服务的DNS名称在集群内的服务直接分发请求.负载均衡:在Swarm集群中创建服务时,Ingress ...

  3. Nature Reserve

    Nature Reserve time limit per test:2 seconds memory limit per test:256 megabytes input:standard inpu ...

  4. 创建外网 ext

    虽然外部网络是已经存在的网络,但我们还是需要在 Neutron 中定义外部网络的对象,这样 router 才知道如何将租户网络和外部网络连接起来. 上一节我们已经为创建外部网络配置了ML2,本节将通过 ...

  5. 【HDOJ5973】Game of Taking Stones（Java，威佐夫博弈）

    思路:有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子. 游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走任意多的石子:二是可以在两堆中同时取走相同数量的石子. 最后把石子全部取完 ...

  6. request库

    0x00  环境简介和安装 我这里使用的是python2.7版本,直接使用pycharm2018这款IDE. 首先在pycharm中配置一下virtualenv环境,virtualenv是一个创建独立 ...

  7. github的多环境应用介绍

    ssh认证中公钥如同家里大门,私钥就是钥匙,一个大门可以有多把钥匙,大门可以随便展示,钥匙却不能,必须给那些需要的人.其中,公钥的默认名字是id_rsa.pub,私钥的默认名字是id_rsa,它的权限 ...

  8. 一个.java文件定义多个类的情况

    一个.java文件中定义多个类: 注意一下几点: (1) public权限类只能有一个(也可以一个都没有,但最多只有一个): (2)这个.java文件名只能是public 权限的类的类名: (3)倘若 ...

  9. 浏览器中“JavaScript解析器”工作原理

    浏览器在读取HTML文件的时候,只有当遇到<script>标签的时候,才会唤醒所谓的“JavaScript解析器”开始工作. JavaScript解析器工作步骤: 1.“找一些东西”: v ...

  10. 关于getSystemResource, getResource 的总结

    项目中, 有时候要读取当前classpath下的一些配置文件. 之前用的读取配置文件的代码如下 public static Properties loadPropertiesFile(String f ...