79 lines
2.4 KiB
Markdown
79 lines
2.4 KiB
Markdown
---
|
||
title: "H5 Canvas前端绘图库 Fabric 简单应用"
|
||
categories: [ "前端技术" ]
|
||
tags: [ ]
|
||
draft: false
|
||
slug: "fabricjs"
|
||
date: "2020-12-09 12:46:00"
|
||
---
|
||
|
||
圣诞节又快到了，又到了全民给微信头像加圣诞帽的时候了。
|
||
撸了一个纯前端实现的加圣诞帽的页面，[点击前往][1]
|
||
|
||
## JS引用
|
||
|
||
```js
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/4.2.0/fabric.min.js"></script>
|
||
```
|
||
直接用 bootcdn 引用 fabric.js 最新版
|
||
|
||
## 构建 fabric 对象
|
||
```html
|
||
<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内容，只保留关键组件
|
||
|
||
```js
|
||
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进行操作，首先要构建一个对象
|
||
```js
|
||
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 对象，并将其添加到画布中。
|
||
|
||
```js
|
||
exportImage.src = canvasFabric.toDataURL({ width: screenWidth, height: screenWidth })
|
||
```
|
||
最终将画布内容输出到img DOM中，移动端长按保存，桌面端右键保存。
|
||
|
||
## 源码
|
||
[button color="light" icon="" url="https://cdn.taurusxin.com/old-cdn/typecho/2020/12/09/christmas_hat.zip" type="round"]点击下载[/button]
|
||
|
||
|
||
[1]: https://blog.xingez.me/christmas_hat |