本例使用:vue
<!--canvas 定义-->
<canvas id="canvas01" width="400" height="400"></canvas>
复制代码
// vue 生命周期
mounted(){
this.drawCanvas()
},
复制代码
drawCanvas(){
var cav = document.getElementById('canvas01')
var ctx = cav.getContext('2d')
var img = new Image()
img.crossOrigin = 'anonymous'
// 这里的 url 指向了 我 GitHub 头像地址
img.src = this.url + '?time=' + new Date().getTime()
img.onload = () =>{
if(img.complete){
ctx.drawImage(img,0,0,img.width,img.height)
setTimeout(() =>{
// 保存原始像素信息
this.imagePixels = [...ctx.getImageData(0,0,cav.width,cav.height).data]
},1)
}
}
}
复制代码
注意:git
width
height
canvas
画图,注意 id
定义要不一样created()
img.crossOrigin
img.src ?time=
是为了解决 图片跨域的问题若只是用
canvas
画图,则不存在跨域问题,这里的定义是由于要获取像素信息github
var cav = document.getElementById('canvas01')
var ctx = cav.getContext('2d')
let imageData = ctx.getImageData(0,0,cav.width,cav.height)
let pixels = imageData.data
// 处理像素点
for (let i=0; i<pixels.length; i+=4){
let r = pixels[i]
let g = pixels[i+1]
let b = pixels[i+2]
// 灰色
let gray = parseInt((r+g+b)/3)
imageData.data[i] = gray
imageData.data[i+1] = gray
imageData.data[i+2] = gray
}
// 从新画图
ctx.putImageData(imageData, 0,0)
复制代码
彩色: 用相同的方法,将以前保存的原始像素恢复回去element-ui
反向: 255 - 原值canvas
还有不少的图片处理,是将图片的
r
g
b
进行不一样处理跨域
感谢支持。若不足之处,欢迎你们指出,共勉。bash
若是以为不错,记得 点赞,谢谢你们 😂异步
xrkffgg.github.io/Kvue/#/Canv…this