javascript - 制作 Canvas 镜像、缩放和旋转

Question

我在这里遇到了一个非常棘手的问题。我的主要目标是尝试制作图像的“精确”副本，并在 CSS3 中应用精确转换。我做了什么，你可以看到 here

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

现在尝试将它缩放到 0.5 并旋转 45 度。现在您可以看到图像已重新定位，并且还从所有 4 个侧面进行了裁剪，我希望它与左边的完全一样。我在这里尝试了一些数学，但我觉得我看起来过于基础了

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

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>

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

您通过使用 css 移动 holder div 来定位复制的图像，而不是使用 putImageData 参数定位它。

我建议删除这些:

$("#holder").css("left",p.left);
$("#holder").css("top",p.top);

而是在您的 putImageData 函数中使用如下内容:

cxt1.putImageData(myData,p.left, p.top);

由于我无法测试您的代码，因此它不会是完美的。我建议制作一个 jsFiddle，这样人们就可以更轻松地帮助您编写代码。