Javascript 使用光标事件缩放图像的选定部分

我有这个问题：

我想要的是，当用户进行选择时，所选的部分会被放大。是否有方法实现这一点

这是迄今为止的代码：

  var canvas = document.getElementById("MyCanvas");
    var ctx = canvas.getContext('2d'),
        w = canvas.width,
        h = canvas.height,
        x1,
        y1,
        isDown = false;
    var img = new Image();
    img.src = "http://www.stockfreeimages.com/static/homepage/female-chaffinch-free-stock-photo-106202.jpg";
    canvas.onmousedown = function (e) {
        var rect = canvas.getBoundingClientRect();
        x1 = e.clientX - rect.left;
        y1 = e.clientY - rect.top;
        isDown = true;
    }
    canvas.onmouseup = function () {
        isDown = false;
    }
    canvas.onmousemove = function (e) {

        if (!isDown) return;

        var rect = canvas.getBoundingClientRect(),
            x2 = e.clientX - rect.left,
            y2 = e.clientY - rect.top;
        ctx.clearRect(0, 0, w, h);
        ctx.drawImage(img, 0, 0, w, h);
        ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
    }

    img.onload = function () {
        ctx.drawImage(img, 0, 0, w, h);
    };

---

我可以进行选择，但如何仅缩放选定零件？如本例所示：

对于那些希望在不使用画布的情况下实现缩放功能的人，这里有一个非常简单的

按空格键拖动

您所说的“仅缩放选定零件”到底是什么意思？您只想看到您选择的、放大的零件吗？或者你还想看到未放大的图像的其余部分吗？我只想看到通过预放大比例放大的选定部分我尝试了一些东西。请检查。第一个选择正是我想要实现的，但当我尝试进行第二个选择时，出现了一个问题：/您想如何重置缩放状态？您好，我们如何进行此图像的旋转，旋转后缩放将同样工作？@ArjunMandloi While

.zoombox img{transform:rotate（20deg）；}

将旋转图像，不幸的是，缩放旋转后的图像并不简单，缩放结果将从您的选择中删除。你也许可以通过在计算中反转旋转来纠正这个问题，但是你到底需要在哪里做，以及如何在之后纠正旋转图像的位置，使其与zoombox正确对齐，我不知道。。。我认为在这种情况下，你最好使用画布。