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

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

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

CreateJSは、HTML5でリッチコンテンツを制作できるJavaScriptライブラリ群です。JavaScriptの知識があれば、HTML5のCanvasをコントロールしコンテンツを作ることができます。

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

JavaScript

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

Q&A

解決済

1回答

7490閲覧

CreateJSのBitmapオブジェクトに、画像の幅や高さが入っていない時がある

wobbegong

総合スコア12

CreateJS

CreateJSは、HTML5でリッチコンテンツを制作できるJavaScriptライブラリ群です。JavaScriptの知識があれば、HTML5のCanvasをコントロールしコンテンツを作ることができます。

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

JavaScript

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

1グッド

1クリップ

投稿2016/07/08 10:35

###前提・実現したいこと
JavaScriptで、
(1) サーバ上の画像ファイルを読み込み、
(2) DataURLに変換して、
(3) createjs.Bitmapクラスとして操作したい。

###発生している問題・エラーメッセージ
Bitmapオブジェクトに画像の幅と高さが入っている時と入っていない時がある。

###該当のソースコード

JavaScript

1function () { 2 3 var file = "sample.png" 4 var image = new Image(); 5 6 image.onload = function() { 7 // (2) canvas の toDataURL メソッドを使って画像ファイルを DataURL に変換 8 var canvas = document.createElement("canvas"); 9 canvas.width = this.naturalWidth; 10 canvas.height = this.naturalHeight; 11 canvas.getContext('2d').drawImage(this, 0, 0); 12 13 var bitmap = new createjs.Bitmap(canvas.toDataURL('image/png')); 14 15 var w = bitmap.image.naturalWidth; // 値が入っていない事がある 16 var h = bitmap.image.naturalHeight; // 値が入っていない事がある 17 var w2 = bitmap.image.width; // 値が入っていない事がある 18 var h2 = bitmap.image.height; // 値が入っていない事がある 19 }; 20 21 // (1) Image クラスでサーバ上のファイルを読み込む 22 image.src = file; 23}

###試したこと
ネットで類似ケースを検索したところ、preloadjsを使って
事前にファイルをロードしておいた方がいいという意見があったので、
preloadjsのLoadQueueでファイルを読み込むパターンも
試したのですが、やはり時々値が入っていない時があります。

###補足情報(言語/FW/ツール等のバージョンなど)
サーバはFreeBSD 8.4、クライアントはWindows 7 64bit を使っています。
ブラウザはIE 11やChrome 51では起きず、Firefox 47のみで現象を
確認しております。

mondaminZ👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

一度Imageオブジェクトに入れてonloadで画像の展開が終わるのを待ってからにしてみてください。

Javascript

1var canvasImage = new Image(); 2canvasImage.onload = function() { 3 var bitmap = new createjs.Bitmap(canvasImage); 4 5 var w = bitmap.image.naturalWidth; // 値が入っていない事がある 6 var h = bitmap.image.naturalHeight; // 値が入っていない事がある 7 var w2 = bitmap.image.width; // 値が入っていない事がある 8 var h2 = bitmap.image.height; // 値が入っていない事がある 9 10}; 11canvasImage.src = canvas.toDataURL('image/png');

投稿2016/07/08 12:52

masaya_ohashi

総合スコア9206

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

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

wobbegong

2016/07/09 17:28

var bitmap = new createjs.Bitmap(canvas.toDataURL('image/png')); var w = bitmap.image.naturalWidth; // 値が入っていない事がある var h = bitmap.image.naturalHeight; // 値が入っていない事がある var w2 = bitmap.image.width; // 値が入っていない事がある var h2 = bitmap.image.height; // 値が入っていない事がある の5行を頂いたソースに変更したところ、現象が起きなくなりました。 まだしばらく注視する必要はありますが、今のところ効いているようです。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問