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

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

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

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

HTML

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

Q&A

1回答

3629閲覧

htmlに表示された画像グループをcanvasに描画したい

hiryu-

総合スコア8

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2018/06/30 06:19

編集2022/01/12 10:55

プログラム初心者です。
htmlでJavaScriptとCSSを使って、SNSのアイコン等に使えるアバター着せ替えゲームを制作しています

基礎的な着せ替え部分は完成したのですが、肝心の衣装パーツを重ね合わせた状態のpng画像を全て統合した状態で出力するプログラムができていません。

現在のソースコードはこちらイメージ説明のサイトを参考にしたものですが、
保存ボタンを押しても何も映らない真っ黒な画像が保存されてしまいます。

プロットとコードを載せるので、どの部分が間違っているのかと修正内容のご指南、お願いします。

<html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="base.css"> <title>着せ替え</title> <script> function AsciiToUint8Array (S) { var len = S.length; var P = new Uint8Array(len); for (var i = 0; i < len; i++) { P[i] = S[i].charCodeAt(0); } return P; } function SaveToFile(Stream,FileName) { // IE/Edge if (window.navigator.msSaveBlob) { window.navigator.msSaveBlob(new Blob([Stream]), FileName); // それ以外 } else { var a = document.createElement("a"); a.href = URL.createObjectURL(new Blob([Stream])); //a.target = '_blank'; a.download = FileName; document.body.appendChild(a) // FF specification a.click(); document.body.removeChild(a) // FF specification } } function onClick(option){ // PNGファイルの作成 if (option == 1){ var png = canvas.toDataURL("image/png").replace("data:image/png;base64,",""); png = window.atob(png); var Stream = AsciiToUint8Array(png); SaveToFile(Stream,'dest.png'); } // JEPGファイルの作成 if (option == 2){ var png = canvas.toDataURL("image/jpeg").replace("data:image/jpeg;base64,",""); png = window.atob(png); var Stream = AsciiToUint8Array(png); SaveToFile(Stream,'dest.jpg'); } } </script> </head> <body> <h1>着せ替えゲーム</h1> <style type="text/css"> #chara { position:relative; height: 800px; width: 566px; } #chara img { position:absolute; left:0; top:0; } </style> <table> <tr> <td> <div id="chara"> <div> <img src="images/chara.jpg"> <img src="images/kuti1.png" name="kutiLink"> <img src="images/mayu1.png" name="mayuLink"> <img src="images/me1.png" name="meLink"> <img src="images/huku1.png" name="hukuLink"> </div> <br><br> <canvas id="MyCanvas"></canvas> </div> </td> <td> <p> ■口<br> <input type="radio" name="kuti" onClick="kuti1()" value="笑い" checked>笑い <input type="radio" name="kuti" onClick="kuti2()" value="叫び">叫び </p> <p> ■眉<br> <input type="radio" name="mayu" onClick="mayu1()" value="喜び" checked>喜び <input type="radio" name="mayu" onClick="mayu2()" value="困り">困り </p> <p> ■目<br> <input type="radio" name="me" onClick="me1()" value="普通" checked>普通 <input type="radio" name="me" onClick="me2()" value="喜び">喜び </p> <p> ■服<br> <input type="radio" name="huku" onClick="huku1()" value="服1" checked>服1 <input type="radio" name="huku" onClick="huku2()" value="服2">服2 </p> <p> <button onclick="onClick(1);">PNGファイルの作成</button> <button onclick="onClick(2);">JPEGファイルの作成</button> </p> </td> </tr> </table> <SCRIPT type="text/javascript"> <!-- //kuti function kuti1(){ document.kutiLink.src = "images/kuti1.png"; } function kuti2(){ document.kutiLink.src = "images/kuti2.png"; } //mayu function mayu1(){ document.mayuLink.src = "images/mayu1.png"; } function mayu2(){ document.mayuLink.src = "images/mayu2.png"; } //me function me1(){ document.meLink.src = "images/me1.png"; } function me2(){ document.meLink.src = "images/me2.png"; } //huku function huku1(){ document.hukuLink.src = "images/huku1.png"; } function huku2(){ document.hukuLink.src = "images/huku2.png"; } // キャンバスの取得 var canvas = document.getElementById("MyCanvas"); canvas.width = 566; canvas.height = 800; // コンテキストの取得 var ctx = canvas.getContext("2d"); var max_height = 0; var imglist = new Array(); /imglist[0] = document.getElementById("img_gif");*/ imglist[1] = document.getElementById("img_png"); imglist[2] = document.getElementById("img_jpg"); // キャンバスに画像を描画 ←(エラーが起きる部分) imglist[0].onload = function() { ctx.drawImage(imglist[0],0,max_height); max_height += imglist[0].height+30; }; // キャンバスに画像を描画 imglist[1].onload = function() { ctx.drawImage(imglist[1],0,max_height); max_height += imglist[1].height+30; }; // キャンバスに画像を描画 imglist[2].onload = function() { ctx.drawImage(imglist[2],0,max_height); max_height += imglist[2].height+30; }; </SCRIPT> </body> </html>

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

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

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

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

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

guest

回答1

0

1. 書かれているソースは正しい?
```JS
/<script src="html2canvas.js"></script>*/

 ⇡本当にこれで動いてます?先頭のスラッシュとか。もう一度ソースが正しいか(ここにあげたソースが、自分のソースと同じか)確認して下さい 2. html2canvas.jsは使うべきでは無い(かも) カヤックさんの[動的コンテンツを画像化できるJSライブラリ "html2canvas" を使おう](https://techblog.kayac.com/html2canvas)を信じるのであれば`実際にはスクリーンショットを撮っているわけではない`そうで、ライブラリーど独自に描画しているそうです。なので今回の描画がおかしい件はライブラリー側の問題かもしれず、原因究明は難しいかも 3. canvasをJPEG,PNG化 https://st40.xyz/one-run/article/133/ ↑を参考にみて下さい。わたしのこれを参考にcanvasをPNGで保存してます。

投稿2018/06/30 17:00

編集2018/07/01 03:56
oikashinoa

総合スコア2826

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

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

hiryu-

2018/07/01 10:49 編集

すいません1はデバック中のコードの残りでした。修正します。 2、3を参考にしてもう一つコードを描いてみましたが何も映らない真っ黒な画像がキャプチャされちゃいますね・・・そっちも別の質問で聞いてみるべきか・・・
oikashinoa

2018/07/01 13:23

あと、CSSが無いんで推測ですが CSSで位置合わせして重ねあわせしているということでしょうか? ```HTML <div id="chara"> <img src="images/chara.jpg"> <img src="images/kuti1.png" name="kutiLink"> <img src="images/mayu1.png" name="mayuLink"> <img src="images/me1.png" name="meLink"> <img src="images/huku1.png" name="hukuLink"> </div> ``` 以下にないCSSはhtml2canvas.jsで解釈されないので、意図した描画にならないはず。 http://html2canvas.hertzen.com/features
hiryu-

2018/07/01 14:14

多彩なサンプルをご提供頂きありがとうございます! しかしすみません。そちらのページのコードで作ったところ今度は // キャンバスに画像を描画 imglist[0].onload = function() { ctx.drawImage(imglist[0],0,max_height); max_height += imglist[0].height+30; }; の部分に Uncaught TypeError: Cannot set property 'onload' of undefined :Uncaught TypeError:未定義のプロパティ 'onload'を設定できません というエラーが発生してまた真っ黒な画像が保存されてしまいました。 私の自分のコードへの組み込み方が悪かったのでしょうか・・・ テラテイルの使い方もよくわかってないのですがこういう時は現在のコードもこのページにアップした方が良いのかな・・・
hiryu-

2018/07/01 14:22

追記:CSSは背景色とフォントのみの使用で画像には影響してないです
oikashinoa

2018/07/01 15:05

ポイントとなる部分がわからない状態なら、現在のコードをアップすべきです。 下記の部分だって、imglist変数を作成している部分がおかしいんだろうし。 > imglist[0].onload = function() { 質問する前に、ブラウザのデバッガーでステップ実行して変数の状態を追っていけば、原因が解ると思いますよ。
hiryu-

2018/07/02 13:16 編集

そのとおりですね・・・ただ原因となってる箇所がわかっても修正方法がわからない状況だったので頼ってしまいました。もうちょっとデバックについて自分で勉強しようと思います・・・ 一応コードは現在のものに差し替えました。よろしければ見てやってください
oikashinoa

2018/07/02 13:45

まず今参考にしているソースをそのまま動かして下さい https://www.petitmonte.com/javascript/png_jpeg_gif_convert.html Chromeのデバッグモードでステップ実行で動かしていけば動きが分かるでしょう。 CSSでDisplay:noneになっている部分はこの表記自体を消してどんな動きするか 確認しましょう。 元のソースの動きを確認せずそのままコピペで追加してませんか? 理解せずに一部だけコピっても動きませんよ。どうせやるなら、全部そのままコピって理解してから使って下さい。 <img>の内容をCanvasに転送(転写)してます?してなければ黒になります。元のソースをよく見て、分からなければデバッグモードでステップ実行してください。 Chrome デバッグ ステップ実行 くらいでググれば、画像付きでやり方が見つかると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問