如何旋转图像的一部分答案

【问题标题】：How to rotate part of an image如何旋转图像的一部分
【发布时间】：2015-10-09 15:18:31
【问题描述】：

如何在画布上使用 javascript/jquery 仅旋转图像的一部分。我试图用倾斜和旋转来旋转图像，但我找不到任何答案，我们只能旋转图像的一部分。我使用的所有功能都会完全旋转图像。但是，尚未看到图像的部分旋转保持其余部分不变。

如果我只想旋转图像的一半或类似的东西，我该如何实现？？

此外，该功能应在图像旋转、移动以及动态调整大小时起作用。

【问题讨论】：

我不太了解这一点，无法获得权威，但我相信您可以在画布上获取表示图像的字节数组，然后使用一些数学来切换它们。
这解释了将画布复制为图像；也许它可以帮助你：stackoverflow.com/questions/5028696/…
没有只旋转部分图像的功能，您必须通过裁剪特定尺寸的原始图像来创建新图像，然后才能旋转新创建的裁剪图像。跨度>
请检查这个oridomi.com也许会有用
这不是唯一的问题，即使图像被调整大小移动和动态旋转也可以工作

标签： javascript jquery html canvas fabricjs

【解决方案1】：

使用drawImage() 裁剪图像并绘制该图像的另一个实例，您可以旋转该实例。

//from http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/
var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        // draw cropped image
        var sourceX = 150;
        var sourceY = 0;
        var sourceWidth = 75;
        var sourceHeight = 150;
        var destWidth = sourceWidth;
        var destHeight = sourceHeight;
        var destX = 0;
        var destY = 0;

        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
        drawRotated(12, imageObj, 225, sourceY, sourceWidth, sourceHeight, 75, destY, destWidth, destHeight);
      };
 imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

//from http://stackoverflow.com/a/17412387/1797161
function drawRotated(degrees, image, sx,sy,sw,sh,dx,dy,dw,dh){
    //context.clearRect(0,0,canvas.width,canvas.height);

    // save the unrotated context of the canvas so we can restore it later
    // the alternative is to untranslate & unrotate after drawing
    context.save();

    // move to the center of the canvas
    context.translate(canvas.width/2,canvas.height/2);

    // rotate the canvas to the specified degrees
    context.rotate(degrees*Math.PI/180);

    context.translate(-canvas.width/2,-canvas.height/2);
    // draw the image
    // since the context is rotated, the image will be rotated also
    context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

    // we’re done with the rotating so restore the unrotated context
    context.restore();
}

这是小提琴：http://jsfiddle.net/fjhhjh4s/

【讨论】：

【解决方案2】：

如果我必须这样做，我将使用相同的图像两次：一张完整的图像，以及我将旋转的带有剪辑（css 剪辑属性）的副本。

见https://css-tricks.com/clipping-masking-css/

（抱歉没用cmets，我还没等级……）

【讨论】：

【解决方案3】：

这是可能的，但对您的项目来说似乎并不实用。

您可以使用透视切片技术：

http://www.subshell.com/en/subshell/blog/image-manipulation-html5-canvas102.html

理想情况下，您需要定义一个从扭曲坐标系到原始笛卡尔坐标的公式映射，然后迭代目标像素空间，使用上述映射来确定该像素所需的颜色。

您还需要插入相邻像素以避免输出看起来“块状”。

这很重要……

【讨论】：

【解决方案4】：

如果您正在寻找裁剪和动画图像，您可以尝试使用 OriDomi 库。

[使用 OriDomi 卷曲图像][1]

[1]: https://jsfiddle.net/vipin7/jwqecvt3/17/

【讨论】：