关于前端:Fabricjs-将本地图像上传到画布背景

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

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

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

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

需要：

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

须要留神的是，本文次要实现 上传图片并渲染到画布 的逻辑，所以没有做上传文件类型的限度，也没做文件大小限度。如果你的业务中须要限度文件类型，只需在本案例根底上增加限度的办法就行了。

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

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

通过 <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) // 从新渲染画布
    )
  }
)

我应用了 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>

在正式的我的项目开发中，下面两种状况呈现的概率应该不多（除非你的后端搭档是个懒人）

先说说下面两种状况存在的问题：

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

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

这种状况尽管问题不大，但 backgroundImage.src 的值有点大。

我在我的项目中的做法：

前端上传图片给后端
后端把图片存到服务器，而后返回一个图片 url 给前端
前端拿到图片 url，再放到 fabric 里渲染进去

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

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

原生形式实现

在 Vue3+Element-plus 中实现

《Fabric.js 从入门到收缩》

《Fabric.js 突变成果（包含径向突变）》

《Fabric.js 3 个 api 设置画布宽高》

《Fabric.js 自定义右键菜单》

《Fabric.js 更换图片的 3 种办法（包含更换分组内的图片，以及存在缓存的状况）》

如果本文内容对你有所帮忙，也请你帮我点个赞呗~
点赞 + 关注 + 珍藏 = 学会了

关于前端:Fabricjs-将本地图像上传到画布背景

本文介绍

原生操作

在 element-plus 里的操作

在正式开发中

代码仓库

举荐浏览