我想在画布的所有方向上重新调整我的图像，但它只向右下角调整

提问者：小点点

我想在画布的所有方向上重新调整我的图像，但它只向右下角调整

我有一张画布，我在上面画了一幅图像。我会想要动画它:图像应该在所有的方向上放大（重新调整）（垂直和水平扩展，朝向顶部，右侧，底部和左侧，所有一起和同时）。

在每次迭代时，图像向画布的顶部和底部，左侧和右侧移动x像素:这是一个缩放。超出画布的图像像素变得不可见。

在每次迭代时，图像向画布的底部和右侧移动x像素:这是一个缩放。超出画布的图像像素变得不可见。

图像向画布的底部和右侧移动x像素，而不是向画布的顶部和底部，左侧和右侧移动x像素。

如何使图像向画布的顶部和底部，左侧和右侧移动x像素？

下载名为“my_img.jpg”的图像文件，将其存储在名为“my_dir”的目录中。您可以更改名称；考虑在下面的源代码中也更改它们（要更改的行:var images=[...)。

在同一目录中，将我的代码存储在一个名为“index.html”的文件中。

打开浏览器阅读“index.html”

点击“开始”按钮，动画将开始，你将看到我的问题。

注意ctx.drawImage(tmp_canvas，-(tmp_canvas.width-canvas.width）/2，-(tmp_canvas.height-canvas.height）/2）；的使用，它被censeed以在实际画布（其上下文是ctx)中绘制缩放图像（来自名为“tmp_canvas”的新画布）。我将缩放图像减去真实画布之间的差除以2，这通常对应于向左和向右扩展的缩放图像。顶面和底面也采用同样的工艺。

console.log(-(tmp_canvas.width-canvas.width）/2)；显示0，则不应该。 tmp_canvas.width应该是缩放图像的宽度。 canvas.width应为画布的宽度。

<html>
  <head>
    <title>Creating Final Video</title>
  </head>

  <body>
    <button id="start">Start</button>

    <canvas id="canvas" width="3200" height="1608"></canvas>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
      var images = ["my_dir/my_img.jpg"];

      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      var img = new Image();

      function showSomeMedia() {
        setImageListener();
        setImageSrc();
      }

      function setImageSrc() {
        img.src = images[0];
        img.crossOrigin = "anonymous";
      }

      function imgOnLoad() {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        ctx.restore();

        var tmp_canvas = canvas.cloneNode();
        var tmp_ctx = tmp_canvas.getContext("2d");

        function zoomInCanvas() {
          tmp_ctx.scale(1.001, 1.001);

          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.drawImage(
            tmp_canvas,
            -(tmp_canvas.width - canvas.width) / 2,
            -(tmp_canvas.height - canvas.height) / 2
          );
        }

        var i = 0;
        const interval = setInterval(function() {
          if (i == 100) {
            clearInterval(interval);
          }

          tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
          tmp_ctx.drawImage(canvas, 0, 0);
          requestAnimationFrame(zoomInCanvas);

          i++;
        }, 1000);
      }

      function setImageListener() {
        img.onload = function() {
          imgOnLoad();
        };
      }

      $("#start").click(function() {
        showSomeMedia();
      });
    </script>
  </body>
</html>

共1个答案

匿名用户

实际上，translation调用并不改变tmp_canvas图像的尺寸。所以我必须计算这些新的宽度和高度，并将它们存储在Parralel中。下面的代码可以很好地工作:

<html>
<head>
    <title>Creating Final Video</title>
</head>

<body>
<button id="start">Start</button>

<canvas id="canvas" width=3200 height=1608></canvas>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
var images = [
    'my_dir/my_img.jpg'
];

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var img = new Image();

function showSomeMedia() {
    setImageListener();
    setImageSrc();
}

function setImageSrc() {
    img.src = images[0];
    img.crossOrigin = "anonymous";
}

function imgOnLoad() {
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    ctx.restore();

    var tmp_canvas = canvas.cloneNode();
    var tmp_ctx = tmp_canvas.getContext("2d");
    var img_new_width = tmp_canvas.width;
    var img_new_height = tmp_canvas.height;

    function zoomInCanvas() {
        img_new_width *= 1.001
        img_new_height *= 1.001
        tmp_ctx.scale(1.001, 1.001);

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(tmp_canvas, -(img_new_width - canvas.width)/2, -(img_new_height - canvas.height)/2);
    }

    var i = 0;
    const interval = setInterval(function() {
            if(i == 100) {
                clearInterval(interval);
            }

            tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
            tmp_ctx.drawImage(canvas, 0, 0);
            requestAnimationFrame(zoomInCanvas);

            i++;
      }, 1000);
}

function setImageListener() {
    img.onload = function () {
       imgOnLoad();
    };
}

$('#start').click(function() {
    showSomeMedia();
});
</script>

</body>

</html>