javascript - 当在Safari中捕获超过源图像的大小时，drawImage显示为空白

我在画布上做一个放大镜

Github中有一个项目和演示：

https://github.com/jy1989/canvas.magnifier.js/blob/master/canvas.magnifier.js

http://jy1989.github.io/magnifier/demo.html

在Chrome中工作正常，但在Safari中出现问题

将鼠标移到画布的边框附近时，将显示空白。由于源图像的捕获大小已超过：



例

1 sx
2 sHeight的结束位置或sWidth的结束位置在源图像上方

这将使Safari中的drawImage显示为空白

那么如何使它工作呢？

最佳答案

这很可能是Safari中的错误。 specs states：


  当源矩形位于源图像之外时，源
  矩形必须裁剪到源图像和目标
  矩形必须以相同比例修剪。


因此，要解决此问题，您必须手动剪切源矩形。

一种方法可能是这样的（仅显示源代码）：

if (sx < 0) {
    sw += sx;
    sx = 0;
}

if (sy < 0) {
    sh += sy;
    sy = 0;
}

if (sx + sw > image.width) {
    sw = image.width - sx
}

if (sy + sh > image.height) {
    sh = image.height - sy
}

if (sx >= image.width || sy >= image.height) { // abort }
if (sw <= 0 || sh <= 0) throw "Index Size error";  // or abort..