Q&A
少し詳しく書かないと回答つかないですよ。
あと画像保存のロジックはどこです？
出来ないこと
画像の出力は出来ているようだが、その画像を開いても真っ黒になってしまう。
透明要素を含んでいる画像のため、pngで出力したい。
原因や回避策を教えて頂きたいです。
canvasを画像で保存する
以下のコードを実行
var canvas = document.getElementById('canvas'); var image = canvas.toDataURL('image/png'); console.log(image);
追記
- chrome を利用してます
- canvas.toDataURL('image/png');をcanvas.toDataURL('image/jpeg');でも同じです
- HTMLを追記します
<body> <canvas id="canvas"></canvas> <canvas id="layer"></canvas> </body>
ただの黒い画像になったり、表示すら出来ないコードが出たりなので、画像は後ほど追記します。
黒い画像の中には、canvasで書いたものすらない状況です。
調べ方が下手なのもあるとは思うのですが、調べ方や参考URL等ありましたら、お教えいただけますと助かります。
質問が下手くそで申し訳ありません。
お返事頂いて、ありがとうございます。
画像保存は、DBへ投げるのでまだ書いていない状況なんです、すみません。
その前のところで詰まってしまい、止まっております。
toDataURL() で投げてもbase64 のデータが、真っ黒できちんと表示されない。というところなんです。
本当にコードコレしかないんですけど、何を書いたら良いのでしょうか??
まずはいちど5W1Hで文章を見なおしては？
↓を見ただけでも説明なさすぎ。
toDataURL() で投げてもbase64 のデータが、真っ黒できちんと表示されない。というところなんです。
他の質問で回答が付いているものと日数立っているけど回答つかないもの 二種類を5個づつくらい見てみましょう。質問の仕方がわかると思います。
canvas要素を置いているHTMLコードも記載しましょう。
また、画像を表示している画面のキャプチャ（URL欄含み）画像を記載した方がいいかと。
画像を表示させようとしているブラウザも記載ください。
そして最後に、どこまで調べたのでしょうか？
質問の情報もそうなのですが、ちょっと調査足りない気が。
pngをcanvasで出力なら、アルファチャンネルとかそこら辺もcanvas内で処理しないといかんですよ。
調べてくうちに出てきそうなもんですが・・・。
canvas 要素が二つあるようですが、画像を描画していないほうから出力しているということはありませんか？
#layer は何も入っていないcanvasで、背景の色などを追加するために用意してます。
*同じcanvasでも出来るとは思うのですが、今回はそういった仕様です。
#canvas の方が、描画されている方のcanvasになっています。
(どちらをやっても同じ結果ではありました・・)
追記させていただきました。
アルファチャンネルの処理、ですか。調べたのですが、透過していると背景が黒くなるバグがあるというのはわかったのですが、それ以上見つけられていないです。すみません、調べ不足なのですね。
背景が透明で、赤い線を書いてみたんです。その赤い線が表示されない状況でおります。
回答1件
0
ベストアンサー
原因が判明いたしましたので、
回答いたします。
まず、アルファチャンネルは関係なかったようです。
お詫び申し上げます。
まず、原因というか、質問者さんが大きな勘違いをされています。
画像は、生成されております。
そして、なぜ黒い画面になるのか、
それは、画像が透明だからこそです。
なぜなら、最近のモダンブラウザは、画像のみを表示した際、背景は黒くなるからです。
（試しに、何らかの画像を、ブラウザにドラッグアンドドロップすればわかるでしょう）
なので、透明の画像を表示すれば、当然、黒い画面が出てくるでしょう。
当たり前の現象です。
また、可能性として、何も描画していない場合、
canvasの大きさを指定してないと、大きさ0の画像になってしまい、画像が生成されない可能性はありますので、
属性で構いませんので、（width="640" height="480"といった具合に）canvasの大きさを指定しましょう。
（描画をしている場合は、大きさを指定していなくても、画像は生成されるようです）
さて、描画が反映されない、とのことですが、
これに関しては、canvasの描画を行なっているコードを記載いただいていないので、
お答えできません。
これ以上の回答を得たいとお思いなら、どうか、描画を行なっているコードを記載ください。
また、ローカルの場合は、クロスオリジン問題が発生するため、
そもそも、ローカルだと画像生成ができない、という可能性がありますので、
併せてご確認ください。
（記載いただければ、検証し、回答を修正いたします。）
投稿2019/06/07 15:58
総合スコア9555
ちなみに、jpgでも黒くなったとのことですが、
canvasにおいての、jpgでの保存は、
image/jpegにする必要があるのと、
デフォルトの描画色は黒のようですね。
（image/jpgだと、pngとして生成されてしまう）
ご回答ありがとうございます。
背景が透明だと黒になるのですね！
縦・横の属性、HTMLでは書いてなかったので記載し忘れておりました。。jQuery で画面いっぱいにするよう設定しておりました！(忘れていました)
赤い線を描いているのが表示されていない状況なのですが、それも本当は表示されているという事でしょうか？？小さくて見えない、とかなのでしょうか・・？
base64の画像を表示している画面で、ドラッグアンドドロップして、デスクトップかに引っ張れば、透明のPNG画像がダウンロードできるはずです。
お試しください。
描画（赤い線）に関しては、描画を行なっているコードを、質問に記載していただかないことには、わかりません。
なので、そこも、回答ほしいとあらば、どうか、質問のコードに描画を行なっているコードを記載いただければと思います。
回答ありがとうございました。
ヒントになりました！この操作で合っていてよかったです。何か操作が足りずになっているのかと思いました。
描画行っている部分の調査が必要になるため、その部分のコードを追ってみます。
描画部分のソースコードが長文なため、記載できずすみません。
ありがとうございました。
ひとまず、解決されて何よりです。
描画部分も、もしどうしてもわからない部分がでてくれば、記載長くなる場合は、やむなし部分的記載で、別途質問たてられるといいかと思います。
あなたの回答
tips
プレビュー
