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/#/