私は現在、アップロードされた画像を受け取り、サイズを変更し、そのデータ uri をフォーム値に渡してサーバーに送信するためのキャンバス html5 要素をセットアップしています。これはコンピュータでは問題なく動作しますが、Safari を介して iPhone でテストしたときに問題が発生しました。
新しい IOS 6.0.1 アップデートでは、画像をアップロードするときに「写真またはビデオを撮る」を選択できますが、iPhone からアップロードすると 2 つの問題が発生します (テストするのに便利な iPad がありません :( )...
1) 画像の上部 1/3 だけが残っているため、画像がつぶれているか、「未完成」のように見えます。
- context.scale() 関数を削除したところ、これらの問題は発生しませんでした。iPhone デバイスでのスケーリングに処理上の制限はありますか? 単純な context.scale(0.5, 0.5) は機能していないようです。
2) 画像が回転します (この問題は context.scale() が削除されても持続します)。
- 画像が向きデータの一部を保持している可能性があることを読みましたが、それを削除するにはどうすればよいですか?
これらの問題は、「写真を撮る」か、iPhone で撮った画像を使用する場合にのみ発生するようです。PC から iPhone にダウンロードした画像を使用する場合、1) と 2) のどちらの問題も問題ないようです。また、iPhone で撮影した写真をパソコンに転送し、パソコンからアップロードする場合も問題ないようです。
問題1については、同じ画像が私のコンピューター（問題なし）とiPhone（問題）で使用されているため、画像をメールで送信するときにiPhoneが何らかの方法で圧縮しない限り、context.scale（）のiPhoneの制限であると思います私のコンピューターで使用しても問題ない方向データを削除します。ご覧のとおり、私はかなり混乱しています！助けてくれてありがとう！
キャンバスのサイズを変更するための私のコード...
reader.onload = function(e) {
preview.html('<img id="scream" src="' + e.target.result + '" ' + (preview.css('max-height') != 'none' ? 'style="max-height: ' + preview.css('max-height') + ';"' : '') + ' />')
element.addClass('fileupload-exists').removeClass('fileupload-new')
var canvas = document.createElement("canvas"),
context = canvas.getContext("2d"),
image = new Image();
image.onload = function () {
var img = this,
width = img.width,
height = img.height;
canvas.width = 300;
canvas.height = 300;
context.scale(0.25, 0.25);
context.drawImage(img, 0, 0);
var base64 = canvas.toDataURL();
//console.log(base64);
//$('form_6').val(base64);
document.body.appendChild(canvas);
};
image.src = e.target.result;
}