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

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

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

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

4803閲覧

複数のcanvasを一つのcanvasに合成したい

naoyatsuchida

総合スコア3

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/06/30 10:28

やりたい事

タイトルに書かせていただいています通り、画像を表示するために使用したcanvasとその上に線を引くために使用したcanvasの二つを一つのcanvasに合成したいのですがうまく表示する事ができません。

php

1show.blade.php 2 3 @foreach($maps as $map) 4 <span class="show__img__no"> 5 NO:{{$loop->iteration}} 6 </span> 7 <div class='show__img__clear'> 8 <button class='btn-primary' id="clear-button{{$loop->iteration}}"><span>NO:{{$loop->iteration}}を削除</span></button> 9 </div> 10 11 12 <div class="show__img__map" id="canvas_container"> 13 <form action="#" > 14 <input type="hidden" id='pass{{$loop->iteration}}' value="{{asset($map->path)}}" class="img_pass"> 15 <input type="hidden" id='count' value="{{$loop->count}}" class="img_pass"> 16 </form> 17 18 <canvas id='CanvasMap{{$loop->iteration}}' ></canvas>//画像を表示する 19 <canvas id="CanvasDraw{{$loop->iteration}}"></canvas>//線を表示する 20 <canvas id="Image{{$loop->iteration}}" style="display: none;"></canvas>//合成用のcanvas 21 22 23 24 </div> 25 26 @endforeach

javascriptのファイルは以下になります。

javascript

1 document.querySelector("#submit").addEventListener("click", ()=>{ 2 concatCanvas(`Image${step}`,[`#CanvasMap${step}`,`#CanvasDraw${step}`]); 3 }); 4 5 //複数のcanvasを一つのcanvasに統合する 6 async function concatCanvas(base,asset){ 7 8 const can = document.getElementById(base); 9 10 const ctx = can.getContext("2d"); 11 12 for(let i=0; i<asset.length; i++){ 13 const image1 = await getImagefromCanvas(asset[i]); 14 15 16 ctx.drawImage(image1, 0, 0, can.width, can.height); 17 } 18 } 19 20 function getImagefromCanvas(id){ 21 return new Promise((resolve, reject) => { 22 const image = new Image(); 23 const ctx = document.querySelector(id).getContext("2d"); 24 25 image.onload = () => resolve(image); 26 image.onerror = (e) => reject(e); 27 image.src = ctx.canvas.toDataURL('image/jpeg'); 28 29 }); 30 }

しかしこのjavasriptのコードでは合成後、画像が真っ黒に表示されてしまいます。
イメージ説明

やった事

[HTML5] 複数のCanvasを合成する
https://blog.katsubemakito.net/html5/canvas-concat
を参考にコードを書きました。

getImagefromCanvs関数内のimage.srcに直接画像パスを入力するようにすると逆にlineが表示できないといった問題に当たりました。

仮定

表示しようとしている画像データが大きすぎる?

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

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

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

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

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

guest

回答1

0

ベストアンサー

ブログをご覧いただきありがとうございます。

結合する際に一番下に来るCanvasを、ご希望の色で「事前に」塗りつぶしておいたらどうなるでしょうか?

javascript

1ctx.fillStyle = "rgb(255, 255, 255)"; 2ctx.fillRect(0, 0, canvas.width, canvas.height);

投稿2020/06/30 13:00

katsubemakito

総合スコア72

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

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

naoyatsuchida

2020/06/30 13:23

いつもわかりやすい記事ありがとうございます!とても参考になりました! 記載していただいたコードを記入させていただきました! 真っ黒ということは無くなりましたが実現したい事が追記で記載させていただいたように画像の上に線を載せた状態の画像にしたいと思っているのですが、うまくいきません。
katsubemakito

2020/06/30 13:33

現在のコードがわからないのですが、以下のような処理の順番になってますでしょうか。 1) Cavnas1とCanvas2がある 2) Canvas1の背景を白で塗りつぶす 3) Canvas1に画像を描画する 4) Canvas2に線を描画する 5) Cavas1の上にCanvas2を合成する
katsubemakito

2020/06/30 14:13 編集

あとJPEGだと背景(何も描画されていない部分)が透過されない気がするので、上に乗せるCanvasはPNGなどに変更してみてください。 image.src = ctx.canvas.toDataURL('image/jpeg');  ↓ image.src = ctx.canvas.toDataURL('image/png');
naoyatsuchida

2020/07/01 03:47

katsubemakitoさんのおっしゃるとうり事前に背景を塗りつぶす事でうまく表示させる事ができました!! 本当にありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問