javascript - camanjs 和旋转插件无法正常工作

Question

有没有人让旋转插件与 camanjs 配合得很好？我已经使用 cofee 编译了 camanjs 并包含了额外的插件。其中之一是旋转。旋转插件如下

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 以外的度数旋转时，结果是不想要的，因为图像在边缘被“吃掉”

有趣的是，当点击还原时（假设我想多次更改旋转图像的亮度）然后原始图像出现在画布上但扭曲了

第三个问题是，如果将图像旋转 90 度，一切正常，图像会旋转并保持在原来的位置（左侧）。但是，如果您旋转 45 度，画布不会重新调整为大小，并且图像会停留在中间。这可以修复吗？有没有人让它正常工作？你会建议另一个图书馆吗？我需要旋转功能。

Answer 1

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;
}