Question

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

在左边我有一个包含图像标签的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>

非常感谢任何帮助。

由于

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，以便人们更容易帮助您编写代码。

制作帆布镜，缩放和旋转

1 个答案: