こんにちは、初めて質問させていただいています。
現状、下記のjavascriptコード(Run javascriptで使用)で、結合された写真がFile managerに作成されるところまでは出来ているのですが、その写真のURLが取得できていない状態です。
どなたかご教示いただけないでしょうか?
※javascriptのコードについて、いくつか補足しておきます。
・uploadedImage:Multi-FileUploaderにアップロードされた写真を格納している変数(Custom states,type:image,List)
・bubble_fn_uploadedImage:結合された写真のURLが入る変数(type:text)
[Run javascriptに記載しているコード]
(async function(){
// =========================
// Bubbleから画像URL取得
// =========================
const imageUrls = "screen's uploadedImage:format as text";
// "|" 区切りで配列化
const validUrls = imageUrls
.split("|")
.filter(url => url);
if(validUrls.length === 0){
alert("画像がありません");
return;
}
// =========================
// 画像ロード関数
// =========================
function loadImage(url){
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = "anonymous";
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
});
}
// =========================
// 全画像読込
// =========================
const images = [];
for(let i = 0; i < validUrls.length; i++){
const img = await loadImage(
validUrls[i]
);
images.push(img);
}
// =========================
// Canvas作成
// =========================
const canvas = document.createElement(
'canvas'
);
const ctx = canvas.getContext('2d');
// 画像サイズ
const size = 300;
// 2列表示
const cols = 2;
const rows = Math.ceil(
images.length / cols
);
canvas.width = cols * size;
canvas.height = rows * size;
// =========================
// 描画
// =========================
images.forEach((img, index) => {
const x = (index % cols) * size;
const y = Math.floor(index / cols) * size;
ctx.drawImage(
img,
x,
y,
size,
size
);
});
// =========================
// Base64化
// =========================
const mergedBase64 = canvas.toDataURL(
'image/jpeg',
0.8
);
// =========================
// Base64 → Blob
// =========================
function dataURLtoBlob(dataurl){
const arr = dataurl.split(',');
const mime = arr[0]
.match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob(
[u8arr],
{ type: mime }
);
}
const blob = dataURLtoBlob(
mergedBase64
);
// =========================
// Bubbleアップロード
// =========================
const formData = new FormData();
formData.append(
"file",
blob,
"merged.jpg"
);
const response = await fetch(
"https://aaaaaa.bubbleapps.io/version-test/fileupload",
{
method: "POST",
body: formData
}
);
const uploadedUrl =
await response.text();
// =========================
// Bubbleへ返却
// =========================
bubble_fn_uploadedImage(
uploadedUrl
);
})();