Javascript 我想在画布的各个方向重新缩放我的图像，但它只朝右下角缩放上下文_Javascript_Html_Animation_Canvas

Javascript 我想在画布的各个方向重新缩放我的图像，但它只朝右下角缩放上下文

javascript html animation canvas

Javascript 我想在画布的各个方向重新缩放我的图像，但它只朝右下角缩放上下文,javascript,html,animation,canvas,Javascript,Html,Animation,Canvas,我有一张画布，在上面我画了一个图像。我想给它设置动画：图像应该在所有方向上放大（重新缩放）（垂直和水平扩展，向上、右、下和左侧，同时放大）预期结果在每次迭代中，图像向画布的顶部和底部、左侧和右侧移动x个像素：这是一次缩放。超出画布的图像像素将变得不可见实际结果在每次迭代中，图像都会向画布的底部和右侧移动x个像素：这是一次缩放。超出画布的图像像素将变得不可见问题图像向画布的底部和右侧移动x像素，而不是向画布的顶部和底部、左侧和右侧移动x像素问题如何使图像向画布的顶部和底部、左侧和右

我有一张画布，在上面我画了一个图像。我想给它设置动画：图像应该在所有方向上放大（重新缩放）（垂直和水平扩展，向上、右、下和左侧，同时放大）

预期结果在每次迭代中，图像向画布的顶部和底部、左侧和右侧移动x个像素：这是一次缩放。超出画布的图像像素将变得不可见

实际结果在每次迭代中，图像都会向画布的底部和右侧移动x个像素：这是一次缩放。超出画布的图像像素将变得不可见

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

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

最小可测试示例如何测试我的示例？

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

var images=[..

）

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

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

单击“开始”按钮，动画将开始，您将看到我的问题

来源评论注意

ctx.drawImage（tmp\u canvas，-（tmp\u canvas.width-canvas.width）/2，-（tmp\u canvas.height-canvas.height）/2）；

，它被授权在真实画布（其上下文为

ctx

）中绘制缩放图像（来自名为“tmp\u canvas”的新画布）.I除以2缩放图像减去真实画布之间的差值，这通常对应于绘制向左和向右展开的缩放图像。相同的技术用于顶部和底部

线索

console.log（-（tmp\u canvas.width-canvas.width）/2）

显示0，它不应该显示。

tmp\u canvas.width

应该是缩放图像的宽度。

canvas.width

应该是画布的宽度

index.HTML


创建最终视频
开始
var images=[“my_dir/my_img.jpg”]；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var img=新图像（）；
函数showSomeMedia（）{
setImageListener（）；
setImageSrc（）；
}
函数setImageSrc（）{
img.src=图像[0]；
img.crossOrigin=“匿名”；
}
函数imgOnLoad（）{
ctx.drawImage（img，0，0，canvas.width，canvas.height）；
ctx.restore（）；
var tmp_canvas=canvas.cloneNode（）；
var tmp_ctx=tmp_canvas.getContext（“2d”）；
函数zoomInCanvas（）{
tmp_ctx.刻度（1.001,1.001）；
clearRect（0，0，canvas.width，canvas.height）；
ctx.drawImage(
tmp_画布，
-（tmp_canvas.width-canvas.width）/2，
-（tmp_canvas.height-canvas.height）/2
);
}
var i=0；
const interval=setInterval（函数（）{
如果（i==100）{
间隔时间；
}
tmp_ctx.clearRect（0,0，tmp_canvas.width，tmp_canvas.height）；
tmp_ctx.drawImage（画布，0,0）；
requestAnimationFrame（缩放画布）；
i++；
}, 1000);
}
函数setImageListener（）{
img.onload=函数（）{
imgOnLoad（）；
};
}
$（“#开始”）。单击（函数（）{
showSomeMedia（）；
});

事实上，

translate

调用不会更改

tmp\U画布的图像尺寸。因此，我必须计算这些新的宽度和高度，并将它们存储在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>


创建最终视频
开始
变量图像=[
'my_dir/my_img.jpg'
];
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var img=新图像（）；
函数showSomeMedia（）{
setImageListener（）；
setImageSrc（）；
}
函数setImageSrc（）{
img.src=图像[0]；
img.crossOrigin=“匿名”；
}
函数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；
函数zoomInCanvas（）{
img_新_宽度*=1.001
img\U新高度*=1.001
tmp_ctx.刻度（1.001,1.001）；
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（函数（）{
如果（i==100）{
间隔时间；
}
tmp_ctx.clearRect（0,0，tmp_canvas.width，tmp_canvas.height）；
tmp_ctx.drawImage（画布，0,0）；
requestAnimationFrame（缩放画布）；
i++；
}, 1000);
}
函数setImageListener（）{
img.onload=函数（）{
imgOnLoad（）；
};
}
$（“#开始”）。单击（函数（）{
showSomeMedia（）；
});
我不知道如何解决代码中的其他一些问题，但是我可以帮助您从各个方向重新缩放图像

$（文档）.ready（函数（）{
$（“#可调整大小”）。可调整大小({
手柄：“北、东、南、西、东北、东南、西南、西北”
});
})；
#可调整大小{
宽度：50%；
边框：1px纯黑；
}
#可调整大小的img{
宽度：100%；
}
.ui可调整大小的句柄{
背景：红色；
边界：