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

Question

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

原版的

镜像

这一切都适用于Chrome,Firefox,IE和Android设备.Safari虽然不会很好玩.除分割功能外,所有图像处理都能正常工作.它确实绘制了一个canvas元素,但另一个只是黑色.我试过更改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像素,高度为800像素,保持纵横比不变.这是在任何其他图像处理之前完成的,但没有任何区别.

调整大小功能:

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

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