Question

我正在努力将我的画布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

提前谢谢。

Answer 1

正如Jeffrey指出的那样，javasscript“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。没有内置功能可以快速完成此操作，但这又是一些人已经解决过的问题。 Tim Hall A script is provided here将CLOB转换为BLOB。

所以：

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

Oracle Apex Canvas以PNG格式将blob保存到项目中

1 个答案: