我正在使用画布进行一些简单的图像处理功能。用户上传图像，可以旋转和裁剪图像，然后单击“确定”。然后将图像分为两半，将每半绘制镜像到两个画布元素，如下所示：
在Chrome，Firefox，IE和Android设备上都可以很好地工作。Safari不会很好玩。除分割功能外，所有图像处理均正常。它确实绘制到画布元素之一，但另一个只是黑色。我已经尝试过更改drawImage代码，但是我无法使其正常工作。
功能如下：
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设备可能会用光内存。为了解决这个问题（并减少一些滞后），我添加了一个调整大小的功能。如有必要，将图像的大小调整为最大800 px宽度和800 px高度，并保持宽高比不变。这是在进行任何其他图像操作之前完成的，但没有任何区别。
调整大小功能：
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;
}
}
当drawImage()在sourceImage的边界之外调用时，会发生该错误。
您必须仔细检查源宽度和源高度是否始终小于或等于图像的宽度和高度：
所以对于第一个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);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句