iOSで画像ファイルのアップロードを行うとエラーが発生する

Question

###iOSで画像ファイルのアップロードを行うとエラーが発生する
HTML,JavaScript,クラシックASPでiOS向けWebアプリを開発しています。
iPhone等で撮影、または画像ファイルを選択し、ファイルサイズを縮小してwebサーバーにアップロードする仕組みを作っています。
ファイルサイズの縮小には、JSを用いてcanvasタグに描画しており、canvasのimageをbase64urlへエンコーディングした文字列をサーバーにPOSTさせています。
アップロードファイルの容量は2～3Mbyte程度で、最大で２つのファイルを指定できるようにしています。

PCでもiOSでも想定通りに動作しますが、iOSでは「このWebページで問題が起きたため、再度読み込まれました。」のメッセージが画面上部に表示され、
さらに画面中央にモーダルダイアログで「本当にこのフォームを再送信しますか？」とのメッセージが表示されます。

このメッセージの原因や解消方法があればご教授いただきたいです。

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

このWebページで問題が起きたため、再度読み込まれました。

###該当のソースコード
以下のソースは抜粋です。

<input type="file" accept="image/*" capture="camera" name="uploadFile" id="uploadFile" onchange="dispThumbnail()">
<canvas id="dispPhoto" name="dispPhoto" width="480" height="360"></canvas>

function dispThumbnail(){
	var select_file = document.getElementById("uploadFile");
	var canvas = document.getElementById("dispPhoto");
	var file = select_file.files;
	var reader = new FileReader();
	//dataURL形式でファイルを読み込む
	reader.readAsDataURL(file[0]);
	//ファイルの読込が終了した時の処理
	reader.onload = function(){
		readDrawImg(reader, canvas, 0, 0);
	}
}
function readDrawImg(reader, canvas, x, y){
	var img = readImg(reader);
	var canvasDefW = canvas.width;	// canvasの初期幅
	img.onload = function(){
		var w = img.width;
		var h = img.height;
		// 横幅を基準としてリサイズする
		var resize = resizeWidthHeight(canvasDefW, w, h);
		drawImgOnCav(canvas, img, x, y, resize.w, resize.h);
		// CanvasImageのBASE64URIへの変換
		document.getElementById("base64area").value = canvas.toDataURL("image/png");
	}
}
//ファイルの読込が終了した時の処理
function readImg(reader){
	//ファイル読み取り後の処理
	var result_dataURL = reader.result;
	var img = new Image();
	img.src = result_dataURL;
	return img;
}
//キャンバスにImageを表示
function drawImgOnCav(canvas, img, x, y, w, h) {
	var ctx = canvas.getContext("2d");
	canvas.width = w;
	canvas.height = h;
	ctx.drawImage(img, x, y, w, h);
}
// リサイズ後のwidth, heightを求める
function resizeWidthHeight(target_length_px, w0, h0){
	//リサイズの必要がなければ元のwidth, heightを返す
	if(w0 <= target_length_px){
		return{
			flag: false,
			w: w0,
			h: h0
		};
	}
	// 横幅を基準としたリサイズの計算
	var w1;
	var h1;
	w1 = target_length_px;
	h1 = h0 * target_length_px / w0;
	return {
		flag: true,
		w: w1,
		h: h1
	};
}

Dim s_cntTotal
Dim s_getBinary
Dim s_objBasp21
Dim s_strBase64
Dim s_result

s_cntTotal = Request.TotalBytes
s_getBinary = Request.BinaryRead(s_cntTotal)
SET s_objBasp21 = server.createobject("basp21")

s_strBase64 = s_objBasp21.Form(s_getBinary, "base64area")
s_result = ImportCanvas(s_strSaveMapFilePass, s_strBase64)

Function ImportCanvas(param_strFilePass, param_strBase64)
	Const adTypebinary = 1	' バイナリデータ
	Const adTypeText = 2	' テキストデータ

	Dim stream, xmldom, node
	Dim strBase64
	Set xmldom = Server.CreateObject("Microsoft.XMLDOM")
	Set node = xmldom.CreateElement("base64")
	node.DataType = "bin.base64"

	strBase64 = Replace(param_strBase64, "data:image/png;base64,","") 'Base64の文字列を渡す
	If InStr(strBase64, "data:image/") <> 0 Then
		strBase64 = Replace(param_strBase64, "data:image/jpeg;base64,","") 'Base64の文字列を渡す
	End If
	node.text = strBase64
	Set stream = Server.CreateObject("ADODB.Stream")
	stream.Type = adTypeBinary
	stream.Open
	stream.write node.NodeTypedValue
	stream.saveToFile param_strFilePass, 2 'ファイルを作成
	stream.Close
	Set stream = Nothing

	Set node = Nothing
	Set xmldom = Nothing

	ImportCanvas = 0
End Function

###試したこと

• IISの設定「最大要求エンティティボディ制限」の関係かと思いましたが、確認したところ33Mbyteまでの設定になっていたので問題ないようです。
• input要素で選択する元ファイルの容量が小さい（50Kbyte）場合、上記のエラーは発生しませんでした。65Kbyteであれば、エラーが発生しました。

###補足情報(言語/FW/ツール等のバージョンなど)
実行端末：iOS10以上

Answer 1

（一応）解決しました

function readDrawImg(reader, canvas, x, y){
    var img = readImg(reader);
    var canvasDefW = canvas.width;    // canvasの初期幅
    img.onload = function(){
        var w = img.width;
        var h = img.height;
        // 横幅を基準としてリサイズする
        var resize = resizeWidthHeight(canvasDefW, w, h);
        drawImgOnCav(canvas, img, x, y, resize.w, resize.h);
        // CanvasImageのBASE64URIへの変換
        document.getElementById("base64area").value = canvas.toDataURL("image/png");
    }
}

上記のソースの最終行を

        // CanvasImageのBASE64URIへの変換
        document.getElementById("base64area").value = canvas.toDataURL("image/jpeg");

と変更したところ、選択するファイルサイズに関わらずエラーが発生しなくなりました。
とは言っても、ファイルサイズは高々2～3Mbyteくらいでしか確認していませんが。

恐らくbase64のエンコード、デコード処理あたりに原因があるようですが、詳しい原因については自分の力量では解明できませんでした。

解決としていますが、後学のため、より詳しい原因について分かる方がいらっしゃればコメントいただけると幸いです。