有没有人使用旋转插件在camanjs上工作得很好?我已经使用cofee编译了camanjs并包含了额外的插件。其中一个是旋转。 rotate插件如下
Caman.Plugin.register("rotate", function(degrees) {
var angle, canvas, ctx, height, to_radians, width, x, y;
angle = degrees % 360;
if (angle === 0) {
return this.dimensions = {
width: this.canvas.width,
height: this.canvas.height
};
}
to_radians = Math.PI / 180;
if (typeof exports !== "undefined" && exports !== null) {
canvas = new Canvas();
} else {
canvas = document.createElement('canvas');
Util.copyAttributes(this.canvas, canvas);
}
if (angle === 90 || angle === -270 || angle === 270 || angle === -90) {
width = this.canvas.height;
height = this.canvas.width;
x = width / 2;
y = height / 2;
} else if (angle === 180) {
width = this.canvas.width;
height = this.canvas.height;
x = width / 2;
y = height / 2;
} else {
width = Math.sqrt(Math.pow(this.originalWidth, 2) + Math.pow(this.originalHeight, 2));
height = width;
x = this.canvas.height / 2;
y = this.canvas.width / 2;
}
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext('2d');
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle * to_radians);
ctx.drawImage(this.canvas, -this.canvas.width / 2, -this.canvas.height / 2, this.canvas.width, this.canvas.height);
ctx.restore();
return this.replaceCanvas(canvas);
});
加
Caman.Filter.register("rotate", function() {
return this.processPlugin("rotate", Array.prototype.slice.call(arguments, 0));
});
HTML
<img id="myimage" src="image.src">
的javascript
caman = Caman("#myimage");
caman.rotate(45);
caman.render();
但是当以90度,270度-90度或180度-180度以外的度数旋转时,结果是不需要的,因为图像被“吃掉”#34;在边缘
有趣的是,当击中恢复时(假设我想要将旋转图像的亮度改变一次以上),原始图像会出现在画布上但是会失真
第三个问题是如果你将图像旋转90度,一切都很好,图像会旋转并保持原位(左侧)。但是如果你进行45度旋转,画布不会重新调整尺寸,图像会保持在中间。这可以解决吗?有没有人让它正常工作?你会建议另一个图书馆吗?我需要旋转功能。
答案 0 :(得分:0)
Caman.Plugin.register("rotate", function(degrees) {
// add this 3 lint at last into the function.
this.angle += degrees;
this.rotated = true;
return this.replaceCanvas(canvas);
}
Caman.prototype.originalVisiblePixels = function () {
var canvas, coord, ctx, endX, endY, i, imageData, pixel, pixelData, pixels, scaledCanvas, startX, startY, width, _i, _j, _len, _ref, _ref1, _ref2, _ref3;
if (!Caman.allowRevert) {
throw "Revert disabled";
}
pixels = [];
startX = this.cropCoordinates.x;
endX = startX + this.width;
startY = this.cropCoordinates.y;
endY = startY + this.height;
if (this.resized) {
canvas = document.createElement('canvas');
canvas.width = this.originalWidth;
canvas.height = this.originalHeight;
ctx = canvas.getContext('2d');
imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
pixelData = imageData.data;
_ref = this.originalPixelData;
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
pixel = _ref[i];
pixelData[i] = pixel;
}
ctx.putImageData(imageData, 0, 0);
scaledCanvas = document.createElement('canvas');
scaledCanvas.width = this.width;
scaledCanvas.height = this.height;
ctx = scaledCanvas.getContext('2d');
ctx.drawImage(canvas, 0, 0, this.originalWidth, this.originalHeight, 0, 0, this.width, this.height);
pixelData = ctx.getImageData(0, 0, this.width, this.height).data;
width = this.width;
}
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
} else {
pixelData = this.originalPixelData;
width = this.originalWidth;
}
for (i = _j = 0, _ref1 = pixelData.length; _j < _ref1; i = _j += 4) {
coord = Pixel.locationToCoordinates(i, width);
if (((startX <= (_ref2 = coord.x) && _ref2 < endX)) && ((startY <= (_ref3 = coord.y) && _ref3 < endY))) {
pixels.push(pixelData[i], pixelData[i + 1], pixelData[i + 2], pixelData[i + 3]);
}
}
return pixels;
};
Caman.prototype.reset = function() {
//....
this.angle = 0;
this.rotated = false;
}