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

【问题标题】：Making canvas mirror, scale and rotate制作画布镜像、缩放和旋转
【发布时间】：2016-01-03 14:20:27
【问题描述】：

我在这里遇到了一个非常棘手的问题。我的主要目标是尝试制作具有在 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>

任何帮助将不胜感激。

谢谢

【问题讨论】：

标签： javascript jquery html html5-canvas

【解决方案1】：

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

我建议删除这些：

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

而是在你的 putImageData 函数中使用类似的东西：

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

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

【讨论】：