HTML 5画布 - 旋转，缩放，翻译和绘制图像

Question

我正在尝试在画布内部放置一个html5图像。图像是使用CSS变换属性翻译，旋转和缩放。主要问题是如何复制图像的属性并在画布上将它们应用于。

您可以尝试下面的jsfiddle链接：可以缩放，移动和旋转图像，并且在绿色框中出现的任何图像都应该与红色中的相同。

https://jsfiddle.net/q7y1py5f/3/。在这里，我可以移动和缩放图像，但是当旋转开始时没有任何效果。这里是代码的错误我（在JavaScript的jsfiddle 58线）：

context.save(); 

context.translate(image.width/2, image.height/2); 
context.rotate(angle * Math.PI/180); 
context.translate(((-image.width)/2), ((-image.height)/2)); 

context.translate(-x, -y); 
context.scale(scale, scale); 

context.drawImage(image, 0, 0); 

context.restore(); 

这里x和y是绿色容器的左上角和图像左上角之间的差异。任何帮助，将不胜感激。

我已经设法让每个属性单独工作，但是当它们结合在一起时它不起作用。当我只翻译和缩放图像并应用到画布上下文时，一切都很好，但是当我在图像中添加旋转并不是它应该在的位置时。

我尝试了以下方法 - 用角度计算元素的左上角以获得正确的值，然后使用它进行平移和旋转。

Answer 1

在功能canvasCropping你写

var left = cropper.offset().left - img.offset().left, top = cropper.offset().top - img.offset().top,

但旋转和缩放将改变元件空间偏移，所以你有翻译错误的坐标系下。将其更改为： var left = -(cropper.offset().left - transform.translate.x-initialOffset.left), top = -(cropper.offset().top -transform.translate.y-initialOffset.top),

initialOffset - 图像的初始偏移量。

而在drawRotatedImage ' 变种drawRotatedImage =函数（上下文中，图像，X，Y，角度，宽度，高度，尺度）{

context.save(); 

    // Move registration point to the center of the canvas 
    context.translate(x+image.width/2,y+image.height/2); 
    context.rotate(angle* Math.PI/180);// angle must be in radians 
    context.scale(scale, scale); 
    // Move registration point back to the top left corner of canvas 
    context.translate((-image.width)/2, (-image.height)/2); 

    context.drawImage(image, 0, 0); 

    context.restore(); 
}; 

`