基于fabric.js的图片编辑器, 画布背景实现原理

这篇具有很好参考价值的文章主要介绍了基于fabric.js的图片编辑器, 画布背景实现原理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

基于fabric.js的图片编辑器, 画布背景实现原理

图片上传

使用了element-plus提供的图片上传el-upload组件

<el-upload :show-file-list="false" :auto-upload="false" :on-change="(e) => uploadImage(e, 'background')" >
   <button class="right-canvas-resize-btn">上传图片</button>
</el-upload>Ï

图片上传支持两种元素,普通图片元素和背景图片元素,所以定义属性type进行区分

type为Image为普通图片, background为背景

背景也是一张图片,使用fabric.Image创建图片元素

因为没有图片服务器所以把上传的文件转换了base64图片,作为fabric图片的链接

需要区分上传类型type, 不同类型的图片走不同逻辑

fileUpload = async (file: File, name: string, type: string) => {
    const src = await this.handler.utils.fileToBase64(file);
    if (src) {
      const image = new Image();
      image.src = src;
      const options: any = {
        name,
        type,
        src,
      };
      await new Promise((resolve) => {
        image.onload = () => {
          options.width = image.width;
          options.height = image.height;
          resolve(true);
        };
      });
      let marterialObject;
      if (type == "background") {
        marterialObject = this.handler.workareaHandler.setBgImage(options);
      } else {
        marterialObject = this.handler.add(options);
      }
      return marterialObject;
    }
 }

背景设置原理

背景图片和普通图片的区别

  1. 不能选中,不能移动,不能修改,没有操作控件

给背景元素添加以下属性

        hasControls: false,
        hasBorders: false,
        selectable: false,
        lockMovementX: true,
        lockMovementY: true,
        lockScalingX: true,
        lockScalingY: true
  1. 背景需要自适应画布

计算规则如下

  • 获取宽高比例最大值作为元素缩放值,目的是图片元素保持宽高比例不变的情况下覆盖画布
  • 根据缩放值计算图片最新宽高,需要基于画布居中展示
  • 水平居中规则如下,垂直居中同理

