मोबाइल सफारी <img src="data:image/jpeg;base64..."> कैनवास पर स्केल किया गया है?

Question

मैं आईओएस 6 पर सफारी मोबाइल पर कैनवास पर एक फ़ाइल रीडर ऑब्जेक्ट के साथ लोड की गई स्थानीय छवि प्रस्तुत करने का प्रयास करता हूं। लेकिन डेटा-यूआरएल के साथ हर छवि लंबवत पैमाने पर प्रदान की जाती है। क्या यह एक बग है? क्रोम पर यह सही ढंग से प्रस्तुत किया जाता है।

• Demo Script

ScreenShot from iOS6 (ऊपर: कैनवास, नीचे: मूल छवि)

वहाँ किसी भी तरह से काम के आसपास करने के लिए इस बग है? क्या यह एक बग है?

यदि मैं पहले "फोटोविज़ार्ड" ऐप (इसे 720px चौड़ाई तक स्केल करता हूं) के साथ डिवाइस पर छवि का आकार बदलता हूं, तो कैनवास इसे सही ढंग से प्रस्तुत करता है। ,

• Working Demo Script

Jake Archibald से कोशिश सुझाव थोड़ा बेहतर लग रहा है, लेकिन अभी भी खड़ी बढ़ाया जाता है:: यह कैमरा एप्लिकेशन से लिया चित्र आकार या छवियों के साथ एक समस्या लगती है

• Modified Demo Script
• ScreenShot from iOS6

मैंने आज एंड्रॉइड 4.1.1 के साथ गैलेक्सी नेक्सस पर इसे आजमाया। उम्मीद की तरह काम करता है, तो यह वास्तव में एक मोबाइल सफारी मुद्दे की तरह दिखता है:

• ScreenShot from Android 4.1.1

Answer 1

यह प्रतिबंध जो आईओएस सफारी संसाधन सीमा में रहता है से संबंधित हो सकता है। निम्नलिखित लिंक के अनुसार, 2 एम पिक्सेल से अधिक जेपीईजी फाइलों को कम किया जाएगा।

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

मैं सफारी में है कि कैनवास पर शक कर रहा हूँ सही ढंग से इस सबसैम्पलिंग के साथ सौदा नहीं कर सकते।

मैंने कुछ कामकाज बनाया है यह पता लगाने के लिए कि छवि subsampled है या नहीं और इसे मूल आकार में खींच रहा है।

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); यह फ़ंक्शन 3 एमबी से अधिक आईपॉड में निचोड़ने वाली समस्या को ठीक करेगा। सबसे पहले यदि आपकी छवि 3 एमबी से अधिक है तो छवि के लिए स्केल की गई चौड़ाई और ऊंचाई की गणना करें और उस चौड़ाई और ऊंचाई को कैनवास पर सेट करें। फिर drawImage फ़ंक्शन को कॉल करें। यह आपको अंतिम छवि देगा जो आपको अपेक्षित था ...