使用画布旋转和裁剪图像

Question

我有可以将图像上传到服务器的Web应用程序。 我想在发送到服务器之前裁剪和旋转图像。 使用HTML 5 Canvas

执行此操作的任何方法

Answer 1

是的，html画布可以裁剪和旋转图像。

裁剪：使用context.drawImage的扩展属性。

context.drawImage(img,cropX,cropY,cropWidth,cropHeight,0,0,cropWidth,cropHeight);

旋转：使用context.rotate属性。

// set the point of rotation (example below sets rotation point at center-image)

context.translate(img.width/2,img.height/2);

// do the rotation (in radians)

context.rotate(radianAngle);

注意：除非context.save/context.restore，否则所有变换（平移，旋转等）都是累积的。