Recadrage avec drawImage ne fonctionne pas dans Safari

Je travaille sur des fonctions simples de manipulation d’images avec canvas. L’utilisateur télécharge une image, peut la faire pivoter et la rogner, puis clique sur OK. L’image est ensuite divisée en deux, chaque moitié étant représentée en miroir sur deux éléments de la canvas, comme ceci:

Original

En miroir

Tout fonctionne très bien sur les appareils Chrome, Firefox, IE et Android. Safari ne jouera pas bien cependant. Toute la manipulation d’image fonctionne bien sauf la fonction split. Cela attire l’un des éléments de la canvas, mais l’autre est simplement noir. J’ai essayé de changer le code drawImage, mais je n’arrive pas à le faire fonctionner.

• capture d’écran à l’aide de html2canvas
• jQuery pour rendre HTML5 Canvas Responsive
• Comment effacer une ligne spécifique dans Canvas: HTML5
• Toile redimensionnable (interface utilisateur JQuery)
• Création de canevas dynamic jQuery, $ ctx.getContext n’est pas une fonction

Voici la fonction:

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

Pour être exact, ce sont les opérations drawImage à l’intérieur du if (isLeftSide) qui ne fonctionnent pas dans Safari.

Des idées?

Edit: Cela ne semble pas fonctionner non plus sur les appareils iOS. J’ai lu que les appareils Safari et iOS risquent de manquer de mémoire lorsqu’ils travaillent avec de grandes images. Pour contrer cela (et réduire certains délais), j’ai ajouté une fonction de redimensionnement. Si nécessaire, l’image est redimensionnée à une largeur maximale de 800 pixels et à une hauteur de 800 pixels, en conservant le rapport de format intact. Ceci est fait avant toute autre manipulation d’image, mais cela ne fait aucune différence.

La fonction de redimensionnement:

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

• Comment dessiner des lignes numériques avec HTML
• Définir le fond, les traits et l’opacité de l’arrière-plan HTML5
• Comment effectuer une détection de collision au pixel parfait de deux images partiellement transparentes
• Survolez pour changer la couleur de la canvas
• Erreur html2canvas: Erreur non capturée: IndexSizeError: Exception DOM 1

 var sourceX = image.width/2; var sourceY = 0; var sourceWidth = image.width - sourceX; // you're in the bounds var sourceHeight = image.height; var destX = canvas.width/2; var destY = 0; var destWidth = canvas.width; var destHeight = canvas.height; ctx.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight); 

 ctx.drawImage(image, image.width/2, 0, image.width - (image.width/2), image.height, canvas.width/2, 0, canvas.width, canvas.height);