【AdobeXD】プラグイン開発5 WebRequest
選択したアイテムにランダムな犬の画像を表示するチュートリアル
howToMakeNetworkRequests.js
const { ImageFill } = require("scenegraph");
const { showDialogY } = require("./dialog.js")
const applyImage = () => {
const { selection } = require("scenegraph");
if(selection.items.length) {
const url = "https://dog.ceo/api/breeds/image/random";
return fetch(url) // ..(1)
.then(res => res.json())
.then(jsonRes => downloadImage(selection, jsonRes));
}else{
showDialogY("Please select a shape to apply the downloaded image.");
}
}
const downloadImage = async (selection, jsonRes) => {
try{
const photoUrl = jsonRes.message;
const photoObj = await xhrBinary(photoUrl); // ..(2)
const photoObjBase64 = await base64ArrayBuffer(photoObj);
applyImagefill(selection, photoObjBase64); // ..(3)
}catch(err){
showDialogY("error:" + err.message);
}
}
const xhrBinary = (url) => {
return new Promise((resolve, reject) => {
const req = new XMLHttpRequest();
req.onload = () => {
if (req.status === 200) {
try {
const arr = new Uint8Array(req.response);
resolve(arr);
} catch (err) {
reject('Couldnt parse response. ${err.message}, ${req.response}');
}
} else {
reject('Request had an error: ${req.status}');
}
}
req.onerror = reject;
req.onabort = reject;
req.open('GET', url, true);
req.responseType = "arraybuffer";
req.send();
});
}
const applyImagefill = (selection, base64) => {
const imageFill = new ImageFill(`data:image/jpeg;base64,${base64}`);
selection.items[0].fill = imageFill;
}
const base64ArrayBuffer = (arrayBuffer) => {
let base64 = '';
const encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
const bytes = new Uint8Array(arrayBuffer);
const byteLength = bytes.byteLength;
const byteRemainder = byteLength % 3;
const mainLength = byteLength - byteRemainder;
let a;
let b;
let c;
let d;
let chunk;
// Main loop deals with bytes in chunks of 3
for (let i = 0; i < mainLength; i += 3) {
// Combine the three bytes into a single integer
chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
// Use bitmasks to extract 6-bit segments from the triplet
a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
b = (chunk & 258048) >> 12; // 258048 = (2^6 - 1) << 12
c = (chunk & 4032) >> 6; // 4032 = (2^6 - 1) << 6
d = chunk & 63; // 63 = 2^6 - 1
// Convert the raw binary segments to the appropriate ASCII encoding
base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
}
// Deal with the remaining bytes and padding
if (byteRemainder === 1) {
chunk = bytes[mainLength];
a = (chunk & 252) >> 2; // 252 = (2^6 - 1) << 2
// Set the 4 least significant bits to zero
b = (chunk & 3) << 4; // 3 = 2^2 - 1
base64 += `${encodings[a]}${encodings[b]}==`;
} else if (byteRemainder === 2) {
chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];
a = (chunk & 64512) >> 10; // 64512 = (2^6 - 1) << 10
b = (chunk & 1008) >> 4; // 1008 = (2^6 - 1) << 4
// Set the 2 least significant bits to zero
c = (chunk & 15) << 2; // 15 = 2^4 - 1
base64 += `${encodings[a]}${encodings[b]}${encodings[c]}=`;
}
return base64;
}
module.exports = {
applyImage
}
(1) 1度目のWebRequest, GETで犬の画像のURLを取得
(2) 2度目のWebRequest, 画像をとってくる
(3) 画像を選択されたアイテムに反映する。
ポイント
文字列をとってくるときはfetch
画像を取得するときはこのサンプルコピペすればよさそう
Author And Source
この問題について(【AdobeXD】プラグイン開発5 WebRequest), 我々は、より多くの情報をここで見つけました https://qiita.com/Teach/items/127ea60e03eebd2e651a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .