使用drawImage进行裁剪不适用于Safari

我正在使用canvas进行一些简单的图像处理function。 用户上传图像，能够旋转并裁剪图像，然后单击确定。 然后将图像分成两半，每半部分被镜像到两个canvas元素，如下所示：

原版的

镜像

这一切都适用于Chrome，Firefox，IE和Android设备。 Safari虽然不会很好玩。 除分割function外，所有图像处理都能正常工作。 它确实绘制了一个canvas元素，但另一个只是黑色。 我已经尝试过更改drawImage代码，但我无法让它工作。

这是function：

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

确切地说，if（isLeftSide）中的drawImage操作在Safari中不起作用。

有任何想法吗？

编辑：它似乎也不适用于iOS设备。 我已经读过在使用大图像时Safari和iOS设备可能会耗尽内存。 为了抵消这种情况（并减少一些延迟），我添加了一个resizefunction。 如有必要，将图像调整为最大宽度为800像素，高度为800像素，保持纵横比不变。 这是在任何其他图像处理之前完成的，但没有任何区别。

resizefunction：

 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

当从imageImage的边界调用drawImage()时会发生错误。

您必须仔细检查源宽度和源高度是否始终小于或等于图像的宽度和高度：

所以对于第一个if块：

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