如何使用CamanJS翻轉畫布

所以我想創建一個基於Web的圖像編輯器使用CamanJS插件，它證明是一個爆炸，但我需要創建一個翻轉水平功能，事實證明CamanJS沒有方法對於這一點，我在想翻轉Caman外畫布並重新加載它喜歡這個如何使用CamanJS翻轉畫布

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

但是什麼都沒有發生，任何人都可以幫忙嗎？

來源

2013-07-29 Devon Ericko Sulistio

如果您翻轉填充畫布的圖像，請翻譯至畫布右側。

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

來源

2013-07-29 05:22:12 markE

還不行，問題是CamanJS使用它自己的範圍內，而我嘗試使用外caman背景下翻轉，如果我刪除圖像卡曼翻轉得很好，但如果我這樣做，我將無法使用卡曼濾鏡 –

難道你不能像上面那樣在HTML畫布中翻轉圖像。然後保存到圖像：newImage.src = theCanvas.toDataURL（）。然後使用翻轉的圖像作爲起點輸入卡曼。 – markE

我用了一個新的畫布，而且......它的工作，非常感謝！ –

這裏是翻蓋的插件可能看起來像：

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

來源

2014-02-04 12:37:05

看起來像你從https://github.com/prtksxna/ImageEditor/blob/master/resources/caman.flip.js複製/粘貼代碼 –

如何使用CamanJS翻轉畫布

回答

相關問題