Canvas.toDataURL मोबाइल सफारी आईओएस पर काम नहीं कर रहा है?

Question

मैंने निम्नलिखित की कोशिश की। मैंने एक svg छवि से <img> बनाया है। फिर मैं इसे कैनवास पर खींचता हूं और आखिरकार मैंने इसे पीएनजी के रूप में निर्यात किया और परिणामस्वरूप पीएनजी को एक नया <img> सेट किया। यह एंड्रॉइड, क्रोम, सफारी, फ़ायरफ़ॉक्स पर अच्छा काम करता है। लेकिन, canvas.toDataUrl() आईओएस पर मोबाइल सफारी पर काम नहीं कर रहा है। यह केवल तभी काम कर रहा है जब आप कैनवास पर एसवीजी छवियों का उपयोग नहीं करते हैं। मैं एक JSFiddle यहां बनाए गए

<div id="mydiv"></div> 
<img id="image2"> 

var mydiv = document.getElementById('mydiv'), 
    image2 = document.getElementById('image2'); 

image2.crossOrigin="anonymous"; 

var image3 = new Image(); 
mydiv.appendChild(image3); 
image3.onload = function() { 
    var canvas = document.createElement('canvas'), 
    ctx = canvas.getContext('2d'); 

    canvas.width = image3.width; 
    canvas.height = image3.height; 

    ctx.drawImage(image3,0,0, canvas.width, canvas.height); 
    var dataUrl = canvas.toDataURL('image/png'); 
    image2.src = dataUrl; 
} 
image3.crossOrigin="anonymous"; 
image3.src = "https://dl.dropboxusercontent.com/u/47067729/sticker4.svg"; 

: http://jsfiddle.net/confile/ZqJYG/

समस्या केवल तब होता है जब आप iOS पर इसे चलाने

यहाँ कोड मैं परीक्षण के लिए उपयोग है। यह मोबाइल सफारी पर नहीं चलता है, न कि मोबाइल क्रोम पर।

क्या इस समस्या के लिए कोई समाधान है?

Answer 1

मुझे लगता है कि आपका ब्राउज़र इसका समर्थन नहीं कर सकता है। निम्नलिखित देखें।

function supportsToDataURL() 
{ 
    var c = document.createElement("canvas"); 
    var data = c.toDataURL("image/png"); 
    return (data.indexOf("data:image/png") == 0); 
} 

आशा इस मदद करता है:

http://caniuse.com/#search=canvas

iPhone 3GS  - Mobile Safari 4.0.5 
iPhone 4   - Mobile Safari 4.0.5 
iPhone 4s   - Mobile Safari 5.1 
iPad 1/3.2.2 - Mobile Safari 4.0.4 
iPad 2/4.3.3 - Mobile Safari 5.02 
iPad 2/5.0  - Mobile Safari 5.1 
iPad 3/5.1  - Mobile Safari 5.1 
iPhone 5/6.0 - Mobile Safari 6.0 
iPad 4/6.0  - Mobile Safari 6.0 

आप निम्न कोड का उपयोग करके अपने ब्राउज़र समर्थन परीक्षण कर सकते हैं।

Answer 2

यह एक ही समस्या हो सकती है या नहीं भी हो सकती है, लेकिन मुझे आईओएस पर इस कॉल से "डेटा:" वापस मिल रहा था (हर जगह काम किया गया) और कैनवास के आकार को नाटकीय रूप से कम करके समस्या को हल करने में कामयाब रहा। मुझे लगता है कि यह स्मृति को लोड कर रहा है या तो छवि लोड कर रहा है या स्ट्रिंग को वापस कर रहा है, और विशेष रूप से बेकार फैशन में इसका सामना कर रहा है।