DEV Community: 秦少卫

🎉 Wow! Today my open source project reached 5K Star!

秦少卫 — Sat, 12 Oct 2024 03:41:49 +0000

https://github.com/ikuaitu/vue-fabric-editor

🎉 Wow! Today my open source project reached 5K Star! Along the way, there are challenges, sweat, and countless surprises. Thank you to every partner who has contributed to this project, and thank you to all the friends who have given attention and support. This milestone is the crystallization of our joint efforts. In the future, we will continue to move forward and make this project more brilliant! 💪

Develop mobile H5 image editor details using fabric.js

秦少卫 — Mon, 23 Sep 2024 01:22:52 +0000

Hello everyone! I am the author of the open-source image editor at https://github.com/ikuaitu/vue-fabric-editor. It is an open-source image editor based on the PC version.

Recently, many developers have asked whether the open-source image editor can be transformed into an H5 version image editor suitable for mobile terminals. Recently, as soon as the H5 version of the image editor was launched, I organized the implementation ideas and product details into notes and shared them for your reference.

Foundation

The basic functions of the open source image editor are available, such as switching templates, adding elements, custom fonts, etc., but compared to the interaction on the mobile side, there will be great differences, and a lot of modifications have been made. This note mainly shares the idea and details of the mobile image editor .

Outline

Switch templates.
Add images.
Add composite elements.
Set background color.
Modify canvas size.
Quick menu.
Property toolbar.
Special effect fonts.
Switch fonts.
Input text.
Text layout.
Border.
Shadow.
Download images.

Note: Some code examples are packaged code and are not native to fabric.js.

1. Switching template

The editor is developed based on fabric.js, and all templates are stored in json format. To switch templates, you only need to request the details interface and add the data in json format to the canvas. It is necessary to pay attention to the font name used in the template and load the font file before rendering. Otherwise the font style won't render properly.

const loadInfo = async (res: any) => {
  const info = res.data
  templName.value = info.name;
  await canvasEditor.getFontList(JSON.stringify(info.json));
  canvasEditor.loadJSON(JSON.stringify(info.json), () => LoadingPlugin(false));
};

2. Add picture

There are many ways to add pictures in fabric.js, we can use the simplest fabric.Image.fromURL, in addition, there are often pictures larger than the canvas, but also need to scale the picture according to the width of the canvas, more convenient for users to operate.

const toEditor = async (e: MouseEvent) => {
  visible.value = false
  LoadingPlugin(true)
  const item = await canvasEditor.createImgByElement(e.target as HTMLImageElement)
  await canvasEditor.addBaseType(item, { scale: true })
  LoadingPlugin(false)
}

3. Add combination element

Fabric.js supports exporting/importing individual elements in JSON format. If we store the exported data in the database, we can import it according to the element type when importing. We need to obtain the type of the element in JSON and call it as a method name. We also need to do font loading before importing and scaling after pouring.

