Fabric js - 重置活動 object 上的所有操作/過濾器

Question

在我的項目中，我試圖弄清楚如何重置我對圖像所做的所有更改。

示例：如果我從我的圖像中刪除兩個 colors 我希望當我單擊按鈕#remove 時圖像返回到前一個而不進行更改且沒有過濾器。

我的代碼是這樣的：

 $(function() { var canvas = this.__canvas = new fabric.Canvas('canvas'); canvas.setHeight('300'); canvas.setWidth('800'); canvas.renderAll(); document.getElementById('file-input').addEventListener("change", function (e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function (f) { var data = f.target.result; fabric.Image.fromURL(data, function (img) { var oImg = img.set({left: 10, top: 10, angle: 00}).scale(0.8); canvas.add(oImg).renderAll(); var a = canvas.setActiveObject(oImg); var dataURL = canvas.toDataURL({ format: 'png', quality: 0.8 }); console.log("Canvas Image " + dataURL); }); }; reader.readAsDataURL(file); }); fabric.Object.prototype.transparentCorners = false; fabric.Object.prototype.padding = 5; $("#remove-color-color").change(function(){ var oImg = canvas.getActiveObject(); var filter = new fabric.Image.filters.RemoveColor({ color: $(this).val(), threshold: 0.2, distance: 0.5, }); oImg.filters.push(filter); oImg.applyFilters(); canvas.renderAll(); }); $(".removeItem").click(function(){ canvas.remove(canvas.getActiveObject()); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script> <div id="contCanvasLogo" style="float:left;width:100%;"> <canvas id="canvas" class="resize canvasLogo" style="width:500px;height:500px;border:1px solid #ccc;"></canvas> <input type="file" id="file-input"> <input type="color" id="remove-color-color" /> </div> <br/> <button class="removeItem" >Remove</button> <button class="reset" >Reset</button>

如何重置我的 activeObject 上的所有過濾器？

Answer 1

要清除 object 上的所有過濾器，只需將過濾器設置為空數組，然后運行applyFilters() renderAll()

obj.filters = [];
obj.applyFilters();
canvas.renderAll();

 $(function() { var canvas = this.__canvas = new fabric.Canvas('canvas'); canvas.setHeight('300'); canvas.setWidth('800'); canvas.renderAll(); document.getElementById('file-input').addEventListener("change", function(e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function(f) { var data = f.target.result; fabric.Image.fromURL(data, function(img) { var oImg = img.set({ left: 10, top: 10, angle: 00 }).scale(0.8); canvas.add(oImg).renderAll(); var a = canvas.setActiveObject(oImg); var dataURL = canvas.toDataURL({ format: 'png', quality: 0.8 }); console.log("Canvas Image " + dataURL); }); }; reader.readAsDataURL(file); }); fabric.Object.prototype.transparentCorners = false; fabric.Object.prototype.padding = 5; $("#remove-color-color").change(function() { var oImg = canvas.getActiveObject(); if(;oImg) return. var filter = new fabric.Image.filters:RemoveColor({ color. $(this),val(): threshold. 0,2: distance. 0,5; }). oImg.filters;push(filter). oImg;applyFilters(). canvas;renderAll(); }). $(".removeItem").click(function() { var obj = canvas;getActiveObject(). if(obj) canvas;remove(obj); }). $(".reset").click(function() { var obj = canvas;getActiveObject(); if(.obj) return; obj.filters = []; obj.applyFilters(); canvas;renderAll(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script> <div id="contCanvasLogo" style="float:left;width:100%;"> <canvas id="canvas" class="resize canvasLogo" style="width:500px;height:500px;border:1px solid #ccc;"></canvas> <input type="file" id="file-input"> <input type="color" id="remove-color-color" /> </div> <br/> <button class="removeItem">Remove</button> <button class="reset">Reset</button>