使用fabric.js 开发移动端 H5 图片编辑器

大家好，我是开源图片编辑器的 github.com/ikuaitu/vue… 的作者，它是一款基于PC版本的开源图片编辑器。

最近很多开发者咨询，是否可以将开源图片编辑器改造为一款适用于移动端的H5版本图片编辑器，最近H5版本的图片编辑器刚刚上线，就将实现思路和产品细节整理成笔记分享出来，供大家参考。

开源的图片编辑器的基本功能都有了，例如切换模板、添加元素、自定义字体等，不过相较于移动端的交互会有很大的差异，做了很多改造，这次笔记主要分享一下移动端图片编辑器实现思路和细节。

  1. 切换模板
  2. 添加图片
  3. 添加组合元素
  4. 设置背景色
  5. 修改画布尺寸
  6. 快捷菜单
  7. 属性工具条
  8. 特效字体
  9. 切换字体
  10. 输入文字
  11. 文字排版
  12. 边框
  13. 阴影
  14. 下载图片

注：部分代码示例为封装后的代码，非fabric.js原生方法。

编辑器基于 fabric.js 开发，所有的模板都是以json 的格式存储，切换模板只需要请求详情接口，将json格式的数据调添加到画布当中即可，需要注意的点是需要将模板中使用的字体名称，并加载字体文件后再进行渲染，否则字体样式没办法正常渲染。

fabric.js 中添加图片提供了很多种方法，我们使用通过最简单的fabric.Image.fromURL即可，另外，经常有图片尺寸大于画布的情况，还需要将图片按画布宽度的一般进行缩放，更方便用户操作。

fabric.js 支持将单个元素按照 JSON 格式导出/导入，我们将导出的数据存储在数据库中的，导入时按元素类型导入即可，需要获取 JSON 中元素的类型，并作为方法名调用，同样需要在导入前做字体加载，倒入后做缩放。

设置背景色较为简单，按照 fabric.js 的 API 设置颜色即可，需要注意的是大部分 PC 端的颜色组件并不适配移动端H5的场景，不支持touch事件，我们使用了 @jaames/iro这个组件，它在移动端表现出色，完全适配我们的场景，而且它的 API 很灵活，我们将它封装成一个通用的颜色组件，在多处调用。

日常使用图片编辑器都有修改画布尺寸的需要，在开源项目中已经封装好了相应的方法，直接调用即可，需要注意的是，当修改尺寸弹框弹出时，为了达到所见即所得的效果，要避免弹框遮挡画布，其他属性修改同理。

很多快捷操作需要能够让用户快速找的并完成操作，我们为元素添加了快捷菜单功能，避免让一些简单的操作让用户在底部菜单栏点来点去，当选中元素时自动展示，取消选中时隐藏即可，需要注意的是在快捷菜单并不总是在元素上方，快捷菜单应该根据元素位置和画布的尺寸进行定位，当菜单超出画布区域时我们要及时调整菜单位置；另外 当属性弹框出现，画布尺寸变化时，需要同步修改菜单位置。

参考了其他图片编辑器，部分属性在点击元素后才会出现可修改选项，取消选中时便隐藏选项，另外 选中的元素不同，可修改选项也不同，这是一个在移动端做复杂图片编辑器中非常棒的一个交互。

我们封装了通用的选中类型和方法，针对每个属性组件单独设置隐藏/展示。

特效字体主要是文字元素的颜色、边框、阴影的组合，我们将来文字设置样式后的 JSON 导出并保存在数据库中，当选中某一个特效时，将属性按 JSON 中的数据设置给元素即可。

修改字体只需要调用 fabric.js元素的fontFamily属性即可，在修改之前要确保字体加载完成。

fabric.js 可直接双击文字元素进行修改，不过在移动端这种交互并不醒目，我们单独为文本元素进行了修改，选中元素后，再次点击时弹出输入框，可以在底部菜单栏点击按钮进行修改。

文字排版较为简单，我们只需要按照 fabric.js的文字属性对文字进行属性设置即可，如fontSize、lineHeight、charSpacing等。

边框样式和文字样式类似，配合颜色组件可以很快捷的实现功能。

引用属性主要是元素的shadow子属性的修改

fabric.js 可以导出 Png/Jpeg/Base64格式的图片，同时 JPEG格式还可以指定图片质量与尺寸倍数，详见 fabric.js 的 API 文档。

以上就是 fabric.js 开发移动端编辑器的实现细节了，结合我们的开源项目和插件化架构可以很方便的完成项目开发，如果你在做类似项目或者做类似的项目，欢迎与我交流。

开源项目：https://github.com/ikuaitu/vue-fabric-editor

在Vue.js + Element UI的表格中优雅地实现图片放大功能

在Web应用中，表格常常用于展示数据集，而图片则是数据可视化的重要组成部分。为了提升用户体验，我们通常需要允许用户在不跳转页面的情况下，直接从表格中查看图片的原始尺寸。本文将引导你通过Vue.js和Element UI，轻松实现这一功能。

首先，确保你的项目已经集成了Vue.js和Element UI。如果你还没有安装它们，可以通过npm或yarn来添加：

