圣诞节又快到了,又到了全民给微信头像加圣诞帽的时候了。
撸了一个纯前端实现的加圣诞帽的页面,点击前往

JS引用

<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/4.2.0/fabric.min.js"></script>

直接用 bootcdn 引用 fabric.js 最新版

构建 fabric 对象

<div class="body" id="uploadContainer">
<img id="export" alt="圣诞快乐" src="" />
<canvas id="cvs"></canvas>

<div style="display: none">
  <img id="img" src="" alt="" />
  <img class="hide" id="hat0" src="./hat0.png" />
  <!-- 此处省略其余帽子图像-->
</div>

部分DOM内容,只保留关键组件

var screenWidth = window.screen.width < 500 ? window.screen.width : 300 // 计算是最终输出大小(适配移动端)

canvasFabric = new fabric.Canvas('cvs', {
  width: screenWidth ,
  height: screenWidth ,
  backgroundImage: new fabric.Image(img, {
    scaleX: screenWidth / img.width, // 强制缩放至正方形
    scaleY: screenWidth / img.height,
  })

要对 canvas进行操作,首先要构建一个对象

hatInstance = new fabric.Image(hatImage, { // 以一个img DOM创建fabric图像对象
  top: 40,
  left: 50,
  scaleX: 100 / hatImage.width,
  scaleY: 100 / hatImage.height,
  cornerColor: '#0b3a42',
  cornerStrokeColor: '#fff',
  cornerStyle: 'circle',
  transparentCorners: false,
  rotatingPointOffset: 30,
})
hatInstance.setControlVisible('bl', false) // 默认的对象都会有控制大小的手柄,此处关闭几个
hatInstance.setControlVisible('tr', false)
hatInstance.setControlVisible('tl', false)
hatInstance.setControlVisible('mr', false)
hatInstance.setControlVisible('mt', false)
canvasFabric.add(hatInstance) // 添加实例到画布中

随后就是在头像图上绘制圣诞帽
创建一个 Image 对象,并将其添加到画布中。

exportImage.src = canvasFabric.toDataURL({ width: screenWidth, height: screenWidth })

最终将画布内容输出到img DOM中,移动端长按保存,桌面端右键保存。

源码

最后修改:2020 年 12 月 09 日 01 : 44 PM
如果觉得我的文章不错的话,请我喝一杯咖啡吧~