いくつかのイメージを重ね、オリジナルの画像をカスタマイズできる、ウェブサービスを作成中です。
そのカスタムページは主にjqueryとcssを使用して実現しており、canvasで描画はしておりません。
**"#custom"**という大枠のDIV
**"#custom > #inner"**というイメージを反映させるDIVに
それぞれclass指定やpictureのdisplay表示非表示などで対応しております。
そのカスタマイズした画像(画面)を画像保存したいと思い以下のソースをネットから拝借いたしました。
// HTML箇所 <input id="downloadImageButton" style="width:120px;" type="button" value="画像保存" onclick="getDisplayImage();" > <a id="getImage" href="" style="display:none;" download="image.png">画像保存</a> // JS箇所 <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha2/html2canvas.min.js"></script> <script type="text/javascript"> function getDisplayImage(){ //html2canvas実行 html2canvas(document.getElementById("custom")).then(function(canvas) { downloadImage(canvas.toDataURL()); }); } function downloadImage (data) { var fname ="testimage.png"; var encdata= atob(data.replace(/^.*,/, '')); var outdata = new Uint8Array(encdata.length); for (var i = 0; i < encdata.length; i++) { outdata[i] = encdata.charCodeAt(i); } var blob = new Blob([outdata], ["image/png"]); if (window.navigator.msSaveBlob) { //IE用 window.navigator.msSaveOrOpenBlob(blob, fname); } else { //それ以外? document.getElementById("getImage").href=data; //base64そのまま設定 document.getElementById("getImage").download=fname; //ダウンロードファイル名設定 document.getElementById("getImage").click(); //自動クリック } } </script>
参考にしたコードでは別verのhtml2canvasを使っていたのですが全く動かなかったので、0.5.0-alpha2を利用してます。
このコードの場合、**"#custom"**の背景の画像は保存画像に反映されておりますが、
"#inner"の部分がdivごと半分に切れてるような状態で保存されてしまいます。
カスタム選択で選んだ画像は反映されております。
選択した際のjsやcssが悪さしているかと思ったのですが、
html2canvasの指定を"#inner"に変更した場合、"#inner"の画像のみだと正しく保存されます。
**"#custom"と"#inner"**どちらにもカスタムの選択があるので、どちらも反映させた状態の全体図を正しく保存できれば幸いです。
あなたの回答
tips
プレビュー