使用drawImage裁剪在Safari中不起作用 [英] Cropping with drawImage not working in Safari

问题描述

我正在使用canvas来处理一些简单的图像处理函数。
用户上传图片，能够旋转和裁剪，然后点击确定。
然后将图像分成两半，每一半绘制为镜像到两个canvas元素，如下所示：

I'm working on some simple image manipulation functions with canvas. The user uploads an image, is able to rotate and crop it and then clicks ok. The image is then split in half with each half drawn mirrored to two canvas elements, like this:

原创

Mirrored

这一切在Chrome，Firefox，IE和Android设备上都很出色。
Safari不会玩得很好。所有的图像操作工作正常，除了分割功能。它画到一个画布元素，但另一个只是黑色。我尝试改变drawImage代码，但我只是不能让它工作。

It all works great in Chrome, Firefox, IE and Android devices. Safari won't play nice though. All the image manipulation works fine except the split function. It does draw to one of the canvas elements, but the other is just black. I've tried changing the drawImage code around, but I just can't get it to work.

这里是函数：

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）在Safari中工作。

To be exact, it's the drawImage operations inside the if(isLeftSide) that doesn't work in Safari.

任何想法？

编辑：
在iOS设备上工作。
我读过，使用大图片时，Safari和iOS设备可能会耗尽内存。
为了抵消这一点（并减少一些滞后）我添加了一个resize函数。如果需要，将图像调整为最大800像素宽度和800像素高度，保持高宽比不变。

It doesn't seem to work on iOS devices either. I've read that Safari and iOS devices might run out of memory when working with large images. To counteract this (and reduce some lag) I've added a resize function. The image is resized to a maximum of 800 px width and 800 px height if necessary, keeping the aspect ratio intact. This is done before any other image manipulation is done, but it hasn't made any difference.

调整大小功能：

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的边界外调用时会发生错误。

The bug occurs when drawImage() is called out of the bounds of the sourceImage.

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

You have to double check that the source width and source height are always smaller or equal to the image's width and height :

所以对于第一个if块：

So for the first if block :

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

这篇关于使用drawImage裁剪在Safari中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！