Oracle Apex Canvas 以 PNG 格式保存到项目的 blob答案

【问题标题】：Oracle Apex Canvas to blob in PNG format saved to itemOracle Apex Canvas 以 PNG 格式保存到项目的 blob
【发布时间】：2014-11-18 19:11:12
【问题描述】：

我正在努力将我的画布 URL 转换为 blob 格式，特别是 PNG 格式。当我在没有转换代码的情况下对其进行测试时，DataURL 的生成非常完美，但在尝试将其转换为 Blob 时出现了问题。我正在使用一个 html 按钮来触发带有 ID buttonTextArea 的 JavaScript 函数。

我需要将 Blob 文件链接到我的 APEX 页面项目，我使用 $s('P9_IMAGE_CODE', Blob) 格式，当我仅使用文本对其进行测试时也可以使用。处理完页面后，该项目将被发送到我的表中的 blob 列中。

这是我的代码：

$("#buttonTextArea").click(function(dataURL) {
var BASE64_MARKER = ';base64,';
var canvas  = document.getElementById('myCanvas');
var dataURL = canvas.toDataURL();
    if (dataURL.indexOf(BASE64_MARKER) == -1) {
       var parts = dataURL.split(',');
       var contentType = parts[0].split(':')[1];
       var raw = decodeURIComponent(parts[1]);

         return new Blob([raw], {type: contentType});
}

         var parts = dataURL.split(BASE64_MARKER);
         var contentType = parts[0].split(':')[1];
         var raw = window.atob(parts[1]);
         var rawLength = raw.length;

         var uInt8Array = new Uint8Array(rawLength);

            for (var i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
}

     return new Blob([uInt8Array], {type: contentType});
     document.getElementById("textArea").value = dataUrl;


    $s('P9_IMAGE_CODE', Blob); --P9_IMAGE_CODE IS THE ITEM ON MY PAGE

});

我一直在尝试以下示例： https://github.com/blueimp/JavaScript-Canvas-to-Blob/blob/master/README.md 和 https://code.google.com/p/chromium/issues/detail?id=67587

提前谢谢你。

【问题讨论】：

您所指的“Blob”是这个东西：developer.mozilla.org/en-US/docs/Web/API/Blob 它不会像这样转换为 $s 的字符串。它与 Oracle BLOB 不同。我怀疑您需要编写更多代码（例如，使用 FileReader 或其他东西，我不知道）将其转换为适合发布到 Apex 的格式。
是的，这对你来说可能是一个很好的起点talkapex.com/2012/08/…

标签： javascript html oracle canvas oracle-apex

【解决方案1】：

正如 Jeffrey 指出的，javascript“Blob”与 Oracle BLOB 数据类型不同。

toDataURL 函数已经返回一个 base64 编码的字符串，所以您需要做的是保存该字符串，然后在提交后将其转换为真正的 blob。将其发送到数据库可能有点问题，因为项目内容的限制为 32k 字节。这意味着您可能必须将字符串分块发送到数据库。那么这不是一个 VARCHAR2（也有 32k 的限制）而是一个 CLOB。
正如韦斯利指出的那样，有一些解决方法。 The blog he linked to 就是这样一个例子。还有a plugin to facilitate the handling of clobs in apex。

将 base64 字符串导入数据库后，您必须将其转换为真正的 blob。没有内置的可以快速做到这一点，但这又是几个人已经解决的问题。 A script is provided here Tim Hall 将 CLOB 转换为 BLOB。

所以：

在浏览器中，获取dataURL，这是一个base64编码的字符串
将它分块发送到数据库，在那里它将是一个 CLOB
发送完所有内容后，将 CLOB 转换为 BLOB 并保存它在你的桌子上

【讨论】：