canvas图片压缩，局部放大，像素处理
Posted 奔跑的铃铛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas图片压缩，局部放大，像素处理相关的知识，希望对你有一定的参考价值。
直接上代码：（具体看注释）
需要引用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图片压缩，局部放大，像素处理的主要内容，如果未能解决你的问题，请参考以下文章