现在手机美颜相机好多呦，照相自信多了，照片也美得不行！接下来，我跟你们聊聊怎么用Vue和Canvas做图片美容。它们俩合用，你也可以变成图片美化达人哦～
一、认识Vue和Canvas
Vue是一个牛逼的网页开发神器，能轻松地将数据转化成网页的样子并实时更新！Canvas则是HTML5里面的一个全新的涂鸦工具，跟画卡片或者搞炫酷动态效果什么的很搭。将这俩大神结合起来使用，你将会得到更无尽的云图像处理乐趣喔！
二、准备工作
vue create beautify-app
在用美颜和磨皮功能之前，咱们要先做好点儿准备工作。咱们要建立个Vue项目，使用Canvas组件，然后还要添加图片上传这个小功能。这么一来，以后要用别的功能也会更加顺手。Canvas.vue组件里面放个input标签，就是让用户可以传他们自己的图片，方便操作。
三、实现美颜功能
美颜，就是把图片变得亮闪闪、五彩斑斓的。首先，在Canvas.vue添个美颜滤镜；接着，mount挂接的地方，把你传的图片画出来；然后，拿这个滤镜去“美化”它；最后，两个API getImageData和putImageData一结合，就能成功加滤镜！
四、实现磨皮功能
mounted() {
this.canvas = this.$refs.canvas;
this.context = this.canvas.getContext('2d');
const image = new Image();
image.src = this.imageUrl;
image.onload = () => {
this.context.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
};
},
磨皮其实就是让你的照片皮肤看起来光滑点儿，照片变得好看多了。先在Canvas软件里面找到像素信息，然后用高斯模糊磨皮，最后再把磨皮后的像素画回Canvas画面，轻松搞定，磨皮效果就完成！
applyFilter() {
const filterImage = new Image();
filterImage.src = '@/assets/beautify.png';
filterImage.onload = () => {
const imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
const filterContext = this.createFilterContext(filterImage, imageData);
this.context.putImageData(filterContext, 0, 0);
};
},
五、完善功能
搞完脸部修整后，可以试试这俩懒人招数让效果显示出来就是把你选好的图片传到那个 handleImageUpload 那儿去，获取相应的 URL。跟着，点一下那两个神奇按钮 applyFilter 和 applySmoothing，就能实现滤镜和磨皮的效果，是不是超简单？
六、灵活运用Vue和Canvas API
const imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height); const data = imageData.data;
掌握了Vue和Canvas API，想怎么定制美颜技术都行~把两者合起来，无论哪种场合都能满足，用得更舒服！
七、示例代码展示
for (let i = 0, len = data.length; i < len; i += 4) {
const red = data[i];
const green = data[i + 1];
const blue = data[i + 2];
const alpha = data[i + 3];
// 磨皮处理
// ...
}
下面我来给你介绍一个好用的Canvas.vue小程序码，能让你用Vue和Canvas打造出精美的图片照片来。试试看，说不定以后你就用得上！
这篇小文教你用Vue和Canvas做移动端美颜磨皮，真的太炫了！快来跟着做，你的应用效果瞬间翻番，人气爆棚！
const resultImageData = new ImageData(data, imageData.width, imageData.height); this.context.putImageData(resultImageData, 0, 0);
。
评论0