写点什么

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

作者:德育处主任
  • 2022 年 1 月 26 日
  • 本文字数:2676 字

    阅读完需:约 9 分钟

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

本文介绍

我使用 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 从入门到膨胀》“拉伸背景图” 这小节。


代码仓库

原生方式实现


在 Vue3+Element-plus 中实现


推荐阅读

《Fabric.js 从入门到膨胀》<br>《Fabric.js 渐变效果(包括径向渐变)》<br>《Fabric.js 3个api设置画布宽高》<br>《Fabric.js 自定义右键菜单》<br>《Fabric.js 更换图片的3种方法(包括更换分组内的图片,以及存在缓存的情况)》<br>


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

发布于: 刚刚阅读数: 2
用户头像

反派 2019.03.19 加入

用键盘绣花

评论

发布
暂无评论
Fabric.js 将本地图像上传到画布背景