在Safari中捕获源图像大小时，drawImage显示为空白

Question

我在画布上制作放大镜

Github中有项目和演示：

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

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

在Chrome中正常运行，但在Safari中遇到了问题

当将鼠标移动到画布的布局附近时，它显示为空白。因为源图像的捕获大小已经结束：

实施例

1 sx <0或sy <0

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

这会使drawImage在safari中显示为空白

那我怎样才能让它发挥作用呢？

Answer 1

这很可能是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..