Ich arbeite an einigen einfachen Bildbearbeitungsfunktionen mit Canvas. Der Benutzer lädt ein Bild hoch, kann es drehen und zuschneiden und klickt dann auf OK. Das Bild wird dann in zwei Hälften geteilt, wobei jede Hälfte gespiegelt auf zwei Canvas-Elemente gezeichnet wird:

Origina

Gespiegel

Es funktioniert alles hervorragend in Chrome, Firefox, IE und Android-Geräten. Safari spielt sich allerdings nicht gut. Die gesamte Bildbearbeitung funktioniert einwandfrei, mit Ausnahme der Split-Funktion. Es wird zwar auf eines der Canvas-Elemente gezeichnet, das andere ist jedoch nur schwarz. Ich habe versucht, den drawImage-Code zu ändern, kann ihn jedoch nicht zum Laufen bringen.

Hier ist die Funktion:

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);
}

Um genau zu sein, funktionieren die drawImage-Operationen in if (isLeftSide) in Safari nicht.

Irgendwelche Ideen

Edit: Es scheint auch auf iOS-Geräten nicht zu funktionieren. Ich habe gelesen, dass auf Safari- und iOS-Geräten bei der Arbeit mit großen Bildern möglicherweise nicht genügend Speicherplatz zur Verfügung steht. Um dem entgegenzuwirken (und einige Verzögerungen zu reduzieren), habe ich eine Größenänderungsfunktion hinzugefügt. Die Bildgröße wird bei Bedarf auf maximal 800 Pixel Breite und 800 Pixel Höhe angepasst, wobei das Seitenverhältnis beibehalten wird. Dies erfolgt vor jeder anderen Bildmanipulation, hat aber keinen Unterschied gemacht.

Die Größenänderungsfunktion:

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