小编kra*_*ban的帖子

我正在使用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, …