プログラム初心者です。
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>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/01 10:49 編集
2018/07/01 13:18
2018/07/01 13:23
2018/07/01 14:14
2018/07/01 14:22
2018/07/01 15:05
2018/07/02 13:16 編集
2018/07/02 13:45