这Canvas名儿，可不就是艺术大佬们的画板吗？不过在HTML5里面，它还能做些别的事~比如，咱们可以用它来搞定图片编辑，让你的照片焕发新生机！
Canvas的基本概念
Canvas是HTML5里新出的能让我们在网上画图的神器！但今天咱们不聊怎么画图，而是说说怎么用Canvas玩转图片。Canvas就像个虚拟画板，你想怎么画都行，还能对图片搞点花样。
绘制图像到Canvas
Canvas有个超强的函数叫drawImage，可以直接把照片放到画布上去！使用方法有三种，第一种最简单，只要告诉它要放什么图以及放在哪里就行；第二种稍微复杂点儿，还能控制图片的大小；最后一种更厉害，可以剪裁图片的某一部分再贴到画布上。是不是觉得很神奇？
获取图像数据
画图不就是涂鸦？然后，咱们得把涂上去的东西弄明白。Canvas给咱们准备了个getImageData小助手，帮你看看那块画布上是啥。这些细节全在一个叫ImageData的东东里面，包括图片大小和关键的像素数据。有了这堆数据，咱就能随意操作图片！
处理图像数据
得到图之后，就可以开始处理！比如说，把彩色图变成黑白的，或者给它添点特效什么的。这个操作是针对数据本身的，超级灵活！全都搞定以后，再用putImageData方法写回画布去，这样就大功告成！
保存处理后的图片
搞定照片美化后，肯定得把它们存起来？Canvas有个神器叫toDataURL，它能把画布上的东西变成一个dataURI，然后你就能用这个地址当作图片的新家！这样，你就可以把美美的照片存在电脑里，或者传到网上去和大家分享咯~
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)
实际操作：彩色变黑白
讲完了那么多理论，咱们直接看实战！以下就是一个简单到不能再简单的小例子，教你怎么在Canvas画布上把五彩斑斓的图片变为纯黑白色调。只需四步搞定：第一步，用drawImage把图贴上去；第二步，把图像像素抓出来；第三步，动动手脚搞点变化；第四步，把处理过的像素重新放回去，于是你就能看到一张黑白分明的图片！
更多酷炫效果
别只想着把彩图变黑白色，用Canvas还能搞出很多好玩的效果！比如，让图片变得模糊或看起来像打了马赛克。神奇之处在于，这些效果全靠处理像素数据完成的，超级灵活，只有你想不到，没有它办不到！
Canvas的应用场景
Canvas不仅能处理图片，还能用在别的地方！比如做游戏或数据可视化就很适合。它的厉害之处就是灵活和程序化，只要你想得出来，Canvas都能帮你搞定。
总结
var dataURL = canvas.toDataURL(type, encoderOptions);
今天咱们聊聊怎么玩转Canvas处理图片！首先是绘图，再就是给图片弄点数据，接着处理处理这个数据，搞定之后就可以存下来！Canvas可是个神奇工具，拥有超级强大的API，能让你随心所欲地把图片搞得五彩斑斓。希望这篇文章对你有所启发，要是还有啥不懂的地方，赶紧留言，我会尽我最大努力回答你的问题！记得点赞和分享，让更多小伙伴们也感受到Canvas的魔力！
评论0