iOS HTML5 Canvas toDataURL

Necesito ayuda Parece que tenemos un problema con iOS en lo que respecta a get la base64 de una image a través de HTML 5 / Canvas. Todo funciona bien si utilizamos el alto / ancho pnetworkingeterminado del canvas o el código duro de la altura y el ancho. Sin embargo, si establecemos el alto / ancho del canvas en la image src, la image no se cargará en el canvas y, por lo tanto, no obtendremos la image como base64.

Fragmento de código que funciona:

function convertImageToBase64(imgUrl, callback) { var canvas = document.createElement("canvas"); var context = canvas.getContext('2d'); // load image from data url var imageObj= new Image(); imageObj.onload = function () { var dataUrl; context.drawImage(imageObj, 0, 0, canvas.width, canvas.height); dataUrl = canvas.toDataURL("image/png"); callback.call(this, dataUrl); canvas = null; }; imageObj.src = imgUrl; } 

Fragmento de código que no funciona en iOS, pero funciona en Android:

 function convertImageToBase64(imgUrl, callback) { var canvas = document.createElement("canvas"); var context = canvas.getContext('2d'); // load image from data url var imageObj= new Image(); imageObj.onload = function () { var dataUrl; canvas.width = imageObj.width; canvas.height = imageObj.height; context.drawImage(imageObj, 0, 0, canvas.width, canvas.height); dataUrl = canvas.toDataURL("image/png"); callback.call(this, dataUrl); canvas = null; }; imageObj.src = imgUrl; } 

Necesitamos poder establecer el alto / ancho del canvas según la image en sí.

Cualquier orientación o asistencia es muy apreciada.

Solutions Collecting From Web of "iOS HTML5 Canvas toDataURL"

Todos estos límites son reales para iOS:

  • El tamaño máximo para las imágenes decodificadas GIF, PNG y TIFF es de 3 megapíxeles para dispositivos con less de 256 MB de RAM y 5 megapíxeles para dispositivos con una RAM mayor o igual a 256 MB.
  • El tamaño máximo para un elemento de lona es de 3 megapíxeles para dispositivos con less de 256 MB de RAM y 5 megapíxeles para dispositivos con una RAM superior o igual a 256 MB.
  • El time de ejecución de JavaScript está limitado a 10 segundos para cada punto de input de nivel superior.

Estos límites no arrojan ningún error, por lo que intentará renderizar o leer una image de 6 MB, obtendrá una secuencia blob / dataURL y así sucesivamente. Y pensarás que File API está roto, los methods de canvas toDataURL / toBlob están rotos, y tendrás razón. Pero los errores no están en el browser, esta es una limitación del sistema.

Entonces, estas limitaciones crean un comportamiento roto para la API de JavaScript.