使用画布 drawImage 不透明度问题将图像包裹在圆柱体周围

Question

我需要使用 javascript 将图像包裹在杯子的另一个图像周围，我发现了这个： Wrap an image around a cylindrical object in HTML5 / JavaScript

这有助于加载左侧有杯子手柄的图像。但是，当使用相同的函数（调整位置值）时，图像会应用不透明度。我无休止地搜索以找出发生这种情况的原因，但我一无所获：/

这是用于包装带有右手柄的杯子的图像的函数：

function canvas2() {
 var canvas = document.getElementById('canvas2');
 var ctx = canvas.getContext('2d');

 var productImg = new Image();
 productImg.onload = function() {
   var iw = productImg.width;
   var ih = productImg.height;

   canvas.width = iw;
   canvas.height = ih;

   ctx.drawImage(
     productImg,
     0,
     0,
     productImg.width,
     productImg.height,
     0,
     0,
     iw,
     ih
   );
   loadUpperIMage();
 };

 productImg.src =
   'https://i.ibb.co/B2G8y1m/white-right-ear.jpg';

 function loadUpperIMage() {
   var img = new Image();
   img.src =
     'https://i.ibb.co/BnQP0TL/my-mug-image.png';

   img.onload = function() {
     var iw = img.width;
     var ih = img.height;

     var xOffset = 48, //left padding
         yOffset = 68; //top padding

     var a = 70; //image width
     var b = 8; //round ness

     var scaleFactor = iw / (6 * a);

     // draw vertical slices
     for (var X = 0; X < iw; X += 1) {
       var y = (b / a) * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation

       if (!isNaN(y)) {
         ctx.drawImage(
           img,
           X * scaleFactor,
           0,
           iw / 0.78,
           ih,
           X + xOffset,
           y + yOffset,
           1,
           162
         );
       }
     }
   };
 }

}

希望有人可以帮助解决这个问题！

这里是https://jsfiddle.net/L20aj5xr/的问题@

Answer 1

这是因为您传递给 drawImage 的第四个参数 - iw / 0.78。通过将图像宽度乘以小于 1 的值，可以得到大于图像宽度的值。 spec for drawImage 说：

当源矩形在源图像之外时，必须将源矩形剪裁到源图像和目标矩形必须按相同比例剪裁。

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

由于您使用的源宽度 (sw) 大于源图像大小，因此目标矩形“被按相同比例裁剪”。目标矩形宽度为 1 像素，因为您选择了它作为您绘制的每条垂直线的宽度，剪裁后它的宽度变为 1 * 0.78 = 0.78 像素。宽度现在小于 1px，老实说，我不确定它实际上是如何工作的，但我的猜测是浏览器仍然需要绘制 1px，但是因为源是 0.78px，它有点拉伸源到该 1px 并添加一些抗锯齿以平滑过渡，从而增加透明度（即浏览器没有足够的信息用于该 1px，它会尽力填充它）。你可以通过增加sw 来解决这个问题，并观察透明度的增加。

为了解决您的问题，我使用值 20 而不是 0.78 就像第一个杯子一样，它看起来还不错。