图像旋转和 Jcrop.js

Posted 2023-02-25

【中文标题】图像旋转和 Jcrop.js

【英文标题】：Image rotation and Jcrop.js

【发布时间】：2013-10-08 16:58:52

【问题描述】：

我需要先旋转图像，然后调用 Jcrop 来旋转图像。问题是，如果我在调用 Jcrop 时使用 css 属性或类似属性旋转图像，则旋转图像总是使用原始属性进行裁剪。

有什么帮助吗？

【参考方案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);