Estoy trabajando en algunas funciones simples de manipulación de imágenes con lienzo. El usuario carga una imagen, puede rotarla y recortarla y luego hace clic en Aceptar. La imagen se divide por la mitad con cada mitad dibujada reflejada en dos elementos del lienzo, como este:

Original

Reflejado

Todo funciona muy bien en dispositivos Chrome, Firefox, IE y Android. Sin embargo, Safari no jugará bien. Toda la manipulación de imágenes funciona bien, excepto la función de división. Dibuja uno de los elementos del lienzo, pero el otro es solo negro. Intenté cambiar el código drawImage, pero no puedo hacer que funcione.

Aquí está la función:

function splitImage(canvas, context, image, isLeftSide) {
  canvas.width = img.width;
  canvas.height = img.height;
  context.save();
  if(isLeftSide) {
    context.drawImage(
      image, 
      image.width / 2,
      0, 
      image.width, 
      image.height, 
      canvas.width / 2, 
      0, 
      canvas.width, 
      canvas.height
    );
    context.scale(-1, 1);
    context.drawImage(
      image, 
      image.width / 2, 
      0, 
      image.width, 
      image.height, 
      -canvas.width / 2, 
      0, 
      canvas.width, 
      canvas.height
    );
  } else {
    context.drawImage(
      image, 
      0, 
      0, 
      image.width / 2, 
      image.height, 
      0, 
      0, 
      canvas.width / 2, 
      canvas.height
    );
    context.scale(-1, 1);
    context.drawImage(
      image, 
      0, 
      0, 
      image.width / 2, 
      image.height, 
      -canvas.width, 
      0, 
      canvas.width / 2, 
      canvas.height
    );
  }
  context.restore();
  download(canvas);
}

Para ser exactos, son las operaciones drawImage dentro del if (isLeftSide) las que no funcionan en Safari.

¿Algunas ideas?

Editar: tampoco parece funcionar en dispositivos iOS. He leído que los dispositivos Safari e iOS pueden quedarse sin memoria cuando se trabaja con imágenes grandes. Para contrarrestar esto (y reducir algo de retraso) he agregado una función de cambio de tamaño. La imagen se redimensiona a un máximo de 800 px de ancho y 800 px de alto si es necesario, manteniendo la relación de aspecto intacta. Esto se hace antes de cualquier otra manipulación de imagen, pero no ha hecho ninguna diferencia.

La función de cambio de tamaño:

function resizeImage() {
  var size = 800;
  if(imgTemp.width > size && imgTemp.width >= imgTemp.height) {
    imgTemp.height = (imgTemp.height / imgTemp.width) * size;
    imgTemp.width = size;
  } else if (imgTemp.height > size && imgTemp.height > imgTemp.width) {
    imgTemp.width = (imgTemp.width / imgTemp.height) * size;
    imgTemp.height = size;
  }
}