在最適化Forms中顯示DAM影像

常見的使用案例是以最適化表單內嵌顯示crx存放庫中的影像。

新增預留位置影像

第一個步驟是在面板元件前面加上預留位置div。 在下面的程式碼中，面板元件由其CSS類別名稱photo-upload識別。 JavaScript函式是與最適化表單相關聯的使用者端資料庫的一部分。 此函式是在檔案附件元件的初始化事件中呼叫。

/**
* Add Placeholder Div
*/
function addPlaceholderDiv(){

     $(".photo-upload").prepend(" <div class='preview'' style='border:1px dotted;height:225px;width:175px;text-align:center'><br><br><div class='text'>The Image will appear here</div></div><br>");
}

顯示內嵌影像

使用者選取影像後，隱藏欄位ImageName會填入選取的影像名稱。 然後，此影像名稱會傳遞至damURLToFile函式，該函式會呼叫createFile函式，將URL轉換為FileReader.readAsDataURL()的Blob。

/**
* DAM URL to File Object
* @return {string}
 */
 function damURLToFile (imageName) {
   console.log("The image selected is "+imageName);
     createFile(imageName);
}

async function createFile(imageName){
  let response = await fetch('/content/dam/formsanddocuments/fieldinspection/images/'+imageName);
  let data = await response.blob();
    console.log(data);
  let metadata = {
    type: 'image/jpeg'
  };
  let file = new File([data], "test.jpg", metadata);
     let reader = new FileReader();
    reader.readAsDataURL(file);
     reader.onload = function() {
    console.log("finished reading ...."+reader.result);

  };
    var image  = new Image();
    $(".photo-upload .preview .imageP").remove();
    $(".photo-upload .preview .text").remove();
    image.width = 484;image.height = 334;
    image.className = "imageP";
    image.addEventListener("load", function () {
      $(".photo-upload .preview")[0].prepend(this);
    });

    console.log(window.URL.createObjectURL(file));
    image.src = window.URL.createObjectURL(file);

  }

在您的伺服器上部署

• 下載並安裝 使用者端資料庫和範例影像 使用AEM Package Manager的AEM執行個體上。
• 下載並安裝 範例表單 使用AEM套件管理員在您電腦上的AEM執行個體。
• 將瀏覽器指向 FielInspectionForm
• 選取其中一個夾具
• 您應該會看到表單中顯示的影像

Business.Adobe.com 資源