[WordPress] 外掛分享： DanhThong Print Design Upload

內容簡介

總結：
DanhThong Print Design Upload為WooCommerce產品添加了一個簡單的產品自定義工具。它提供了許多功能，包括設置單獨的產品設計上傳、客戶在產品頁面上傳圖片、將上傳的圖片添加為可移動/可調整大小的圖層，以及導出設計文件並附加到購物車項目。

問題與答案：
1. DanhThong Print Design Upload主要提供了什麼功能？
- 可以為每個產品啟用/禁用設計上傳
- 客戶可以在產品頁面上傳圖片
- 上傳的圖像會添加為可以移動/調整大小的圖層在畫布上
- 可將產品圖像用作畫布背景
- 新功能(v1.0.1)：支援剪裁遮罩以限制可編輯的設計區域
- 提供視覺覆蓋框以清楚顯示允許的設計區域
- 最終合併的設計將以PNG格式導出並保存在購物車項目中
- 可在管理訂單屏幕上顯示設計文件
- 提供簡單的lightbox支援以查看上傳的圖像

2. 從版本1.0.1開始，Clip Mask支援具體是指什麼？
- 可以選擇性地上傳一個剪裁遮罩圖像，以限制客戶可以放置和預覽設計的區域
- 建議格式：PNG
- 透明區域=允許的設計區域
- 不透明區域=隱藏/限制區域
- 畫布預覽和導出的PNG尊重定義的剪裁邊界

3. 如何使用DanhThong Print Design Upload？
- 前往WooCommerce→Product Design Upload Settings(wp-admin/admin.php?page=wcpdu-settings)，啟用允許客戶上傳設計的選項
- 前往Products→Edit product
- 為該產品啟用設計上傳選項
- (選擇性)上傳一個Clipping Mask Image以限制可編輯的區域
- 在產品頁面上，點擊"自定義"按鈕
- 上傳圖像，在允許的區域內移動/縮放，然後點擊"應用"
- 加入購物車，合併的PNG會保存並附加到購物車項目和訂單項目meta。

外掛標籤

開發者團隊

原文外掛簡介

DanhThong Print Design Upload adds a simple product customizer to WooCommerce products.
Features:
* Enable/disable design upload per product.
* Customer uploads an image on the product page.
* The uploaded image is added as a movable/resizable layer on a canvas (Fabric.js).
* The product image can be used as the canvas background.
* NEW (v1.0.1): Clip mask support to restrict the editable design area.
* Visual overlay frame to clearly indicate the allowed design region.
* The final merged design is exported as PNG and stored with the cart item.
* Design files can be displayed in the admin order screen (per order item).
* Lightweight lightbox support for viewing uploaded images.
This plugin is designed for stores that sell personalized products (e.g., t-shirts, mugs, phone cases, posters).
Clip Mask (New in v1.0.1)
Starting from version 1.0.1, you can optionally upload a clipping mask image per product to limit where customers can place and preview their designs.

Recommended format: PNG
Transparent area = allowed design region
Opaque area = hidden / restricted region
The canvas preview and exported PNG respect the defined clipping boundaries

This helps ensure designs stay within printable areas and improves print accuracy.
Third-party libraries
This plugin bundles Fabric.js for the canvas editor functionality.
Fabric.js is licensed under the MIT License. The Fabric.js license file is included in the plugin package.
Usage

Go to WooCommerce → Product Design Upload Settings (wp-admin/admin.php?page=wcpdu-settings) and enable the option to allow customers to upload designs.
Go to Products → Edit product.
Enable the design upload option for that product.
(Optional) Upload a Clipping Mask Image to restrict the editable area.
On the product page, click the “Customize” button.
Upload an image, move/scale it within the allowed area, then click “Apply”.
Add to cart. The merged PNG is saved and attached to the cart item and order item meta.