图片滤镜

---

a标签的download属性

download 属性可以用来下载文件，属性值用来指定文件名，浏览器会自动检测正确的文件扩展名并添加到文件，注意：a标签上必须设置 href 属性。

---

glfx.js的介绍

glfx.js 是使用WebGL来创建精彩的图像效果。WebGL 是一种可以在网页浏览器中呈现3D画面的新技术。包含了很多功能，如亮度/对比度、棕褐色效果、噪点、色调、模糊滤镜等等。在本章内容中使用到了这个图像处理库，具体使用方法看下方代码：

var canvas = fx.canvas(); var image = document.getElementById('image'); var newimage = document.getElementById('newimage'); var texture = canvas.texture(image); switch (select) { case 'brightnessContrast': canvas.draw(texture).brightnessContrast(this.option.brightnessContrast.brightness,this.option.brightnessContrast.contrast).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'denoise': canvas.draw(texture).denoise(this.option.denoise.exponent).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'hueSaturation': canvas.draw(texture).hueSaturation(this.option.hueSaturation.hue,this.option.hueSaturation.saturation).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'noise': canvas.draw(texture).noise(this.option.noise.amount).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'sepia': canvas.draw(texture).sepia(this.option.sepia.amount).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'unsharpMask': canvas.draw(texture).unsharpMask(this.option.unsharpMask.radius,this.option.unsharpMask.strength).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'vibrance': canvas.draw(texture).vibrance(this.option.vibrance.amount).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'vignette': canvas.draw(texture).vignette(this.option.vignette.size,this.option.vignette.amount).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'lensBlur': canvas.draw(texture).lensBlur(this.option.lensBlur.radius,this.option.lensBlur.brightness,this.option.lensBlur.angle).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'tiltShift': canvas.draw(texture).tiltShift(this.option.tiltShift.startX,this.option.tiltShift.startY,this.option.tiltShift.endX,this.option.tiltShift.endY,this.option.tiltShift.blurRadius,this.option.tiltShift.gradientRadius).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'triangleBlur': canvas.draw(texture).triangleBlur(this.option.triangleBlur.radius).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'zoomBlur': canvas.draw(texture).zoomBlur(this.option.zoomBlur.centerX, this.option.zoomBlur.centerY,this.option.zoomBlur.strength).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'colorHalftone': canvas.draw(texture).colorHalftone(this.option.colorHalftone.centerX, this.option.colorHalftone.centerY,this.option.colorHalftone.angle,this.option.colorHalftone.size).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'dotScreen': canvas.draw(texture).dotScreen(this.option.dotScreen.centerX, this.option.dotScreen.centerY,this.option.dotScreen.angle,this.option.dotScreen.size).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'hexagonalPixelate': canvas.draw(texture).hexagonalPixelate(this.option.hexagonalPixelate.centerX, this.option.hexagonalPixelate.centerY,this.option.hexagonalPixelate.scale).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'ink': canvas.draw(texture).ink(this.option.ink.strength).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'bulgePinch': canvas.draw(texture).bulgePinch(this.option.bulgePinch.centerX, this.option.bulgePinch.centerY,this.option.bulgePinch.radius,this.option.bulgePinch.strength).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'matrixWarp': canvas.draw(texture).matrixWarp(this.option.matrixWarp.matrix, this.option.matrixWarp.inverse,this.option.matrixWarp.useTextureSpace).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'perspective': canvas.draw(texture).perspective(this.option.perspective.before, this.option.perspective.after).update(); newimage.src = canvas.toDataURL('image/png'); break; case 'swirl': canvas.draw(texture).swirl(this.option.swirl.centerX, this.option.swirl.centerY,this.option.swirl.radius,this.option.swirl.angle).update(); newimage.src = canvas.toDataURL('image/png'); break; }

github地址：http://evanw.github.io/glfx.js/

source code：https://github.com/evanw/glfx.js

如果您正在寻找在线处理图片，可以去在线PS，另外再另一篇文章介绍了 camanjs 图像操作库，感兴趣的也可以过去看看。