如果您在 CamanJS 中使用旋转插件,那么当您尝试恢复更改时会出现问题。 Caman 仅以在裁剪或调整图像大小时有效的方式实现,但在旋转图像时则无效。当您恢复并且图像旋转时,图像会重新加载扭曲,因为它没有考虑 Canvas 已旋转并更改了大小。而且 Canvas 的 imageData.data 现在也不同了。所以我想我通过查看他如何实现调整大小来解决这个问题。基本上我所做的(他也做了)是:
- 在初始状态下创建 Canvas
- 从初始状态更新他的像素数据
- 创建一个新 Canvas
- 用初始图像旋转他
- 获取 ImageData 并重新渲染它们
所以我添加了什么。我需要知道图像旋转了多少 Angular ,以便在旋转新 Canvas 时获得正确的图像数据(步骤 4)。
this.angle=0; //added it in the constructor
我还在构造函数中添加了一个新的 bool 值来告诉我 Canvas 是否旋转
this.rotated = false;
在旋转的插件中:
Caman.Plugin.register("rotate", function(degrees) {
//....
//....
//....
this.angle += degrees;
this.rotated = true;
return this.replaceCanvas(canvas);
}
在原始VisiblePixels原型(prototype)上:
else if (this.rotated){
canvas = document.createElement('canvas');//Canvas for initial state
canvas.width = this.originalWidth; //give it the original width
canvas.height = this.originalHeight; //and original height
ctx = canvas.getContext('2d');
imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
pixelData = imageData.data;//get the pixelData (length equal to those of initial canvas
_ref = this.originalPixelData; //use it as a reference array
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
pixel = _ref[i];
pixelData[i] = pixel; //give pixelData the initial pixels
}
ctx.putImageData(imageData, 0, 0); //put it back on our canvas
rotatedCanvas = document.createElement('canvas'); //canvas to rotate from initial
rotatedCtx = rotatedCanvas.getContext('2d');
rotatedCanvas.width = this.canvas.width;//Our canvas was already rotated so it has been replaced. Caman's canvas attribute is allready rotated, So use that width
rotatedCanvas.height = this.canvas.height; //the same
x = rotatedCanvas.width / 2; //for translating
y = rotatedCanvas.width / 2; //same
rotatedCtx.save();
rotatedCtx.translate(x, y);
rotatedCtx.rotate(this.angle * Math.PI / 180); //rotation based on the total angle
rotatedCtx.drawImage(canvas, -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height); //put the image back on canvas
rotatedCtx.restore(); //restore it
pixelData = rotatedCtx.getImageData(0, 0, rotatedCanvas.width, rotatedCanvas.height).data; //get the pixelData back
width = rotatedCanvas.width; //used for returning the pixels in revert function
}
您还需要在重置原型(prototype)函数中添加一些重置。基本上重置 Angular 并旋转
Caman.prototype.reset = function() {
//....
//....
this.angle = 0;
this.rotated = false;
}
就是这样。
我使用过它并且到目前为止一直有效。你觉得怎么样?希望对你有帮助
最佳答案
谢谢你,稍作修改后就可以了。
在 OriginalVisiblePixels 原型(prototype)内的 else if 语句中,我更改了:
x = rotatedCanvas.width / 2; //for translating
y = rotatedCanvas.width / 2; //same
至:
x = rotatedCanvas.width / 2; //for translating
y = rotatedCanvas.height/ 2; //same
在此之前更改我的图像被剪切的位置。
关于javascript - CamanJS 恢复和旋转修复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22526688/