toDataURL() von webgl canvas Rückgabe von transparenten Bild in iOS nur

Question

Ich habe eine Leinwand mit WebGL-Zeichnungen, erstellt von Blend4Web-Framework.

Ich versuchte Bild zu speichern toDataURL() mit:

image= $('canvas')[0].toDataURL(); 

Alle Plattformen funktioniert perfekt, außer iOS (iPhone & ipad)

ich über WebGL Aspekte kennen: Canvas toDataURL() returns blank image only in Firefox, preserveDrawingBuffer aktiviert ist.

Auch ich weiß über Einschränkungen in iOS: iOS HTML5 Canvas toDataURL, aber Leinwand ist klein, auch 100 × 500px Bilder sind leer (es ist 0,05MP, Grenze ist 3MP).

Ich verwende toDataURL(), um Grafikinformationen auf dem Server zu senden.

Answer 1

Folgendes ist eine Polyfill von toDataURL. Um toBlob unter iOS arbeiten zu können, benötigen Sie ein zusätzliches Polyfill, ich empfehle die folgenden Polyfill: https://github.com/blueimp/JavaScript-Canvas-to-Blob. Laden Sie einfach die canvas-to-blob.min.js herunter. Ich hätte eine direkte toDataURL Polyfill von jemand anderem empfohlen, aber ich konnte keinen finden.

if (typeof HTMLCanvasElement.prototype.toDataURL !== "function") { 
    HTMLCanvasElement.prototype.toDataURL = function() { 
    this.toBlob(function (blob) { 
     var fileReader = new FileReaderSync(); 
     return fileReader.readAsDataURL(blob); 
    }); 
    }; 
} 

Answer 2

1) Versuchen Bild nach einiger tiomeout

window.setTimeout(function(){var result = $('canvas')[0].toDataURL(); 
},100); 

2) Bevor get Bild-URL erhalten, können Sie Leinwand für transparente Pixel

var canvas = $('canvas')[0]; 
var ctx = canvas .getContext("2d") 
var data = ctx.getImageData(0,0,canvas .width,canvas .height); 
console.dir(data);//empty pixel it is each [0,0,0,0] array (rgba(0,0,0,0)) 

3) überprüfen Versuchen Sie, Ihre Leinwand zu schreiben auf anderen Leinwand

var canvas = $('canvas')[0]; 
var tmpCanvas = document.createElement("canvas"); 
tmpCanvas.width = canvas.width; 
tmpCanvas.height = canvas.height; 
tmpCanvas.getContext("2d").drawImage(canvas,0,0,tmpCanvas.width,tmpCanvas.height,0,0,tmpCanvas.width,tmpCanvas.height); 
var result = tmpCanvas.toDataURL(); 

4) Versuchen Sie zu Bitte senden Sie Blobs Server anstelle von Base64, ist es mehr Speicher freundlich: https://stackoverflow.com/a/34924715/5138198

5) oder vielleicht besser nur diesen Beitrag lesen: https://stackoverflow.com/a/45223017/5138198