利用 Vue 和 Canvas 创建逼真油画效果的方法与代码示例

油画之所以叫做油画，就是因为那画面丰富的质感与效果。而现在，只需要学习如何用Vue和Canvas编程，我们也能制作出这样的视觉体验！下面我会手把手地教你们怎么运用这两样神奇的工具，做出逼真的油画效果，并且还附上实战案例哦～

一、准备工作

首先，咱们要告诉Vue项目什么叫Canvas元素。就在你的Vue组件的模板中放个canvas标签，别忘了给它起个唯一的名字就像这样：

html

首先，咱们要找出Vue组件里的画布部分。然后把它放到计算属性那边儿去，好以后用起来方便嘛～

“`javascript

mounted() {

把我画布的id给找出来，放到这个变量里。

这个就把画布的2D图形处理能力赋给当前对象。

}

同时，我们需要获取绘图上下文：

computed: {

ctx() {

返回这个画布里的”2D”模式。

}

二、绘制基础图像

咱得先搞定一下背景图片，就在Canvas上抹个颜色。啥样的图都行。接着，你看Vue组件的mount()那儿，直接把图放在那儿哈：

直接把图片的地址改成你想要的那张，比如 ‘/path/to/your/image.jpg’ 就行了。

img.onload = () => {

就直接在画布上画图！首先要从0,0这个起点开始，然后再根据画布大小调整宽度和高度哈~

computed: {
  canvasElement() {
    return document.getElementById('oil-painting-canvas')
  }
}

};

这样，我们就在Canvas上成功绘制了一张基础图像。

三、创建油画效果

接下来咱们得把Canvas弄得有点像油画了。首先得在Vue组件里的计算属性那儿添加一个让它变得有艺术味儿的小方法~

computed: {
  canvasContext() {
    return this.canvasElement.getContext('2d')
  }
}

methods: {

createOilPaintingEffect() {

了解这个知识点吗？当你上网看图片时，它们实际上是以信息的方式投影在屏幕上。想知道具体怎么实现的话？没错，就是先将屏幕上的图像捕捉下来，然后转化为数字格式后，我们才能看见那些静态图图。这里非常关键的部分就是”捕捉屏幕图像”。所以，imageData就好比是那个把屏幕拍照存下的照片，很关键的哟。

const data = imageData.data;

首先，咱们就从0数起，一直数到找到第4个数的位置。然后，就能拿到接下来连续的4个数~

const r = data[i];

const g = data[i + 1];

const b = data[i + 2];

const gray = (r + g + b) / 3;

data[i] = gray;

data[i + 1] = gray;

data[i + 2] = gray;

mounted() {
  const image = new Image()
  image.src = require('@/assets/base-image.jpg')
  image.onload = () => {
    this.canvasContext.drawImage(image, 0, 0)
  }
}

}

拖图进来就行了，代码就这么简单：this.ctx.putImageData(imageData, 0, 0)。

你就使用那个叫getImageData()的方法，把Canvas画布里每个像素点的颜色信息全给扒拉出来。接着，就计算这些颜色值对应的RGB值的平均数。瞧，这不就是我们想要的黑白灰色调了！这样就能搞定油画般的效果了。最后，别忘了用putImageData()把调整后的图像数据描绘回去，那画面就能焕然一新！

四、添加交互性

来点好玩儿的，给这幅油画添个功能，让大家可以互动！做法很简单，就在Vue组件里，给对应方法加上鼠标的侦听器就成！

handleMousemove(event) {

直接把画布的边界框取出来，就用这个rect变量。

x就是用鼠标在长方形上点击时，离左边缘的距离。

y的话，其实就是你手指在屏幕上滑动的距离，再减去小方块顶部的位置就行了。

把电脑屏幕上的画布图片抓下来就这么做：ctx.getImageData(x, y, 1, 1)。记住。

const alpha = data[3];

别忘，把这个值除以255再填给globalAlpha。

computed: {
  oilPaintingEffect() {
    const imageData = this.canvasContext.getImageData(0, 0, this.canvasElement.width, this.canvasElement.height)
    const data = imageData.data
    for (let i = 0; i < data.length; i += 4) {
      const r = data[i]
      const g = data[i + 1]
      const b = data[i + 2]
      const gray = 0.2989 * r + 0.587 * g + 0.114 * b // 将像素点转化为灰度值
      data[i] = data[i + 1] = data[i + 2] = gray // 将RGB值设置为灰度值，使图片变成黑白色调
    }
    this.canvasContext.putImageData(imageData, 0, 0)
  }
}

this.ctx.fillStyle = ‘#000’;

在画布上画个正方形，位置是（x，y），边长都为10。

我们搞了个小软件，你随便动下鼠标，它就能告诉你现在在哪儿，还能告诉你和屏幕每个点有多近或者多远，就跟看地图差不多。然后，按照这个距离调调图片的透明度，就可以看到那种油画感

五、事件绑定

想让鼠标动起来有特效？简单，咱们就把鼠标操作和Canvas元素捆绑在一起，只要在Vue组件中把 handleMousemove 方法搞定与 Canvas 的 mousemove 事件关联上就行了。

听说过用Vue和Canvas搞油画感觉的真实感吗？很酷炫的我们可以做出来而且还能互动，真的太棒了！这篇文章就是教你怎么做到这个，不怕学不会，还附带实例代码哈~

六、优化油画效果

想让油画更逼真？简单得很，咱们搞快点就好！比如说，弄点颜色变换和小花样进去：

把数据的每一位数都加上50乘以随机数（在0和1之间）。

好，咱们在数组的第i+1个位置上卡个灰色，然后再加个0到49里随便选的随机数就成了呗，毕竟对半分可是50，最后的结果就是灰色加上一个数在最前面几位是0到50的随机数

咱们来这么干，就是把最下面那个数字加上这一行的灰度，然后再乘上个随机数。随机数是从0到1之间选出来的，所以每一行都会有独特的颜色变化

咱们就用了点随机数，这样一来，画面上的颜色变化和手感质感都变得更加真实好玩儿！

七、动态调整油画效果

咱们是不是得加点小东西，让大家能随心所欲地调整油画效果呀？像那种调力度的滑块咋样？

咱们在vue组件里的data里面调一下那个Oil Painting Intensity属性呗。

methods: {
  handleMousemove(event) {
    const x = event.offsetX
    const y = event.offsetY
    const imageData = this.canvasContext.getImageData(0, 0, this.canvasElement.width, this.canvasElement.height)
    const data = imageData.data
    for (let i = 0; i < data.length; i += 4) {
      const distance = Math.sqrt((x - i / 4 % this.canvasElement.width) ** 2 + (y - Math.floor(i / 4 / this.canvasElement.width)) ** 2)
      const opacity = Math.max(0, 0.8 - distance / 100) // 控制透明度，距离鼠标越远，透明度越低
      data[i + 3] = opacity * 255 // 将透明度应用到像素点上
    }
    this.canvasContext.putImageData(imageData, 0, 0)
  }
}

data() {

return {

oilPaintingIntensity: 50

接着，就在创建油画效果的方法里用上这个属性就好了：

咱们就给每个gray值和油画强度添点变数，放到data[i]里去。

这个程序就是把grey和oilPaintingIntensity乘上随机数，然后替换掉整个一列的数据~

给data[i + 2]添个灰色然后随机乘以0.5到-0.5的1个区间的dotArt浓度就好。

这样一来，你就可以随心所欲地调节出喜欢的油画质感了！

八、保存油画效果

最后，要添加个新功能让大家能轻松保存自己涂鸦出来的油画效果。很简单，用油画那块布Canvas的数据生成个数据URL地址就行了！

saveOilPainting() {

直接把你那画图的东西保存成dataURL，格式设成’image/png’即可。

这儿有个链接，咱们用这个创建个新的链接标签。

link.href = dataURL;

点下面的下载按钮，文件名叫’oil_painting.png’。

link.click();

在Vue组件的模板中，添加一个按钮来触发保存功能：

保存油画</button>

通过这种方式，用户可以轻松保存生成的油画效果。

想让你的Vue跟Canvas搭个伙儿？那就可以用代码画出油画那样的真实感觉。再加上交互和动态调节，就更棒了！希望这篇小文章对你有所帮助！

原文链接：https://www.icz.com/technicalinformation/web/javascript/2024/07/19488.html，转载请注明出处~~~