制作画布镜像、缩放和旋转

我在这里遇到了一个非常棘手的问题。我的主要目标是尝试在CSS3中应用精确变换来制作图像的"精确"副本。我所做的，你可以看到此处

在左边，我有一个包含image标签的div，在右边，我试图用canvas元素来复制它。在顶部，您可以为左侧的原始区域选择控制选项。您可以通过在控制区域中设置值来旋转或缩放它。

现在尝试将其缩放到0.5并旋转45度。现在你可以看到图像被重新定位，也从四个侧面裁剪，我希望它和左边的一模一样。我在这里几乎没有试过数学，但我觉得我高估了一些非常基本的

为了制作副本，我正在使用以下脚本

function myCopy(){
            var cache = document.getElementById('mimg');
            var canvas = document.createElement('canvas');
            var cxt = canvas.getContext("2d");
            var ang = getRotationDegrees($("#mimg")) * Math.PI / 180;
            var scle = getScaleValue($("#mimg"));
            var p = $("#mimg").position(); 
            var c_w = cache.width*scle;
            var c_h = cache.height*scle;
            canvas.width = c_w;
            canvas.height = c_h;
            cxt.save();
            cxt.translate(c_w/2,c_h/2);
            cxt.rotate(ang);
            cxt.translate(-c_w/2,-c_h/2);
            cxt.drawImage(cache,0,0,c_w,c_h);
            var myData = cxt.getImageData(0, 0, c_w,c_h);                
            cxt.restore();
            var dcan = document.getElementById("myCanvas");
            var cxt1 = dcan.getContext('2d');
            cxt1.save();
            cxt1.fillStyle = "rgb(255,255,255)";
            cxt1.fillRect(0,0,cache.width, cache.height);
            cxt1.putImageData(myData,0,0,0,0,c_w,c_h);
            cxt1.restore();
            $("#holder").css("left",p.left);
            $("#holder").css("top",p.top);
        }

这是我左边区域（原始区域）的html结构

<div id="divclip" style="position:relative;width: 600px; height:600px;overflow: hidden;border: solid 1px black">
        <div style="border: 1px solid red;display:inline-block">
            <img id="mimg" class="clip-svg" src="1.png" alt="Harry Potter">
        </div>
    </div>

这里是右边的区域（从myCopy功能创建的副本）

        <div style="position: absolute; left: 650px; top:35px;border:1px solid #d3d3d3;">
        <div id="holder" style="position:relative; left: 0px; top: 0px;border:1px solid red;">
            <canvas id="myCanvas" width="600" height="600" style="">
            </canvas>                
        </div>
    </div>

任何帮助都将不胜感激。

感谢