javascript - Oracle Apex - BLOB to jpg

Question

I'm trying to pass a jpg that I have stored in a table as a blob to the following javascript code:

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'
      }
    );
  }
}

I've tried get APEX_UTIL.GET_BLOB_FILE_SRC, but then the javascript code throws the error "Could not load image".

I then to use the following procedure:

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; 

Still the same error "Could not load image" and a new error "Whoops Status:204 No Content X-Content-Type-Options:nosniff X-Xss-Protection:1; mode=block Referrer-Policy:strict-origin Cache-Control:no-store Pragma:no-cache Expires:Sun, 27 Jul 1997 13:00:00 GMT X-Frame-Options:SAMEORIGIN".

So I'm not sure what I'm doing wrong or how to better go about doing this right.

Update: I've now tried "blob2clobbase64", but that doesn't seem to anything:

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;

The code I'm using for image loading:

    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);
            }
        }
    );

标签： javascriptoracleplsqloracle-apexoracle-apex-19.2

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;
            }
        }
    );
}