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

需要引用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. java同步器__学习笔记

    参照:http://ifeve.com/introduce-abstractqueuedsynchronizer/ 前言: 在java.util.concurrent.locks包中有很多Lock的实 ...

  2. [SDOI2010][bzoj1927] 星际竞速 [最小路径覆盖+费用流]

    题面 传送门 思路 仔细观察题目要求的东西,发现就是求一个最小路径覆盖,只不过可以跳跃(就是那个鬼畜的超级跳跃) 那么就直接上最小路径覆盖模版 对每个点,拆成两个点$X_i$和$Y_i$,建立超级源超 ...

  3. 15个变态的Google面试题以及答案

    在当前经济形势不景气的情况下,谷歌招聘新员工是一件令人振奋的事,特别是对那些在当前金融风暴中渴望找到安全港的年轻经理们和软件开发商们来说是个好消息. 不过,也不要高兴太早,谷歌在招聘新员工时,更加青睐 ...

  4. jupyter的使用

    shift+enter 运行程序 Tab 代码补全 shift+Tab 查看函数说明 shift+Tab+Tab 查看函数详细说明 https://www.dataquest.io/blog/jupy ...

  5. hdu 1423 最长上升递增子序列

    #include <iostream> #include <cstdio> #include <cstring> using namespace std; ; in ...

  6. Java学习路线-基础篇！

    下面以黑马程序员Java学院的学习路线为例,进行一次史无前例的剖析,我会采取连载的形式,细致的讲解零基础的人怎么学习Java.先看下Java在基础阶段的知识点路线图. 内容多吗?不要被吓到了,知识点剖 ...

  7. 博客移至CSDN

    CSDN博客地址:http://blog.csdn.net/pilihaotian 博客园看心情更新.

  8. 图片定位 css

    原文发布时间为:2009-07-14 -- 来源于本人的百度文章 [由搬家工具导入] 原图片：http://cache.soso.com/wenwen/i/w_icon.gif 从这图片定位几张图片出 ...

  9. 【Visual Studio】无法打开包括文件:“SDKDDKVer.h”

    解决办法是在头文件的搜索目录中添加$(WindowsSDK_IncludePath);,同时在库文件的搜索目录中添加$(WindowsSDK_LibraryPath_x86);

  10. 用cflow工具生成代码函数调用关系【转】

    转自:http://www.cnblogs.com/feng-zi/p/5469652.html . 安装 sudo apt-get install cflow .使用 cflow [options. ...