如何使用 CamanJS 翻转画布答案

【问题标题】：How to flip canvas using CamanJS如何使用 CamanJS 翻转画布
【发布时间】：2014-02-04 20:37:05
【问题描述】：

所以我想使用 CamanJS 插件创建一个基于 Web 的图像编辑器，它被证明是一个爆炸，但我需要创建一个水平翻转功能，结果 CamanJS 没有这样的方法，我想把画布翻到 Caman 外面然后像这样重新加载它

context.translate(imageWidth / 2, imageHeight / 2);
context.scale(-1, 1);
context.drawImage(imageObj, - imageWidth / 2, - imageHeight / 2, imageWidth, imageHeight);
caman.reloadCanvasData();

但是什么也没发生，有人可以帮忙吗？

【问题讨论】：

标签： javascript html canvas camanjs

【解决方案1】：

翻转插件可能如下所示：

Caman.Plugin.register("flip", function () {
    var canvas, ctx;
    var width = this.canvas.width;
    var height = this.canvas.height;

    // Support NodeJS by checking for exports object
    if (typeof exports !== "undefined" && exports !== null) {
        canvas = new Canvas(width, height);
    } else {
        canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
    }

    ctx = canvas.getContext('2d');
    ctx.translate(width, 0);
    ctx.scale(-1, 1);
    ctx.drawImage(this.canvas, 0, 0);

    this.replaceCanvas(canvas);
    return this;
});

Caman.Filter.register("flip", function () {
    return this.processPlugin("flip");
});

【讨论】：

看起来你从github.com/prtksxna/ImageEditor/blob/master/resources/…复制/粘贴代码

【解决方案2】：

如果您要翻转填充画布的图像，请平移到画布的右侧。

context.translate( canvas.width,0  );
context.scale( -1,1 );
context.drawImage( imageObject,0,0 );

【讨论】：

仍然不起作用，问题是 CamanJS 使用它自己的上下文，而我尝试使用 caman 外部的上下文来翻转它，如果我删除 caman 图像翻转就好了，但如果我这样做我将无法使用卡曼滤镜
你不能像上面那样在html画布中翻转图像。然后保存到图像：newImage.src=theCanvas.toDataURL()。然后使用翻转的图像作为输入 Caman 的起点。