接下来，让我们开始构建我们的表格和图片查看器。

创建一个简单的表格，并在每一行中加入一个<el-image>组件。这个组件将显示图片的缩略图。

为了在点击图片时弹出大图，我们需要添加一个<el-dialog>组件，并在其中嵌入一个全尺寸的<el-image>。

我们需要在缩略图上绑定一个click事件，以便在点击时打开弹窗并加载原图。

让我们快速了解一下上述代码中<el-image>和<el-dialog>组件的工作原理。<el-image>组件使用src属性加载图片，并且可以通过fit属性控制图片的适应方式。当用户点击图片时，@click事件触发showImage方法，该方法将dialogImageUrl设置为目标图片的URL，并显示<el-dialog>。

<el-dialog>组件使用title属性设置对话框的标题，visible.sync属性用于控制对话框的显示和隐藏。当dialogImageUrl被设置后，对话框中的<el-image>组件将加载对应的图片，从而实现预览效果。

通过上述步骤，我们成功地在Vue.js + Element UI的环境中实现了一个交互式图片预览功能。这种方法不仅提高了用户体验，同时也展示了Vue.js和Element UI的强大组合能力。希望这篇指南能帮助你在自己的项目中轻松实现类似的功能，提升应用的美观性和实用性。

以上教程不仅提供了代码示例，还深入解析了实现机制，适合希望在Vue.js项目中加入图片预览功能的开发者参考。如果你有任何疑问或改进意见，欢迎在评论区留言讨论。

使用Javascript来创建一个响应式的超酷360度全景图

  • 360度的全景图片效果常常可以用到给客户做产品展示，今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程，这里教程中将使用javascript来打造一个超酷的全景幻灯实现，相信大家一定会喜欢的！

在这个教程中没有使用到任何插件，我们将使用HTML，css和javascript来实现，当然，也使用是jQuery这个框架！

如何实现？

我们将使用预先按照360生成的图片进行轮播来实现动画展示效果。包含了180个图片。所以加载时间可能比较长。

代码实现

我们将在css代码中添加media queries，来使得这个效果可以同时在ipad和iphone上实现。

1. 代码文件

我们添加js，css，图片目录。css目录中包含了reset.css。js中包含了jQuery。代码文件如下：

2. 新的项目

创建一个HTML文件index.html。在<head>中我们设置了移动设备的viewport，使得内容不支持缩放。添加俩个文件

reset.css和threesixty.css。包含了自定义的css样式。

<!DOCTYPE html><html lang=\”en\”><head>    <meta charset=\”utf-8\”>    <meta name=\”viewport\” content=\”initial-scale=1.0, maximum-scale=1.0\” />    <title>360</title>    <link rel=\”stylesheet\” href=\”css/reset.css\” media=\”screen\” type=\”text/css\” />    <link rel=\”stylesheet\” href=\”css/threesixty.css\” media=\”screen\” type=\”text/css\” /></head><body> </body></html>

3. 加载进度条

创建一个<div>来容纳幻灯。其中包含一个<ol>，用来包含图片序列<li>，同时也包含了一个<span>来显示进度条。我们将使用javascript来动态加载图片。

<!DOCTYPE html><html lang=\”en\”><head>    <meta charset=\”utf-8\”>    <meta name=\”viewport\” content=\”initial-scale=1.0, maximum-scale=1.0\” />    <title>360</title>    <link rel=\”stylesheet\” href=\”css/reset.css\” media=\”screen\” type=\”text/css\” />    <link rel=\”stylesheet\” href=\”css/threesixty.css\” media=\”screen\” type=\”text/css\” /></head><body>    <div id=\”threesixty\”>        <div id=\”spinner\”>            <span>0%</span>        </div>        <ol id=\”threesixty_images\”></ol>    </div></body></html>

4. 添加互动

代码最后，我们添加jQuery用来处理互动，threesixity.js用来处理图片幻灯。

<!DOCTYPE html><html lang=\”en\”><head>    <meta charset=\”utf-8\”>    <meta name=\”viewport\” content=\”initial-scale=1.0, maximum-scale=1.0\” />    <title>360</title>    <link rel=\”stylesheet\” href=\”css/reset.css\” media=\”screen\” type=\”text/css\” />    <link rel=\”stylesheet\” href=\”css/threesixty.css\” media=\”screen\” type=\”text/css\” /></head><body>    <div id=\”threesixty\”>        <div id=\”spinner\”>            <span>0%</span>        </div>        <ol id=\”threesixty_images\”></ol>    </div>        <script src=\”js/heartcode-canvasloader-min.js\”></script>    <script src=\”js/jquery-1.7.min.js\”></script>    <script src=\”js/threesixty.js\”></script></body></html>

5. 样式

我们添加threesixty.css文件。reset.css用来设置缺省的样式。首先定义#threesixty包装。缺省的图片幻灯是960×450。水平垂直居中。

#threesixty {    position:absolute;    overflow:hidden;    top:50%;    left:50%;    width:960px;    height:540px;    margin-left:-480px;    margin-top:-270px;}#threesixty_images {    display: none;}

全部代码请见原文：http://www.gbtags.com/gb/share/5799.htm

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科