質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

Q&A

0回答

826閲覧

googleドライブの画像をp5.psで表示したい

m.takako

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

0グッド

0クリップ

投稿2019/10/17 04:27

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()では、表示ができています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tanishi_a

2019/10/19 07:26

分かってないで言ってますが、外部サイトから画像を取得する場合は CORS 用になにかしないと読みこめないような気がします。(アクセストークンを発行するとか?) https://github.com/google/google-api-javascript-client なので、 - CORS - Google Drive あたりのキーワードでググってみては? と思いました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問