⽤c语⾔编写图⽚马赛克代码代码,canvas实现图⽚马赛克的⽰
例代码
1. 原⽣canvas实现⽤到的API
1) getContext(contextID) ---返回⼀个⽤于在画布上绘图的环境
复制代码代码如下:
2)drawImage
drawImage(imgObj, x, y) // 按原图⼤⼩绘制, x、y为图⽚在画布中的位置坐标
drawImage(imgObj, x, y, width, height) // 按指定宽⾼绘制
drawImage(imgObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) // 从原来图⽚上某⼀个位置开始(sourceX,sourceY)，指定长宽进⾏剪切(sourceWidth,sourc
eHeight)，然后将剪切的内容放到位置为(destX,destY)，宽度为(destWidth),⾼度为(destHeight)的位置上
3) getImageData(x, y, width, height) ---获取矩形区域的图像信息
// 返回ImageData： { width: 10, height: 10, data: Uint8ClampedArray[400] }
4)beginPath() ---开始⼀条路径，或重置当前的路径 5)rect(x, y, width, height) ---绘制矩形
6)lineWidth ---设置或返回当前线条的宽度
7)fillStyle ---设置或返回⽤于填充绘画的颜⾊、渐变或模式
ctx.fillStyle = color|gradient|pattern
8)strokeStyle ---设置或返回⽤于笔触的颜⾊、渐变或模式
9)globalAlpha ---设置或返回绘图的当前透明值
10)fill() ---填充当前的图像(路径)。默认颜⾊是⿊⾊svg canvas
【注】如果路径未关闭，那么 fill() ⽅法会从路径结束点到开始点之间添加⼀条线，以关闭该路径，然后填充该路径。
11)stroke() ---会实际地绘制出通过 moveTo() 和 lineTo() ⽅法定义的路径。默认颜⾊是⿊⾊
12)toDataURL(type, encoderOptions) ---导出图⽚，type为图⽚类型， encoderOptions图⽚质量，[0, 1]
2. fabric.js
简化canvas编写的库，为canvas提供所缺少的对象模型
fabric.js能做的事
1)在canvas上创建、填充图形(包括图⽚、⽂字、规则图形和复杂路径组成图形)
2)给图形填充渐变颜⾊
3)组合图形(包括组合图形、图形⽂字、图⽚等)
4)设置图形动画集⽤户交互
5)⽣成JSON, SVG数据等
3.使⽤fabric.js实现⽤到的API
1)声明画布
let canvas =new fabric.Canvas('canvas') {
width: 200,
height: 200
}
插⼊图⽚
let imgInstance = new fabric.Image(imgElement,{
left: 0,
top: 0,
width: 100,
height: 100,
angle: 0
}
3)设置背景图⽚ setBackgroundImage
canvas.setBackgroundImage(imgInstance)
4)renderAll() 重新绘制
5)on() ⽤户交互
<('mouse:down', function(options) {
console.lientX, lientY)
})
// 监听事件
/*
mouse:down :⿏标按下时
mouse:move :⿏标移动时
mouse:up :⿏标抬起时
after:render ：画布重绘后
object:selected：对象被选中
object:moving：对象移动
object:rotating：对象被旋转
object:added：对象被加⼊
object:removed对象被移除
*/
6)getPointer()
7)setWidth()、setHeight() 设置canvas的宽⾼
8)画矩形
let rect = new fabric.Rect({
left: 0,
top: 0,
width: 100,
height: 100
})
add(obj) 添加图形
canvas.add(rect)
10)remove(obj) 移除图形
11)set() 设置对象内容
12)toDataURL(obj)
4.原⽣canvas实现代码
马赛克
添加⽂字
裁剪
旋转
导出图⽚
你的浏览器太low
export default {
data () {
return {
context: '',
canvas: '',
isMasic: false,
isText: false,
isTailor: false,
isTranslate: false,
squareEdgeLength: 20,
angle: 0,
img: ''
}
},
mounted () {
this.initData()
},
methods: {
initData () {
let imgContent = this.$refs.imgContent
this.canvas = imgContent
let Img = new Image()
this.image = Img
Img.src = 'oia85104s.bkt.clouddn/PictureUnlock_193139.pictureunlock.jpg' this.canvas.setAttribute('width', Img.width)
this.canvas.setAttribute('height', Img.height)
let self = this
let beginX, beginY, endX, endY
self.canvas.addEventListener('mousedown', e => {
beginX = e.offsetX
beginY = e.offsetY
self.canvas.addEventListener('mouseup', e => {
endX = e.offsetX
endY = e.offsetY
if (self.isMasic) {
self.makeGrid(beginX, beginY, endX - beginX, endY - beginY)
return
}
if (self.isTailor) {
}
})
})
}
},
drawRect (x, y, width, height, fillStyle, lineWidth, strokeStyle, globalAlpha) {
fillStyle && (t.fillStyle = fillStyle)
globalAlpha && (t.globalAlpha = globalAlpha)
},
// 打马赛克
mosaic () {
let self = this
this.isMasic = true
},
makeGrid (beginX, beginY, rectWidth, rectHight) {
const row = und(rectWidth / this.squareEdgeLength) + 1
const column = und(rectHight / this.squareEdgeLength) + 1
for (let i = 0; i < row * column; i++) {
let x = (i % row) * this.squareEdgeLength + beginX
let y = parseInt(i / row) * this.squareEdgeLength + beginY
this.setColor(x, y)
}
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。