调整大小 canvas element/shape

Question

我主要是在创建一个小脚本，允许您上传图像，用黄色框标记图像上的某处，然后保存图像。我为此使用 HTML5 canvas。我已经准备好一切，上传图片并为其添加形状，但现在我已经知道要上传的各种尺寸的图片，我需要 'shape'（黄色矩形）才能调整大小.我有一个滑块，当它们沿着滑块放置在某处时，它会输出 2 个数字（宽度和高度）。这调用 onSizeChange:

    function onSizeChange(x2,y2) {
        context.clearRect(<?php echo $xcoord;?>, <?php echo $ycoord;?>, 30, 30);
        context.beginPath();
        context.rect(<?php echo $xcoord;?>, <?php echo $ycoord;?>, x2, y2);
        context.fillStyle = 'yellow';
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = 'black';
        context.stroke();
}

这种有预期的效果，但它也删除了背景图像块（不仅仅是黄色矩形），而且它只会从 30,30 调整大小（这是它清除的位，并且是原始自动矩形大小）。

我正在努力做到这一点，我什至尝试清除整个 canvas 并从头开始重新绘制，但即使遇到问题，任何帮助将不胜感激！

Answer 1

您可以使用基于任意大小的初始黄色框大小。然后加载图像时使用此任意大小来创建比例因子。

例如：

// lets say the yellow box' size is relative to:
var bWidth = 800,         // our "calibration" size.
    bHeight = 600,
    initialWidth = 50,    // size of yellow box relative
    initialHeight = 50;   // to "calibration" size.

加载图像并计算比例因子：

var scaleX = image.width / bWidth;
var scaleY = image.height / bHeight;

现在只需将 scaleX/Y 乘以初始框大小即可：

var newWidth = initialWidth * scaleX;
var newHeight = initialHeight * scaleY;

调整大小 canvas element/shape

Resize canvas element/shape

html

jquery

resize

canvas