当前位置：网站首页>Fabric.js 将本地图像上传到画布背景

Fabric.js 将本地图像上传到画布背景

2022-07-02 05:08:00 【德育处主任】

本文介绍

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

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

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

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

file

需求：

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

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

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

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

原生操作

通过 <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 。

file

实现逻辑和原生方法一样。唯一不同的是本例用了 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>