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

需要引用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. 【BJOI 2019】奥术神杖

    题意 你有一个长度为 $n$ 的模板串(由 $0-9$ 这 $10$ 个数字和通配符 $.$ 组成),还有 $m$ 个匹配串(只由 $0-9$ 这 $10$ 个数字组成),每个匹配串有一个魔力值 $v ...

  2. 七牛云的cdn配置

    https://segmentfault.com/q/1010000004265556

  3. python3的cookielib

    http://stackoverflow.com/questions/8405096/python-3-2-cookielib

  4. vue.js单文件组件中非父子组件的传值

    最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...

  5. webpack+babel+ES6+react环境搭建

    webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...

  6. spfa代码

    先来贴一下,,虽然不是自己写的 #include<iostream>#include<cstdio>#include<cstring>#include<cma ...

  7. BZOJ 3384 上帝与集合的正确用法

    上帝与集合的正确用法 [问题描述] [输入格式] 第一行一个T,接下来T行,每行一个正整数p,代表你需要取模的值. [输出格式] T行,每行一个正整数,为答案对p取模后的值. [样例输入] 3236 ...

  8. HttpHandler，HttpApplication, HttpModule

    选择HttpHandler还是HttpModule? HttpHandler和HttpModule之间有什么差别 之所以有这个疑问,是因为在这二类对象中都可以访问Request, Response对象 ...

  9. config .net webapi to return json.

    1.add content negotiator using System; using System.Collections.Generic; using System.Linq; using Sy ...

  10. [LeetCode] Minimum Depth of Binary Tree 二叉树最小深度

    Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...