本文介绍

我使用 Fabric.js 的版本是 4.6.0。

这次要实现的效果是：在本地上传一张图片，然后渲染到 canvas 里（当做背景图）。

我会用 原生 的方法实现一次，然后再在 Vue3 + Element-plus 环境下实现一次。

最后聊聊我在真实项目中的做法。

需求：

1. 通过点击上传按钮上传图片
2. 拿到图片，放到画布上渲染

需要注意的是，本文主要实现 上传图片并渲染到画布 的逻辑，所以没有做上传文件类型的限制，也没做文件大小限制。如果你的业务中需要限制文件类型，只需在本案例基础上添加限制的方法就行了。

本文所有代码都在文末给出的仓库里。

如果本文内容对你有所帮助，也请你帮我点个赞呗~

原生操作

通过 <input type="file" /> 获取图片路径，会受到浏览器安全策略影响，所以需要处理一下。

实现逻辑：

• 定义好 上传按钮 和 画布（HTML部分）；
• 初始化画布；
• 点击上传按钮 获取图片地址（这里需要处理一下安全策略的问题）；
• 拿到图片路径，使用 canvas.setBackgroundImage 将图片设置成画布背景；
• 在 canvas.setBackgroundImage 的回调函数里刷新一下画布；

<div>
  <input type="file" name="file" id="upload" onchange="handleUpload()" />
  <button onclick="saveCanvas()">保存</button>
</div>

<canvas id="canvas" width="600" height="600" style="border: 1px solid #ccc;"></canvas>

<!-- 引入fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.js"></script>
<script>

// 上传文件的DOM元素
const uploadEl = document.getElementById("upload")

// 画布
let canvas = null

// 初始化画布
function initCanvas() {
  canvas = new fabric.Canvas('canvas')
}

// 上传文件事件
function handleUpload() {
  // 上传文件列表的第一个文件
  const file = uploadEl.files[0]

  // 图片文件的地址
  let imgPath = null

  // 获取图片文件真实路径
  // 由于浏览器安全策略，现在需要这么做了
  // 这段代码是网上复制下来的，想深入理解的可以百度搜搜 “C:\fakepath\”
  if (window.createObjcectURL != undefined) {
    imgPath = window.createOjcectURL(file); 
  } else if (window.URL != undefined) {
    imgPath = window.URL.createObjectURL(file); 
  } else if (window.webkitURL != undefined) {
    imgPath = window.webkitURL.createObjectURL(file);
  }

  // 设置画布背景，并刷新画布
  canvas.setBackgroundImage(
    imgPath,
    canvas.renderAll.bind(canvas)
  )
}

// 保存画布
function saveCanvas() {
  let data = canvas.toJSON()
  console.log(data)
}

window.onload = function() {
  initCanvas()
}
</script>

上面的实现方式，如果是在纯前端的环境下，保存时背景图是地址是本地地址( "blob:http://127.0.0.1:5500/383e7860-3fa5-43b9-92d9-e7165760e60b" )。

这样其实不是很好，如果在别的电脑想通过 反序列化 渲染出来的时候，可能会出现一点问题。

如果纯前端实现的方式，可以将图片转成 base64 再生成背景图。

fabric.Image.fromURL(
  imgPath, // 真实图片地址
  img => {
    // 将图片设置再画布上，然后重新渲染画布，图片就出来了。
    canvas.setBackgroundImage(
      img, // 要设置的图片
      canvas.renderAll.bind(canvas) // 重新渲染画布
    )
  }
)

在 element-plus 里的操作

我使用了 vue3 + element-plus 。

实现逻辑和原生方法一样。 唯一不同的是本例用了 el-upload 这个组件。 我将图片文件转成 base64 再放进画布。

<template>
  <div>
    <div class="btn__x">
      <!-- 上传组件 -->
      <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        :multiple="false"
        :show-file-list="false"
        :limit="1"
        accept=".jpg,.png"
        :before-upload="onProgress"
      >
        <el-button type="primary">上传</el-button>
      </el-upload>

      <!-- 保存按钮（序列化） -->
      <el-button @click="saveCanvas">保存：打开控制台查看</el-button>
    </div>

    <!-- 画布 -->
    <canvas id="canvas" width="600" height="600" style="border: 1px solid #ccc;"></canvas>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import { fabric } from 'fabric'

const store = useStore()

// 画布
let canvas = null

// 上传
function onProgress(file) {
  // 拿图片文件
  const reader = new FileReader()
  reader.readAsDataURL(file)

  // 图片文件完全拿到后执行
  reader.onload = () => {
    // 转换成base64格式
    const base64Img = reader.result

    // 将base64图片设置成背景
    canvas.setBackgroundImage(
      base64Img,
      canvas.renderAll.bind(canvas) // 刷新画布
    )
  }
  return false
}

// 初始化画布
function init() {
  canvas = new fabric.Canvas('canvas')
}

// 保存
function saveCanvas() {
  console.log(canvas.toJSON())
}

// 页面加载完成后，初始化画布
onMounted(() => {
  init()
})
</script>

<style lang="scss" scoped>
.btn__x {
  display: flex;

  .el-button {
    margin-right: 20px;
  }
}
</style>

在正式开发中

在正式的项目开发中，上面两种情况出现的概率应该不多（除非你的后端伙伴是个懒人）

先说说上面两种情况存在的问题：

1. 图片路径是本地地址，保存到服务器是没意义的。
2. 转成 base64 来保存，字段可能会很大。

这种情况放到服务器可能没什么用的。 127.0.0.1 是你本机的，你上传的图片在别人的电脑可能无法查看。

这种情况虽然问题不大，但 backgroundImage.src 的值有点大。

我在项目中的做法：

1. 前端上传图片给后端
2. 后端把图片存到服务器，然后返回一个图片url给前端
3. 前端拿到图片url，再放到 fabric 里渲染出来

这样做的好处是 backgroundImage.src 的值变短了。

在正式项目中，你可能还要考虑到背景图的大小和画布大小不匹配问题。 你可以参考 《Fabric.js 从入门到膨胀》 中 “拉伸背景图” 这小节。

代码仓库

原生方式实现：https://gitee.com/k21vin/fabricjs-demo/blob/master/demos/UploadImg/index.html

在 Vue3+Element-plus 中实现：https://gitee.com/k21vin/front-end-data-visualization/blob/master/src/views/FabricJS/Demo/pages/UploadImg/UploadImg.vue