Question

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

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

这里的功能是：

#include <windows.h>

确切地说，它是在if（isLeftSide）中不能在Safari中工作的drawImage操作。

有什么想法吗？

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

调整大小功能：

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

Answer 1

当从{1}}调出sourceImage的边界时，会发生错误。

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

所以对于第一个if块：

drawImage()

或者作为一个单行：

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

使用drawImage进行裁剪在Safari中无法正常工作

1 个答案: