p5.psで画像表示を検討しています。
jsファイルと同じディレクトリーの画像は表示できますが、
googleドライブに保存した画像ファイルを指定すると、画像を読み込めません。
どうしたら読み込めるか。ご教授願います。
●プログラムファイル
・「HTML」フィル <p> <canvas id="canvas1" width=500 height=300 style="border: 1px solid;"></canvas> </p> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script> <script src="No1.js"></script> ・「No1.js」ファイル /* 以下、p5.jswowoを利用しない方法 こちらでは表示できてます */ var img01 = new Image(); var img02 = new Image(); img01.src = "https://drive.google.com/uc?id=省略"; var context; function init(){ var canvas = document.getElementById('canvas1'); if (canvas.getContext) { context = canvas.getContext('2d'); } context.drawImage(img01, 100, 10, 100, 100); } /* 以下、p5.jsの利用 */ img03 = new Image(); // setup()より先に呼び出される function preload() { // p5.jsを利用しない方法を実行 init(); //P5.js用に、画像を呼び出す部分(確認は①~③のコメントを外して行った) //方法①:呼び込み→表示可能 img03 = loadImage("01.jpg"); //方法②:表示不可(Loadingで画面が止まる) // img03 = loadImage("https://drive.google.com/uc?id=省略"); //方法③:表示不可(何も表示されない) // img03.src = "https://drive.google.com/uc?id=省略"; } function setup() { // 読み込む画像のサイズは480 x 240 createCanvas(720, 440); } // イメージをキャンバスに描画する function draw() { image(img03, 50, 50, 100, 100); }
●読み込みは、次の部分で行っています。
//P5.js用とに、画像を呼び出す。
//方法①:呼び込み→表示可能
img03 = loadImage("01.jpg");
//方法②:表示不可(Loadingで画面が止まる)
// img03 = loadImage("https://drive.google.com/uc?id=省略");
//方法③:表示不可(何も表示されない)
// img03.src = "https://drive.google.com/uc?id=省略";
●結果とエラー表示
●方法①~方法③をコメントを外して、順次テストをした結果は
<方法①の場合>
・問題なく表示されます。
下図がその画面(上はinit()部分で表示、下は、直下の画像をp5.jsで表示)
<方法②の場合>
・画面は、「Loading....」が表示され止まります。
・エラーメッセージ
error { target: img, isTrusted: true, srcElement: img, currentTarget: img, eventPhase: 2, bubbles: false, cancelable: false, returnValue: true, defaultPrevented: false, composed: false, … }
p5.min.js:3:293972
詳細
error
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
explicitOriginalTarget: <img crossorigin="Anonymous" src="https://drive.google.com…L省略">
isTrusted: true
originalTarget: <img crossorigin="Anonymous" src="https://drive.google.com…L省略">
returnValue: true
srcElement: <img crossorigin="Anonymous" src="https://drive.google.com…L省略">
target: <img crossorigin="Anonymous" src="https://drive.google.com…L省略">
timeStamp: 4227
type: "error"
<get isTrusted()>: function isTrusted()
<prototype>: EventPrototype { composedPath: composedPath(), stopPropagation: stopPropagation(), stopImmediatePropagation: stopImmediatePropagation(), … }
p5.min.js:3:293972
<方法③の場合>
・何も表示されません。
・エラーメッセージ
TypeError: l is undefinedp5.min.js:3:244812
詳細
image https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js:3
image https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js:3
<匿名> self-hosted:1011
draw http://127.0.0.1:5500/No1.js:40
redraw https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js:3
_draw https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js:3
<匿名> self-hosted:1001
_runIfPreloadsAreDone https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js:3
_start https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js:3
<匿名> self-hosted:1001
m https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js:3
n https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js:3
●テスト環境
・VSコードのLiveServerで起動
・ファイルは作業フォルダーに
No1.html 起動用HTMLファイル
No1.js JSファイル
01.jpg 表示する
googleドライブの画像ファイルの公開範囲は全員で、JSファイルのinit()では、表示ができています。
あなたの回答
tips
プレビュー