圖像旋轉和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);