モバイルSafariレンダリング<img src="data:image/jpeg;base64...">キャンバスに表示されますか？

Question

iOS6のSafari MobileのCanvasにFileReaderオブジェクトをロードしたローカルイメージをレンダリングしようとしました。しかし、データURLを持つすべてのイメージは、垂直方向にスケーリングされてレンダリングされます。これはバグですか？ Chromeでは正しくレンダリングされます。

• Demo Script

ScreenShot from iOS6（上：キャンバス、以下：オリジナル画像）

回避策には、このバグの方法はありますか？これはバグですか？

「PhotoWizard」アプリケーションを使用してデバイスのイメージのサイズを変更した後（720px幅に縮小）、Canvasは正しくレンダリングします。画像サイズやカメラアプリケーションで撮影した画像に問題があるようです：

• Working Demo Script

が少し良く見える、Jake Archibaldからの提案をしようとしましたが、それでも垂直スケーリングします：

• Modified Demo Script
• ScreenShot from iOS6

Android 4.1.1搭載のGalaxy Nexusで今日試しました。予想されるように動作しますので、これは本当にモバイルSafariの問題のようになります。

• ScreenShot from Android 4.1.1

Answer 1

これはiOSのSafariのリソース制限に存在する制限に関連している可能性があります。以下のリンクによると、2Mピクセルを超えるJPEGファイルはサブサンプリングされます。

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15

私はSafariでキャンバスが正しく、このサブサンプリングを扱うことができないことを疑っています。

私は、画像がサブサンプリングされているかどうかを検出し、元のサイズに伸ばすための回避策を作成しました。

https://github.com/stomita/ios-imagefile-megapixel

Answer 2

var cnv = document.createElement("canvas"); 
     ctx = cnv.getContext("2d"); 

     image = new Image(); 

     image.src = src; 

     image.onload = function() { 

      var size = scaleSizeRatio(image.width,image.height); 
      cnv.width = size[0]; 
      cnv.height = size[1]; 
      ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width , image.height); 

      var div = container; 
      div.appendChild(cnv);  

     } 

ctx.drawImage（イメージ、0、0、image.width、image.height、0、0、image.width、image.height）。この機能はiPodの圧迫問題を3Mb以上修正します。まず、画像が3Mb以上の場合は、画像の拡大/縮小幅と高さを計算し、その幅と高さをキャンバスに設定します。その後、drawImage関数を呼び出します。最終的なイメージに期待したものを与えるでしょう...