基于fabric.js的图片编辑器, 画布背景实现原理

 _getBgPosition(bgObject: FabricImage | any) {
    const { width, height } = this.workspace as any;
    let scale = 1;
    if (width > bgObject.width || height > bgObject.height) {
      if (width / bgObject.width > height / bgObject.height) {
        scale = width / bgObject.width;
      } else {
        scale = height / bgObject.height;
      }
    }
    // 居中
    const bgHeight = bgObject.height * scale;
    const bgWidth = bgObject.width * scale;
    const bgLeft = width / 2 - bgWidth / 2;
    const bgTop = height / 2 - bgHeight / 2;
    return {
      left: bgLeft,
      top: bgTop,
      scaleX: scale,
      scaleY: scale,
    }
  1. 背景图片支持修改,所以上传时需要把画布中的背景元素给移除
 // 获取背景元素
  getBgObject() {
    return this.handler.canvas.getObjects().find((item: any) => {
      if (item.type == "background") {
        return item;
      }
    });
  }
  
  // 去重, 防止出现多个背景元素
   const bgObject = this.getBgObject();
   if (bgObject && bgObject.src !== src) {
      this.handler.canvas.remove(bgObject);
   }

基于fabric.js的图片编辑器, 画布背景实现原理

  1. 背景元素永远置底,但比画布高一层,所以先置底再上移一层
      this.canvas.sendToBack(this.bgObject);
      this.canvas.bringForward(this.bgObject);
  1. 画布中有元素层级的逻辑,所以当我们选中某个元素的时候需要保持原有层级,但是fabric.js默认是对象在选中时不保持在当前堆栈位置

所以我们需要在初始化画布时指定保留层级

preserveObjectStacking: true

完整代码如下

async setBgImage(options: WorkareaOption) {
    const { src } = options || {};
    const editable = false;
    const option = {
      editable,
      hasControls: editable,
      hasBorders: editable,
      selectable: editable,
      lockMovementX: !editable, 
      lockMovementY: !editable,
      lockScalingX: !editable,
      lockScalingY: !editable,
      hoverCursor: "default",
      name: "背景图片",
      type: "background",
      src,
    };
    // 去重, 防止出现多个背景元素
    const bgObject = this.getBgObject();
    if (bgObject && bgObject.src !== src) {
      this.handler.canvas.remove(bgObject);
    }
    const poiOptions = this._getBgPosition(options);
    const newOptions = Object.assign({}, option, poiOptions);
    this.bgObject = await this.handler.add(newOptions, false);
    if (this.bgObject) {
      this.canvas.add(this.bgObject);
      this.canvas.sendToBack(this.bgObject);
      this.canvas.bringForward(this.bgObject);
    }
    this.canvas.requestRenderAll();
    return this.bgObject;
  }

背景的翻转、分离、删除

支持背景图片的翻转、分离、删除

基于fabric.js的图片编辑器, 画布背景实现原理

翻转

修改背景元素的scaleX属性,默认为水平翻转{ scaleX: -1 }

分离

修改背景元素为图片元素

  • type修改为Image
  • 支持选中,移动,修改,有操作控件, 把上文的hasControls等字段取反即可

删除

基于fabric提供的删除方法 this.canvas.remove(target);

简介

vue-design-editor 是仿搞定设计的一款开源图片编辑器, 支持多种格式的导入,包括png、jpg、gif、mp4, 也可以一键psd转模板(后续开发)

github地址 预览文章来源地址https://www.toymoban.com/news/detail-783279.html

上个开源库是 vue-form-design基于Vue3的可视化表单设计器,拖拽式操作让你快速构建一个表单, 让表单开发简单而高效。

github地址 预览

到了这里,关于基于fabric.js的图片编辑器, 画布背景实现原理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • VsCode与Idea编辑器更换背景图

    目录 VsCode Idea VsCode 需要安装background插件 安装完成后,打开设置,搜索background 然后就可以在json文件进行图片设置,透明度等等 Idea 打开File - Settings  然后找到Appearance , 往下滑,找到BackGround Image,点击  然后就会弹出背景设置的弹窗

    2024年02月14日
    浏览(55)
  • 【NKeditor】富文本编辑器上传图片

    使用NKeditor富文本编辑器上传图片,同时上传到七牛云存储上。后端语言使用ThinkPHP。 下载地址:NKeditor: NKedtior是一款优秀的轻量级Web编辑器,基于 Kindedior 二次开发 里面的文档demo写的比较详细,可以直接使用,不过里面上传七牛云的代码不能用,所以我是自己写的。   把

    2024年02月10日
    浏览(55)
  • qt+opencv实现图片编辑器

    借助QLabel容器,进行显示图片作为背景,然后重写QLabel类实现矩形,直线和圆形的实现。opencv板块直接实现相关图片操作。 打开图片 裁切 改变亮度和对比度 顺时针旋转和逆时针旋转 重写的QLabel

    2024年02月16日
    浏览(43)
  • 秀米编辑器(xiumi)+百度编辑器(Ueditor) 集成 :解决集成问题,秀米编辑器导出到百度编辑器格式问题,图片保存到自己的服务器(阿里云OSS)

    1.集成前提条件:         1. 需要集成 百度编辑器 到环境中         2. https 环境下才可以导出数据到百度编辑器,如果不是https环境,会出现错误          然后我们开始讲解如何集成: 2.引入资源: //百度编辑器 需要修改的文件(配置与原始的配置不一样,后面

    2024年02月09日
    浏览(56)
  • wangEditor富文本编辑器图片/视频上传

    wangEditor 有丰富的 API 和足够的扩展性,允许我们自定义开发菜单、模块、插件等。在 Vue、React 中运用也很方便。因此本文介绍下vue中富文本上传图片和视频。 安装引入后富文本有显示上传图片按钮,点击上传后会报 没有配置上传地址 的错误,如下图所示: 所以自定义上传

    2024年02月15日
    浏览(60)
  • Unity 编辑器工具之批量设置图片压缩

    一个简单的工具,对Unity下的图片做批量压缩处理,主要有以下功能: 自动取消 \\\"Generte Mip Maps\\\" 勾选; 针对文件夹批量自动(或手动选择压缩格式)设置图片压缩并自动保存; 单个图片文件的压缩设置; 使用方法,右键单张图片(或者包含图片的文件夹) 会打开一个设置窗口 如下,窗口里会

    2024年02月10日
    浏览(46)
  • android项目实战之编辑器图片上传预览

    现状分析 项目的需求用到编辑器,编辑器中又可能用到图片上传功能。 实现方案 1. 增加依赖库,可以参考前面的几篇文章,都有描述。 2. 核心代码实现 欢迎点赞、收藏、转发。

    2024年02月04日
    浏览(66)
  • 一键切割,激发无限创意:体验全新图片批量编辑器

    在数字创意的时代,图片编辑成为了表达个性和创造力的关键。然而,传统的图片编辑工具常常让人望而生畏,复杂的操作和高门槛的技术要求使得许多人望而却步。现在,我们为您带来一款全新的图片批量编辑器,只需一键切割,就能释放您无限的创意火花! “图片批量编

    2024年03月18日
    浏览(49)
  • 图片编辑器tui-image-editor

    提示:图片编辑器tui-image-editor 需求:图片编辑器tui-image-editor ImageEditor.vue App.vue 问题: sass-loader 版本过高,导致tui-image-editor的css无法解析 解决方案: 报错内容: 踩坑路漫漫长@~@

    2024年03月10日
    浏览(49)
  • 若依框架图片上传、富文本框编辑器功能

    现在的需求是:实现一个项目展示模块,后端管理页面除了需要基础信息外,要加上一个 图片上传和富文本框编辑器功能 。 点击”图片存储地址”:可上传电脑任何位置的图片,并可对图片进行放大,缩小,和旋转。 存入数据库的图片以url地址存放 url直接百度可看到图片

    2024年04月13日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包