const capitalizeFirstLetter = (str: string) => {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

const toEditor = async (item: ItemProps) => {
  visible.value = false
  LoadingPlugin(true)
  await canvasEditor.downFontByJSON(JSON.stringify(item.json));
  const el = JSON.parse(JSON.stringify(item.json));
  const elType = capitalizeFirstLetter(el.type);
  new fabric[elType].fromObject(el, (fabricEl: fabric.Object) => {
    canvasEditor.dragAddItem(fabricEl);
    LoadingPlugin(false)
  });
}

4. Set background color

Setting the background color is relatively simple. You can set the color according to the API of fabrics. It should be noted that most of the color components on the PC side do not adapt to the scene of mobile end H5, and do not support touch events. We used the "@jaames/iro" component, which performs well on mobile end and fully adapts to our scene. Its API is very flexible. We encapsulated it into a general color component and called it in multiple places.

<template>
  <div ref="pickerContainer">
  </div>
</template>

<script setup lang="ts">
import iro from '@jaames/iro';
const emit = defineEmits(['update:modelValue', 'change']);

const props = defineProps({
  modelValue: {
    type: String,
    default: '#000000'
  },
  width: {
    type: Number,
    default: 200
  }
});

const pickerContainer = ref<HTMLButtonElement | string>('');
let colorPicker: any = null;

onMounted(() => {
  // 创建iro.js颜色选择器
  colorPicker = iro.ColorPicker(pickerContainer.value, {
    width: props.width,
    color: props.modelValue,
    borderWidth: 1,
    borderColor: "#fff",
    layoutDirection: 'horizontal',
    layout: [
      {
        component: iro.ui.Slider,
        options: {
          id: 'hue-slider',
          sliderType: 'hue'
        }
      },
      {
        component: iro.ui.Box,
      },
      {
        component: iro.ui.Slider,
        options: {
          sliderType: 'alpha'
        }
      }
    ]
  });

  // 监听颜色变化事件并发射自定义事件
  colorPicker.on('color:change', (color: any) => {
    const rgbaString = color.rgbaString;
    emit('update:modelValue', rgbaString);
    emit('change', rgbaString);
  });
});

</script>

5. Modify canvas size


const resizeEditor = async () => {
    await nextTick()
    const editorWorkspase = document.querySelector('#workspace') as HTMLElement
    const popElement = document.querySelector('.my-editor-popup') as HTMLElement
    const headerElement = document.querySelector('.t-navbar') as HTMLElement
    if (popElement) {
      editorWorkspase.style.height = `calc(100vh - ${popElement?.offsetHeight + headerElement?.offsetHeight || 0}px)`
    } else {
      editorWorkspase.style.height = ''
    }
  }

6. Shortcut menu

Many shortcut operations need to be able to allow users to quickly find and complete the operation. We have added a shortcut menu function to the element to avoid allowing users to click on the bottom menu bar. When the element is selected, it will be automatically displayed and hidden when unchecked. It should be noted that the shortcut menu is not always above the element. The shortcut menu should be positioned according to the element position and the size of the canvas. When the menu exceeds the canvas area, we need to adjust the menu position in time. In addition, when the attribute pop-up box appears and the canvas size changes, the menu position needs to be modified synchronously.

// 更新位置信息
const upDatePosition = async () => {
  const activeObject = canvasEditor.canvas.getActiveObject();
  if (activeObject) {
    canvasEditor.canvas.renderAll();
    fixLeft.value = 10;
    fixTop.value = 10;
    await nextTick();
    isIncluded(activeObject);
    await nextTick();
  }
}

// 监听选中对象变化更新位置信息
getObjectAttr(upDatePosition)
canvasEditor.canvas.on('selection:updated', upDatePosition)
canvasEditor.canvas.on('mouse:move', upDatePosition)
canvasEditor.on('workspaceAutoEvent', upDatePosition)

7. Properties toolbar

Referring to other image editors, some properties will have modifiable options only after an element is clicked. When deselected, the options will be hidden. In addition, different selected elements will have different modifiable options. This is a very excellent interaction in making a complex image editor on mobile terminals.

We have encapsulated common selection types and methods, and set hiding/showing separately for each property component.

8. Special effect fonts

Special effect fonts are mainly a combination of the color, border, and shadow of text elements. We will export the JSON after setting the style of the text and save it in the database. When a certain special effect is selected, the attributes can be set to the element according to the data in the JSON.

const setStyle = (item: ImgItem) => {
  const activeObject = canvasEditor.canvas.getActiveObjects()[0];
  if (activeObject) {
    const values = toRaw(item.json);
    const keys = ['fill', 'stroke', 'strokeWidth', 'shadow', 'strokeLineCap'];
    activeObject.set('paintFirst', 'stroke');
    keys.forEach((key) => {
      activeObject.set(key, values[key]);
      if (key === 'fill' && typeof values[key] != 'string') {
        activeObject.set(key, new fabric.Gradient(values[key]));
      }
    });
    canvasEditor.canvas.renderAll();
  }
};

9. Switch font

To modify the font, you only need to call the'fontFamily 'property of the structure.js element. Make sure the font is loaded before modifying it.


const changeCommon = async (key: string, value: any) => {
  const activeObject = canvasEditor.canvas.getActiveObjects()[0];
  if (activeObject) {
    LoadingPlugin(true);
    baseAttr.fontFamily = value;
    try {
      await canvasEditor.loadFont(value)
    } catch (error) {
      console.log(error)
    }
    LoadingPlugin(false);
    activeObject && activeObject.set(key, value);
    canvasEditor.canvas.renderAll();
  }
};

10. Enter text

Fabric.js can be modified by double-clicking the text element directly, but this interaction is not noticeable in the mobile end. We have modified the text element separately. After selecting the element, the text box will pop up when clicking again. You can click the button in the bottom menu bar to modify it.

11. Text layout

Text typesetting is relatively simple. We only need to set the text properties according to the text properties of fabrics, such as fontSize, lineHeight, charSpacing, etc.

// 属性值
const baseAttr = reactive({

  fontSize: 0,
  lineHeight: 0,
  charSpacing: 0,
  textAlign: '',

  fontWeight: '',
  fontStyle: '',

  underline: false,
  linethrough: false,
  overline: false,
});

12. Border

The border style is similar to the text style, and it can be quickly implemented with the color component.

// 属性值
const baseAttr = reactive({
  stroke: '#fff',
  strokeWidth: 0,
  strokeDashArray: [],
});

13. Shadow

The reference attribute is mainly a modification of the shadow sub-attribute of the element. The code is as follows:

// 属性值
const baseAttr = reactive({
  shadow: {
    color: '#fff',
    blur: 0,
    offsetX: 1,
    offsetY: 1,
  }
});


// 通用属性改变
const changeCommon = () => {
  const activeObject = canvasEditor.canvas.getActiveObjects()[0];
  if (activeObject) {
    activeObject.set('shadow', new fabric.Shadow(baseAttr.shadow));
    canvasEditor.canvas.renderAll();
  }
};

14. Download image

fabric.js can export images in Png/Jpeg/Base64 formats. At the same time, for the JPEG format, the image quality and size multiple can also be specified. For details, please refer to the API documentation of fabric.js.

End

The above are the implementation details of developing a mobile editor with fabric.js. Combined with our open-source project and plug-in architecture, project development can be completed conveniently. If you are working on a similar project or doing a similar project, welcome to communicate with me.

Open source project：https://github.com/ikuaitu/vue-fabric-editor/blob/main/README-zh.md

fabric.js implements custom preview effects for clothing/merchandise

秦少卫 — Thu, 12 Sep 2024 03:47:42 +0000

Hello, I'm Qin Shaowei，vue-fabric-editor The author of the open source image editing project, many developers have asked me how to use fabric.js to achieve the preview effect of product customization , today to share with you the realization of ideas.

Preview image:

Most developers who develop such products will mention a keyword called POD, on-demand customization, which will simply modify the color and picture of the product through the design tool, and place an order directly to obtain their own unique goods.

What is a POD?

Print On Demand (POD) is a kind of order fulfillment method. The seller designs the product template in advance and puts it on the sales platform. After the order is issued, the product is ordered to the supplier for production and delivery.

There are four ways to customize product previews using fabric.js

Method 1: Hollow PNG material

This way is the most simple and convenient, only need to prepare the hollow png material, the layer is placed on the top of the layer is not operable, the custom pattern at the bottom of the layer, drag and drop modification can be done, the advantages are simple and convenient, the disadvantages are only for one part of the operation **.

Mode 2: png shadow + block + pattern overlay

If you want to further realize the custom design of multiple parts, different parts of the use of different custom drawings, the first scheme can not meet, then you can use transparent shadow + color block overlay pattern to achieve multiple positions of customization.

For example, such goods need two different customized patterns on the top and bottom.

We need to prepare the transparent shadow material at the top, add the color block area below and overlay the pattern:

Just put the original picture at the bottom.

Method 3: SVG + pattern/Color fill

fabric.js supports importing svg images, if it is a design file in SVG form, you only need to import it into the editor, modify the color of different areas or overlay patterns.

Method 4: Plan + 3D map

The last one is the plan design, the plan map to the 3D model, in order to make the effect more realistic, need to increase the light source, normal and other maps, from the implementation will not be too complicated, but the operating cost is relatively high, each SKU needs to do a 3D model **.

Reference Demo:

Finish

These are the 4 ideas for fabric.js to achieve clothing/product customization preview effect, if you are developing similar products, you can also use open source projects to quickly build your online product customization tools.

Open source project：github.com/ikuaitu/vue…
Experience preview：www.kuaitu.cc/#/

Develop an image editor using fabric.js 【series】

秦少卫 — Wed, 29 May 2024 02:47:52 +0000

Preview

Github

https://github.com/nihaojob/vue-fabric-editor

Handy Open source image editor

秦少卫 — Tue, 28 May 2024 01:28:12 +0000

This is a js version of the picture design tool, can be used for video cover, social media pictures, graphic printing and other scenes, the use of this tool does not require professional training, can let ordinary people easily master, design a beautiful poster.

It can import PSD, export JSON files, it is not a web version of PhontoShop, it is easier to apply than PS, let ordinary people easily use.

https://github.com/nihaojob/vue-fabric-editor

staff

Includes ruler, auxiliary line, automatic adsorption alignment

Canvas

The canvas can be adaptive when dragging the window, and can be zoomed out and dragged to meet editing needs

Shape element

Whether it is text, basic shapes, arrows, polygons, he can be drawn, very powerful

Templates and materials

Support template, material classification management, support custom text style, custom combination elements.

Multiple operation

Multiple elements can be aligned or created in combination.

Picture filter

Color/Border/Shadow/Transparency

Combine a variety of attributes to create a beautiful style

Font design

Font, color multiple properties

Watermark

Watermark can be set according to your own needs

Menu and shortcut keys

You can use menus and shortcut keys to operate

About me

I am the author of this project, I come from China, I have my own Chinese technical blog, unfortunately, because of my poor English, I can only use translation software to read and publish English articles, I am working hard to learn English, I hope this open source project can help you.