影像編輯器

影像編輯器是AEM的核心部分,可由元件運用,以利內容作者控制影像。

注意

若要使用本文所述的影像編輯器功能,必須安裝功能套件24267

影像地圖的相對單位

「影像編輯器」會將影像對映區域保留為絕對和相對單位。 當在響應式影像元件中作為用於動態地調整客戶端上的影像映射(相對於影像大小)的資料屬性提供相對單位時,該相對單位是有用的。

imageMap屬性

影像地圖座標會由影像編輯器以imageMap屬性的形式保存至JCR。 其格式如下。

屬性會儲存地圖區域,如下所示:

[area1][area2][...]

區域格式:

[SHAPE(COORDINATES)"HREF"|"TARGET"|"ALT"|(RELATIVE_COORDINATES)]

範例:

[rect(0,0,10,10)"https://www.adobe.com"|"_self"|"alt"|(0,0,0.8,0.8)]
[circle(10,10,10)"https://www.adobe.com"|"_self"|"alt"|(0.8,0.8,0.8)]

支援SVG影像

影像編輯器支援可縮放向量圖形(SVG)。

  • 支援從DAM拖放SVG資產,以及從本機檔案系統上傳SVG檔案。

按MIME類型啟用插件

在某些情況下,編寫動作必須針對特定MIME類型加以限制,因為伺服器端處理缺乏支援。 例如,可能不允許編輯SVG影像。

在個別外掛程式的設定節點上設定supportedMimeTypes屬性,即可透過MIME類型選擇性啟用「影像編輯器」中的外掛程式。

範例

例如,假設裁切功能僅適用於GIF、JPEG、PNG、WEBP和TIFF影像。

然後,必須將supportedMimeTypes屬性設定為映像元件cq:editConfig節點上插件的配置節點上允許的MIME類型的字串。

/apps/core/wcm/components/image/v2/image/cq:editConfig

 jcr:primaryType="cq:EditConfig">
     <cq:dropTargets jcr:primaryType="nt:unstructured">
         <image ...>
            ...
         </image>
     </cq:dropTargets>
     <cq:inplaceEditing
         jcr:primaryType="cq:InplaceEditingConfig"
         active="{Boolean}true"
         editorType="image">
         <config jcr:primaryType="nt:unstructured">
             <plugins jcr:primaryType="nt:unstructured">
                 <crop
                     jcr:primaryType="nt:unstructured"
                     supportedMimeTypes="[image/gif,image/jpeg,image/png,image/webp,image/tiff]"
                     features="*">
                     <aspectRatios jcr:primaryType="nt:unstructured">
                        ...
                     </aspectRatios>
                 </crop>
                 ...
             </plugins>
             <ui jcr:primaryType="nt:unstructured">
                 ...
             </ui>
         </config>
     </cq:inplaceEditing>
 </jcr:root>

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now