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

需要引用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. script error总结

    移动端的页面在控制台报出一个script error,通常的原因有一下几点: 1. 脚本引入错误 可能是脚本的地址不对,协议不对(http或https问题),本地host文件绑定的地址不对 2. 方法 ...

  2. 【CCF】路径解析 模拟

    #include<iostream> #include<cstdio> #include<string> #include<cstring> #incl ...

  3. make gif pic

    http://www.cockos.com/licecap/ licecap 1.open licecap 2.record ,make a pic filename,like pic1 3.work ...

  4. NodeJS学习（1）--- 安装配置介绍

    Node.js 安装配置 本章节我们将向大家介绍在window和Linux上安装Node.js的方法. 本安装教程以Node.js v6.10.1 LTS(长期支持版本)版本为例. Node.js安装 ...

  5. 使用PropTypes进行类型检测

    PropTypes 是react提供的用于检验数据类型的typechecking,避免应用越来越大的时候出现意料之外的bug class Greeting extends React.Componen ...

  6. 【02】【转】Nodejs学习笔记（三）--- 事件模块

    目录 简介及资料 事件常用函数及使用 emitter.on(event, listener) emitter.emit(event, [arg1], [arg2], [...]) emitter.on ...

  7. c#中类与结构的区别 struct与class的区别

    原文发布时间为:2008-11-23 -- 来源于本人的百度文章 [由搬家工具导入] 类与结构的实例比较 　　类与结构的差别 　　如何选择结构还是类 　　一．类与结构的示例比较： 　　结构示例： 　　 ...

  8. linux内核情景分析之强制性调度

    从系统调用返回到用户空间是否调度,从ret_with_reschedule可看出,是否真正调度,取决于当前进程的pcb中的need_resched是否设置为1,那如何设置为1取决于以下几种情况: 时间 ...

  9. 将Map<String, List<Map<String,Object>>>进行排序

    首先我贴上我的代码,刚开始我也不知道怎么排序还写了一些方法,最后请教群里的大神解决了 public Map<String, List<Map<String,Object>> ...

  10. Codeforces 777E Hanoi Factory(线段树维护DP)

    题目链接 Hanoi Factory 很容易想到这是一个DAG模型,那么状态转移方程就出来了. 但是排序的时候有个小细节:b相同时看a的值. 因为按照惯例,堆塔的时候肯定是内半径大的在下面. 因为N有 ...