Canvas.toDataURL mobil cihazda çalışmıyor Safari iOS?

Aşağıdakileri denedim. Bir svg görüntüden bir <img> oluşturdum. Sonra bir tuval üzerine çizdim ve sonunda bunu PNG olarak verdim ve sonuçta ortaya çıkan PNG'yi yeni bir <img> olarak ayarladım. Android, Chrome, Safari, FireFox'ta iyi çalışır. Ancak, canvas.toDataUrl() iOS'ta mobil Safari'de çalışmıyor. Sadece SVG resimleri tuvalde kullanmadığınızda çalışır.Canvas.toDataURL mobil cihazda çalışmıyor Safari iOS?

<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";

Burada bir JSFiddle yarattı: iOS üzerinde çalıştırdığınızda http://jsfiddle.net/confile/ZqJYG/

sorun oluşur Burada

Ben test için kullanmak koddur. Mobil Safari'de değil, mobil Safari'de çalışmıyor.

Bu sorun için bir çözüm var mı?

kaynak

2014-05-21 confile

Ayrıca bkz. Http://stackoverflow.com/questions/18972038/why-todataurl-does-not-get-canvas-content-on-mobile ve http://stackoverflow.com/questions/15495221/canvas-todataurl -does-değil-sonuç-resim-jpeg-veri – Phrogz

Emin olmak için: JSFiddle sizin için Chrome veya Firefox üzerinde çalışıyor mu? Test edemem çünkü şirketim DropBox'a olan istekleri engelliyor. Ayrıca, etki alanları arası güvenlik sorunlarına da vurmadığınızdan emin olun, burada uzak SVG'nin tuvalinize çizilmesi onu kırpıyor mu? – Phrogz

@Phrogz evet, masaüstü Chrome ve FF'de çalışır. Başka bir fikir nasıl çözülür? – confile

Sanırım tarayıcınız desteklemiyor olabilir. aşağıya bakın. Bu yardımcı olur

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

Hope:

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

Ayrıca aşağıdaki kodu kullanarak tarayıcı desteğini test edebilir.

kaynak

2014-09-05 05:34:01

Bu sorunla aynı sorun olabilir veya olmayabilir, ancak iOS'ta bu çağrıdan (veri tabanı) geri dönüyordu ve tuval boyutunu önemli ölçüde azaltarak sorunu çözmeyi başardım. Görüntüyü yükleyerek ya da dizgeyi geri getirerek ve özellikle işe yaramaz bir şekilde uğraştığını sanıyorum.

kaynak

2015-01-21 22:43:04

Tuval alanın maksimum boyutu 2000 pikseldi, ancak 1500'e düşürdüğümüzde işe yaradı. <= IPhone'larda sorun yaşadık. 5. –

Safari'nin bunu sıraya koyduğuna sevindim. IOS 8.3'te mobil Safari'de bulundu. Sonraki sürümlerde bu bellek sorunu yoktu. –

Canvas.toDataURL mobil cihazda çalışmıyor Safari iOS?

cevap

İlgili konular