Oracle Apex - BLOB 到 jpg

Question

我正在尝试将我作为 blob 存储在表中的 jpg 传递给以下 javascript 代码：

class ImageLoader {
  constructor(imageWidth, imageHeight) {
    this.canvas = document.createElement('canvas');
    this.canvas.width = imageWidth;
    this.canvas.height = imageHeight;
    this.ctx = this.canvas.getContext('2d');
  }
  async getImageData(url) {
    await this.loadImageAsync(url);
    const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
    return imageData;
  }
  loadImageAsync(url) {
    return new Promise((resolve, reject) => {
      this.loadImageCb(url, () => {
        resolve();
      });
    });
  }
  loadImageCb(url, cb) {
    loadImage(
      url,
      img => {
        if (img.type === 'error') {
          throw `Could not load image: ${url}`;
        } else {
          // load image data onto input canvas
          this.ctx.drawImage(img, 0, 0)
          //console.log(`image was loaded`);
          window.setTimeout(() => { cb(); }, 0);
        }
      },
      {
        maxWidth: this.canvas.width,
        maxHeight: this.canvas.height,
        cover: true,
        crop: true,
        canvas: true,
        crossOrigin: 'Anonymous'
      }
    );
  }
}

我尝试过 get APEX_UTIL.GET_BLOB_FILE_SRC，但是 javascript 代码抛出错误“无法加载图像”。

然后我使用以下程序：

create or replace PROCEDURE get_file (p_file_name  IN VARCHAR2) IS 
  l_blob_content  UPLOADED_IMAGES.blob_content%TYPE; 
  l_mime_type     UPLOADED_IMAGES.mime_type%TYPE; 
BEGIN 
  SELECT blob_content, 
         mime_type 
  INTO   l_blob_content, 
         l_mime_type 
  FROM   UPLOADED_IMAGES 
  WHERE  filename = p_file_name; 
 
  sys.HTP.init; 
  sys.OWA_UTIL.mime_header(l_mime_type, FALSE); 
  sys.HTP.p('Content-Length: ' || DBMS_LOB.getlength(l_blob_content)); 
  sys.HTP.p('Content-Disposition: filename="' || p_file_name || '"'); 
  sys.OWA_UTIL.http_header_close; 
 
  sys.WPG_DOCLOAD.download_file(l_blob_content); 
  apex_application.stop_apex_engine; 
EXCEPTION 
  WHEN apex_application.e_stop_apex_engine 
    THEN RAISE; 
  WHEN OTHERS THEN 
    HTP.p('Whoops'); 
END; 

仍然是相同的错误“无法加载图像”和新错误“哎呀状态：204无内容X-Content-Type-Options：nosniff X-Xss-Protection：1; mode = block Referrer-Policy：strict-origin Cache -Control:no-store Pragma:no-cache 过期时间:Sun, 27 Jul 1997 13:00:00 GMT X-Frame-Options:SAMEORIGIN".

所以我不确定我做错了什么，或者如何更好地做正确的事情。

更新： 我现在尝试了“blob2clobbase64”，但这似乎没有什么：

declare
  l_image_clob clob;
  l_image_blob blob;
begin
  select BLOB_CONTENT
  into l_image_blob
  from UPLOADED_IMAGES
  where FILENAME = :P1_IMAGES;

  l_image_clob := apex_web_service.blob2clobbase64(
                    p_blob => l_image_blob
                  );
 
  apex_json.open_object;
  apex_json.write('imageBase64', l_image_clob );
  apex_json.close_object;
end;

我用于图像加载的代码：

    const imageSize = 224;
    const imageBLOB = new Image();
    
    // Load image.
    apex.server.process(
        "get_file",
        {},
        {
            success: function(data) {
                imageBLOB.src = 'data:image/jpeg;base64,' + data.imageBase64;
const imageLoader = new ImageLoader(imageSize, imageSize);
    const imageData = await imageLoader.getImageData(imageBLOB);
            }
        }
    );

Answer 1

我让它工作了。我最终使用了“blob2clobbase64”进程，而不是使用 ImageLoader 类，而是使用了画布中的 getImageData 。 PL/SQL 相同，但 JavaScript 不同：

const imageSize = 224;

var newImageDate;

function returnImageData(imageData){
    return newImageDate = imageData;
}

async function runImageExample(){
    apex.server.process(
        "get_image", {}, {
            success: async function(data) {
                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                var imageBLOB = new Image();

                imageBLOB.onload = function() {
                    imageBLOB.crossOrigin = "Anonymous";
                    ctx.drawImage(imageBLOB, 0, 0, imageSize, imageSize);
                    var imgData = ctx.getImageData(0, 0, imageSize, imageSize);
                    returnImageData(imgData.data); 
                };

                imageBLOB.src = 'data:image/jpeg;base64,' + data.photoBase64;
            }
        }
    );
}

Answer 2

您能具体解释一下您是如何让它发挥作用的吗？ 我正在尝试合并到 APEX 中，并将生成的 PDF 条形码转换为 JPG。