图像旋转和Jcrop.js

Question

我需要先旋转图像，然后用此图像调用Jcrop之后再旋转。 问题是，如果我旋转带有css属性的图像或类似的东西（当我调用Jcrop时不这样），则旋转图像始终会使用原始属性进行裁剪。

有什么帮助吗？

Answer 1

如果图像没有CORS （跨源请求）问题（即，图像与网页位于同一域中，或者您可以控制图像所在的域并放置Access-Control-Allow-Origin图片上的标题），那么您可以在使用JCROP之前在画布上旋转图片。

var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
var img = document.getElementById('image1');
ctx.translate(canvas.width/2,canvas.height/2);
crx.rotate(180*Math.PI/180);
ctx.drawImage(img, -cache.width / 2, -cache.height / 2);