toDataURL() z webgl canvas zwracające przezroczysty obraz tylko w iOS

Question

Mam płótno z rysunkami webGL, stworzone przez framework Blend4Web.

Próbowałam zapisać obraz za pomocą toDataURL():

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

Wszystkie platformy działa idealnie, z wyjątkiem iOS (iPhone & iPad)

wiem o aspektach WebGL: Canvas toDataURL() returns blank image only in Firefox, preserveDrawingBuffer jest włączony.

Co więcej, wiem o ograniczeniach w iOS: iOS HTML5 Canvas toDataURL, ale płótno jest małe, nawet obrazy 100 x 500 pikseli są puste (wynosi 0,05 MP, limit to 3 MP).

Używam toDataURL() do wysyłania informacji graficznych na serwerze.

Answer 1

Poniżej znajduje się polyfill z toDataURL. Aby uzyskać toBlob do pracy na iOS, musisz potrzebować dodatkowej polyfill, polecam następujący polyfill: https://github.com/blueimp/JavaScript-Canvas-to-Blob. Zasadniczo wystarczy pobrać canvas-to-blob.min.js. Poleciłbym kogoś innego polifillowi toDataURL, ale nie mogłem go znaleźć.

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) Spróbuj uzyskać obraz po pewnym tiomeout

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

2) Przed get URL obrazu, można sprawdzić płótno na przezroczystych pikseli

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) Spróbuj napisać swoje płótna na innym płótnie

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) Spróbuj plamy wysłać do serwera zamiast base64, jest bardziej przyjazny dla pamięci: https://stackoverflow.com/a/34924715/5138198

5) lub może lepiej po prostu przeczytać ten post: https://stackoverflow.com/a/45223017/5138198