<input type="button">タグでonclick"chgImg()"イベントを発火させるとエラーになる。

Question

Laravel6でcanvasタグから生成された画像を、画像ファイルに変換する機能の実装を試みています。

<form method="post" action="{{ route('post.store') }}" enctype="multipart/form-data">
@csrf
 <canvas id="preview"></canvas>
   <div><img id="newImag" type="file" name="image"></div>
       <input type="button" value="画像に変換" onclick="chgImg()">
       <button type="submit" type="file" class="btn btn-succsess">保存する</button>
</form>

    <script>
        //画像を読み込んでImageオブジェクトを作成する
        let image = new Image();
        image.src = '../images/canvas.png';
        image.onload = (function() {
            //画像ロードが完了してからキャンバスの準備をする
            let canvas = document.getElementById('preview');
            let ctx = canvas.getContext('2d');
            //キャンバスのサイズを画像サイズに合わせる
            canvas.width = image.width;
            canvas.height = image.height;
            //キャンバスに画像を描画（開始位置0,0）
            ctx.drawImage(image, 0, 0);
        });

        //canvasデータを画像に変換にする関数
        let cvs = document.getElementById('preview');

        function chgimg() {
            let png = cvs.toDataURL();
            document.getElementById('newImag').src = png;
        }
    </script>

上記コードの中で、

 <input type="button" value="画像に変換" onclick="chgImg()">

をクリックすると、

<div><img id="newImag" type="file" name="image"></div>

上記箇所に画像形式で<canvas>で生成された画像を出力させたいのですが、
「 chgImg is not defined at HTMLInputElement.onclick」　というエラーが出ます。
コードを参考にしたサイトとのコードの差異もないと思うのですが、どうしてこのようなエラーになるのでしょうか？

Answer 1

綴り間違いではないでしょうか？

誤）function chgimg() {
正）function chgImg() {

Comments

[Fukusuke0604]

ありがとうございます。　スペルミスでした。