Data uriを使いHTMLメールで画像を送っても表示がおかしい。

Question

前提・実現したいこと

ネクタイのシミュレーションサイトを作成しています。

流れ
①ベースとなる画像素材をお客さんが選択していき、Canvasに描写
②描写したCanvasを画像化し、form画面へ (Word Pressのcontact-formを使用)
③画像を送るのは input fileではなくinput hiddenにて ←重要
④画像データはData_URIとして送り HTMLメール内では <img src="[送ったData_URL]">の形で表示

発生している問題・エラーメッセージ

受け取ったメールに画像は載っているが添付画像の様にちゃんと表示できていない。

この画像はスクショをトリミングしたものであり
メール本文から画像を保存しようとしてもできなかったです。

該当のソースコード　canvasを画像化する用のjs

    $(document).ready(function(){

    var element = $("#dress"); // canvas部分
    var getCanvas; // global variable

        $("#btn-Preview-Image").on('click', function () {//ボタンクリックでキャンバスを画像化
             html2canvas(element, {
             onrendered: function (canvas) {
                    $("#previewImage").html(canvas);
                    getCanvas = canvas;
             var AttachData = getCanvas.toDataURL("image/png");
             var newAttachData = AttachData.replace(/^data:image/png;base64,/, "");
	         newAttachData2 = AttachData;

             $("#yourPicture").val(newAttachData2);//input hiddenに画像のData URIを渡す
                 }
             });
        });

    });

試したこと

画像化したファイルを一度保存して、input fileにアップロード
添付ファイルとしてメールで送ると問題なく表示されました。

Data URIの場合重くて、表示が崩れてしまうものでしょうか。

ちなみにhiddenにこだわっているのが
お客様が画像ファイルをいちいちアップするのが手間ではないかとの考えからです、

Data URIをそのまま添付ファイルとして送っても、何も表示されませんでした。

Data URIからBlobを作成して、添付ファイルとして送るのも同じくだめでした。

contact formで添付ファイルとして送れるのは
やはりinput fileでアップしたもののみでしょうか、、
教えていただきたいです。

contact formを使い
自動的に画像が送れたらそれで大丈夫です。

Answer 1

拡張子をpngからjpegに変えたら表示されました。
しばらくこれで様子を見ようと思います。