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

需要引用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. bzoj3609【HEOI2014】人人尽说江南好

    题意:http://www.lydsy.com/JudgeOnline/problem.php?id=3609 sol :博弈论  通过打表找规律,发现答案是%m循环的,且当m为偶数时取反  因为我太 ...

  2. php中memcache扩展及memcached扩展的区别

    1.目前大多数php环境里使用的都是不带d的memcache版本,这个版本出的比较早,是一个原生版本,完全在php框架内开发的.与之对应的带d的memcached是建立在libmemcached的基础 ...

  3. 使用libcurl提示 LNK2001的错误

    vs使用libcurl(static library),link时报错: error LNK2001: unresolved external symbol __imp__curl_easy_perf ...

  4. 【05】Vue 之 实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  5. （二） Spring项目的搭建

    传统的项目搭建,是将所依赖的第三方jar包复制到项目的类路径下.但是,这样带来的问题是,无法更好的对这些jar包进行动态管理. 目前主流的构建工具有:Ant.Maven.Gradle.以Maven为例 ...

  6. post sharp 与log4net 结合使用，含执行源码 转拷

    环境: VS 2012 PostSharp-4.1.28 (下载地址)https://visualstudiogallery.msdn.microsoft.com/a058d5d3-e654-43f8 ...

  7. 【Visual Studio】简单内存泄漏检测方法 解决 Detected memory leaks! 问题（转）

    原文转自 http://blog.csdn.net/u011430225/article/details/47840647 我的环境是: XP SP2.VS2003 最近在一个项目中, 程序退出后都出 ...

  8. 《30天学习30种新技术》-Day 15：Meteor —— 从零开始创建一个 Web 应用

    目录:https://segmentfault.com/a/1190000000349384 原文: https://segmentfault.com/a/1190000000361440 到目前为止 ...

  9. springBoot 程序入口

    入口类要放在首个package 这样它能扫到所有的包 @SpringBootApplication @EnableScheduling public class App { public static ...

  10. springboot集成PageHelper，支持springboot2.0以上版本

    第一步:pom文件还是需要引入依赖 <!--mybatis的分页插件--> <dependency> <groupId>com.github.pagehelper& ...