Recadrer avec drawImage ne fonctionne pas dans Safari

Question

Je travaille sur quelques fonctions simples de manipulation d'image avec toile. L'utilisateur télécharge une image, peut la faire pivoter et la recadrer, puis clique sur OK. L'image est alors divisé en deux, chaque moitié dessiné en miroir à deux éléments de toile, comme ceci:

Original

Mirrored

Tout fonctionne très bien dans les appareils Chrome, Firefox, IE et Android. Safari ne jouera pas bien quand même. Toute la manipulation de l'image fonctionne bien, sauf la fonction de partage. Il dessine un des éléments de la toile, mais l'autre est juste noir. J'ai essayé de changer le code drawImage, mais je n'arrive pas à le faire fonctionner.

est ici 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 à l'intérieur du drawImage si (isLeftSide) qui ne fonctionne pas dans Safari.

Des idées?

Editer: Il ne semble pas non plus fonctionner sur les appareils iOS. J'ai lu que les périphériques Safari et iOS pouvaient manquer de mémoire lors de l'utilisation de grandes images. Pour contrecarrer cela (et réduire le décalage), j'ai ajouté une fonction de redimensionnement. L'image est redimensionnée à une largeur maximale de 800 px et 800 px si nécessaire, tout en conservant le format d'image intact. Ceci est fait avant toute autre manipulation d'image, mais n'a fait aucune différence.

La fonction de modification de taille:

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

Answer 1

Le bug se produit lorsque drawImage() est appelé hors des limites du sourceImage.

Vous avez vérifier que la largeur de la source et la hauteur de la source sont toujours inférieure ou égale à la largeur et la hauteur de l'image:

Pour la première si le bloc:

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

Ou comme un -liner:

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