InnovationLab/public/assets/js/faceFusionAPI.js

/**
 *
 * @authors Eric Hsiao
 *
 */

const FaceFusionAPI = function () {
  // private menbers
  const API__DOMAIN = (window.location.host === 'www.pxfreshdelivery.tw') ? 'https://www.pxfreshdelivery.tw/' : 'https://demo.pxfreshdelivery.tw/';
  let templateData;
  let photoData;
  let faceFusionAlpha = 0.29;

  let callback = function () {};
  let errorCallBack = function () {};

  // private methods
  function init() {
    console.log('faceFusion is loaded.');
  }

  function start(_templateURL, _photoData, _faceFusionAlpha, _callback, _errorCallBack) {
    photoData = _photoData;
    faceFusionAlpha = _faceFusionAlpha;
    callback = _callback;
    errorCallBack = _errorCallBack;
    templateData = getBase64Image(_templateURL);

    // console.log('faceFusionAPI 啟動');
    // faceFusion();
  }

  function faceFusion() {
    const templateData_BASE64 = templateData.replace(/^data:image\/\w+;base64,/, ''); // 去掉base64標頭
    const photoData_BASE64 = photoData.replace(/^data:image\/\w+;base64,/, ''); // 去掉base64標頭
    console.log('faceFusionAPI 發送中...');

    $.ajax({
      type: 'POST',
      url: `${API__DOMAIN}web/faceMerge`,
      data: {
        version: '4.0',
        alpha: faceFusionAlpha,
        image_template: {
          image: templateData_BASE64,
          image_type: 'BASE64',
        },
        image_target: {
          image: photoData_BASE64,
          image_type: 'BASE64',
        },
      },
      dataType: 'json',
      success(response) {
        console.log(response);

        if (response.error_msg == 'SUCCESS') {
          const _merge_image = `data:image/png;base64,${response.result.merge_image}`;
          // $('.faceFusion').attr('src', _merge_image);
          callback(_merge_image);
        } else {
          console.log('faceFusionAPI 失敗重送');
          errorCallBack('融合失敗, 是否要再試一次？');
          // if (confirm('融合失敗, 是否要再試一次？') ) {
          //   faceFusion();
          // }
          // setTimeout(function () {
          //   faceFusion();
          // }, 1000);
        }
      },
      error(XMLHttpRequest, textStatus, errorThrown) {
        console.log(`Status: ${textStatus}, Error: ${errorThrown}`);
      },
    });
  }

  // constructor
  function getBase64Image(imgURL, width, height) {
    // width、height調用時傳入具體像素值，控制大小 ,不傳則默認圖像大小

    const img = new Image();
    img.onload = function () {
      const canvas = document.createElement('canvas');
      canvas.width = width || img.width;
      canvas.height = height || img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      const dataURL = canvas.toDataURL('image/jpg', 1.0);
      templateData = dataURL;
      // console.log('dataURL', dataURL);

      console.log('faceFusionAPI 啟動');
      faceFusion();
    };
    img.setAttribute('crossOrigin', 'Anonymous');
    img.src = imgURL;
  }

  {
    // $(document).ready(function () {
      init();
    // });
  }

  // public

  return {
    start(_templateURL, _photoData, _faceFusionAlpha, _callback, _errorCallBack) {
      start(_templateURL, _photoData, _faceFusionAlpha, _callback, _errorCallBack);
    },
  };
};