canvas实现图片马赛克的示例代码


Posted in HTML / CSS onMarch 26, 2018

1. 原生canvas实现用到的API

1) getContext(contextID) ---返回一个用于在画布上绘图的环境

复制代码
代码如下:

Canvas.getContext('2d') // 返回一个 CanvasRenderingContext2D 对象,使用它可以绘制到 Canvas 元素中

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,sourceHeight),然后将剪切的内容放到位置为(destX,destY),宽度为(destWidth),高度为(destHeight)的位置上

canvas实现图片马赛克的示例代码

3) getImageData(x, y, width, height) ---获取矩形区域的图像信息

ctx.getImageData(0, 0, 10, 10) // 获取左上角坐标为(0, 0),宽高为区域内的图像信息
// 返回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() ---填充当前的图像(路径)。默认颜色是黑色

【注】如果路径未关闭,那么 fill() 方法会从路径结束点到开始点之间添加一条线,以关闭该路径,然后填充该路径。

11)stroke() ---会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色

12)toDataURL(type, encoderOptions) ---导出图片,type为图片类型, encoderOptions图片质量,[0, 1]

Canvas.toDataURL("image/png", 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() 用户交互

canvas.on('mouse:down', function(options) {  
   console.log(options.e.clientX, options.e.clientY)  
})

// 监听事件
/* 
   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实现代码

<template>
<div class="container">
  <div class="operations">
    <ul>
      <li @click="mosaic">马赛克</li>
      <li @click="addText">添加文字</li>
      <li @click="tailor">裁剪</li>
      <li @click="rotate">旋转</li>
      <li @click="exportImg">导出图片</li>
    </ul>
  </div>
  <canvas ref="imgContent" class="img-wrap">
    你的浏览器太low?
  </canvas>
</div>
</template>

<script>
  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
        this.context = imgContent.getContext('2d')
        let  Img = new Image()
        this.image = Img
        Img.crossOrigin = "Anonymous"
        Img.src = 'http://oia85104s.bkt.clouddn.com/PictureUnlock_193139.pictureunlock.jpg'
        this.canvas.setAttribute('width', Img.width)
        this.canvas.setAttribute('height', Img.height)
        let self = this
        Img.onload = () => {
          let beginX, beginY, endX, endY
          self.context.drawImage(Img, 0, 0)
          self.context.save()

          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) {
                self.context.drawImage(Img, beginX, beginY, endX - beginX, endY - beginY, 0, 0, endX - beginX, endY - beginY)
                return
              }
            })
          })
        }
      },
      drawRect  (x, y, width, height, fillStyle, lineWidth, strokeStyle, globalAlpha) {
        this.context.beginPath()
        this.context.rect(x, y, width, height)
        this.context.lineWidth = lineWidth
        this.context.strokeStyle = strokeStyle
        fillStyle && (this.context.fillStyle = fillStyle)
        globalAlpha && (this.context.globalAlpha = globalAlpha)

        this.context.fill()
        this.context.stroke()
      },
      // 打马赛克
      mosaic () {
        let self = this
        this.resetClickStatus()
        this.isMasic = true
      },
      makeGrid (beginX, beginY, rectWidth, rectHight) {
        const row = Math.round(rectWidth / this.squareEdgeLength) + 1
        const column = Math.round(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)
        }
      },
      setColor (x, y) {
        const imgData = this.context.getImageData(x, y, this.squareEdgeLength, this.squareEdgeLength).data
        let r = 0, g = 0, b = 0
        console.log(this.context.getImageData(x, y, this.squareEdgeLength, this.squareEdgeLength), JSON.stringify(imgData))
        for (let i = 0; i < imgData.length; i += 4) {
          r += imgData[i]
          g += imgData[i + 1]
          b += imgData[i + 2]
        }
        r = Math.round(r / (imgData.length / 4))
        g = Math.round(g / (imgData.length / 4))
        b = Math.round(b / (imgData.length / 4))
        this.drawRect(x, y, this.squareEdgeLength, this.squareEdgeLength, `rgb(${r}, ${g}, ${b})`, 2, `rgb(${r}, ${g}, ${b})`)
      },
      // 添加文字
      addText () {
        this.resetClickStatus()
        this.isText = true
        console.log('添加文字')
      },
      // 裁剪
      tailor () {
        this.resetClickStatus()
        this.isTailor = true
        console.log('裁剪')
      } ,
      // 旋转
      rotate () {
        // if (this.angle === 360) {
        //   this.angle = 90
        // } else {
        //   this.angle += 90
        // }
        // if ([90, 270].includes(this.angle)) {
        //   this.canvas.setAttribute('width', this.image.height)
        //   this.canvas.setAttribute('height', this.image.width)
        // } else {
        //   this.canvas.setAttribute('width', this.image.width)
        //   this.canvas.setAttribute('height', this.image.height)
        // }
        const x = this.image.width / 2
        const y = this.image.height / 2
        this.context.clearRect(0,0, this.canvas.width, this.canvas.height)  // 清理画布内容
        this.context.translate(x, y)
        this.context.rotate(90 * Math.PI / 180)
        this.context.translate(-x, -y)
        this.context.drawImage(this.image, 0, 0)
      },
      resetClickStatus () {
        this.isMasic = false
        this.isText = false
        this.isTailor = false
        this.isTranslate = false
      },
      exportImg () {
        this.resetClickStatus()
        const exportUrl = this.canvas.toDataURL("image/jpeg")
        let a = document.createElement('a')
        a.setAttribute('download', '')
        a.href = exportUrl
        document.body.appendChild(a)
        a.click()
      }
    }
  }
</script>

<style scoped lang="less">
.operations {
  width: 1200px;
  margin: 0 auto;
  ul {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    li {
      list-style: none;
      margin-right: 20px;
      cursor: pointer;
    }
  }
}
.img-wrap {
  display: block;
  margin: 0 auto;
}
</style>

效果图如下:

canvas实现图片马赛克的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
css3实现一款模仿iphone样式的注册表单
Mar 20 HTML / CSS
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 #HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 #HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 #HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 #HTML / CSS
Html5 localStorage入门教程
Apr 26 #HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 #HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 #HTML / CSS
You might like
支持中文的php加密解密类代码
2011/11/27 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
js 验证密码强弱的小例子
2013/03/21 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
python 生成器协程运算实例
2017/09/04 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
装潢设计实习自我鉴定
2013/09/19 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
副总经理任命书
2014/06/05 职场文书
关于环保的活动方案
2014/08/25 职场文书
初级党校心得体会
2014/09/11 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技