ちびコマドット絵生成機

購入してPG部にアップしたものの、なぜか文字化けをしている…

文字コードが指定されてないのかなぁとコードを確認してみるとそのとおり。

修正したら文字化けが解消された。

  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="./psd.js" charset="utf-8"></script>
    <script type="text/javascript" src="./dotKisekae.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="./kisekae.css">
    </style>
  </head>

更に改良することにした。

フォントを見やすくする
2倍だけではなく4倍も実装する（100px）

フォントを見やすくするためにkisekae.cssを編集した

body, html {
	padding: 0;
	margin: 0;
	height: 100%;
	font-size: 0.9rem;
	font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

4倍を実装するためにHtmlとJavascriptを修正した

<input type="button" class="default_button" value="画像を保存" onclick="saveCanvasAsPng(event);"><br>
<input type="radio" name="group1" id="check1x" checked>等倍<br>
<input type="radio" name="group1" id="check2x">2倍拡大<br>
<input type="radio" name="group1" id="check4x">4倍拡大<br>
<br>
<br>
<input type="button" class="default_button" value="設定を保存" onclick="saveSetting(event);"><br>

Javascriptは圧縮されていたので、Webサービスで展開した状態で、解析して修正した。

function saveCanvasAsPng(a) {
    a = document.getElementById("Canvas");
    var b = document.getElementById("check2x").checked;
    var b4 = document.getElementById("check4x").checked;
    if (b) {
        var c = a;
        a = document.createElement("canvas");
        a.width = 2 * c.width;
        a.height = 2 * c.height;
        context = a.getContext("2d");
        context.imageSmoothingEnabled = !1;
        context.msImageSmoothingEnabled = !1;
        context.drawImage(c, 0, 0, c.width, c.height, 0, 0, a.width, a.height)
    }
    if (b4) {
        var c = a;
        a = document.createElement("canvas");
        a.width = 4 * c.width;
        a.height = 4 * c.height;
        context = a.getContext("2d");
        context.imageSmoothingEnabled = !1;
        context.msImageSmoothingEnabled = !1;
        context.drawImage(c, 0, 0, c.width, c.height, 0, 0, a.width, a.height)
    }
    a.toBlob(function (d) {
        var e = URL.createObjectURL(d);
        d = document.createElement("a");
        document.body.appendChild(d);
        d.download = saveFileName + ".png";
        b && (d.download = saveFileName + "2x.png");
        b4 && (d.download = saveFileName + "4x.png");
        d.href = e;
        d.click();
        d.remove();
        setTimeout(function () {
            URL.revokeObjectURL(e)
        }, 500)
    }, "image/png")
}

最後まで読んでくれた良い子はこちらから遊んでみてね。
pasocafe00

コメントする コメントをキャンセル

コメントするコメントをキャンセル