具有sliceHack调整大小过滤器的Fabric.js中的像素化图像

Question

我无法找到一种方法来使用“调整大小”滤镜（slideHack），而有时不会获得像素化图像。 我使用fabric.js 1.7.2

1. 我刚刚将图像添加到画布中

    fabric.Image.fromURL(url, function(oImg) { var scaling = 0.2; var rFilter = new fabric.Image.filters.Resize({ resizeType: 'sliceHack' }); oImg.resizeFilters.push(rFilter); oImg.applyFilters(); oImg.set({ left: 300, top: 300, scaleX: scaling, scaleY: scaling }); canvas.add(oImg); canvas.renderAll(); }); 

2. 当我单击图像或手动调整其大小时，边缘会变得光滑。

3. 当我应用色调滤镜时，它再次被像素化

我找不到触发平滑边缘的功能...

谢谢你的帮助。

Answer 1

文档Fabric.js简介，第2部分提出了以下语法，似乎可以解决该问题：

fabric.Image.fromURL('pug.jpg', function(img) {

  // add filter
  img.filters.push(filter);

  // apply filters and re-render canvas when done
  img.applyFilters(canvas.renderAll.bind(canvas));

  // add image onto canvas
  canvas.add(img);
});

将结果与下面的代码片段中的原始方法进行比较。 为了使它起作用，我还添加了{ crossOrigin: 'Anonymous' } （请参阅AndreaBogazzi对这个答案的评论）。

 var canvas = new fabric.Canvas('c'); var ctx = canvas.getContext("2d"); var url = 'http://i.imgur.com/a47Yxsb.png'; var imgWidth = 770; function performScaling() { // Get scaling factor var scaling = parseFloat(document.getElementById("txtScaling").value); canvas.clear(); // With original method fabric.Image.fromURL(url, function(oImg) { var rFilter = new fabric.Image.filters.Resize({ resizeType: 'sliceHack' }); oImg.resizeFilters.push(rFilter); oImg.applyFilters(); oImg.set({ left: 0, top: 16, scaleX: scaling, scaleY: scaling }); canvas.add(oImg); canvas.renderAll(); }); // As suggested in Fabric.js introduction fabric.Image.fromURL(url, function (oImg) { oImg.filters.push(new fabric.Image.filters.Resize({ resizeType: 'sliceHack', scaleX: scaling , scaleY: scaling })); oImg.set({ left: imgWidth * 1.1 * scaling, top: 16 }); oImg.applyFilters(canvas.renderAll.bind(canvas)); canvas.add(oImg); },{ crossOrigin: 'Anonymous' }); // Add labels canvas.add(new fabric.Text('Pixelated', { fontFamily: 'Arial', fontSize: 12, left: 0.48 * imgWidth * scaling, top: 0, fill: 'black', originX: 'center' })); canvas.add(new fabric.Text('Not pixelated', { fontFamily: "Arial", fontSize: 12, left: 1.58 * imgWidth * scaling, top: 0, fill: 'black', originX: 'center' })); } 

 #divScaling { display: inline-block; vertical-align: middle; margin: 6px 32px 16px 0px; vertical-align: top; } #txtScaling { width: 70px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.2/fabric.min.js"></script> <div id="divScaling"> <label for="txtScaling">Scaling factor: </label> <input id="txtScaling" type="text" value="0.2" /> <button onclick="performScaling()"> Scale </button> </div> <img src="http://i.imgur.com/a47Yxsb.png" style="width: 30px;height: 30px;"/> <canvas id="c" width="600" height="400"></canvas> 

Answer 2

我认为像素化问题已在版本2中修复。Edge比版本1.72更平滑

注意v2中的重大更改：

另一个重大变化是.resizeFilters不再是调整大小筛选器数组。 是在画布上缩放对象时可以使用的单个resizeFilter。

image.resizeFilter =新的fabric.Image.filters.ResizeFilter（{type：'hermite'}）;

 var canvas = new fabric.Canvas('c'); var ctx = canvas.getContext("2d"); var url = 'http://i.imgur.com/a47Yxsb.png'; var imgWidth = 1024; function performScaling() { // Get scaling factor var scaling = parseFloat(document.getElementById("txtScaling").value); canvas.clear(); // As suggested in Fabric.js introduction fabric.Image.fromURL(url, function (oImg) { oImg.set({ left: imgWidth * 1.1 * scaling, top: 16 }); oImg.scale(scaling); oImg.resizeFilter = new fabric.Image.filters.Resize({ resizeType: 'sliceHack' }); oImg.applyResizeFilters(); canvas.add(oImg); canvas.renderAll(); // canvas.setBackgroundImage( // oImg, // () => { // canvas.renderAll(); // }, // ); },{ crossOrigin: 'Anonymous' }); // Add labels canvas.add(new fabric.Text('Not pixelated', { fontFamily: "Arial", fontSize: 12, left: 1.58 * imgWidth * scaling, top: 0, fill: 'black', originX: 'center' })); } 

 #divScaling { display: inline-block; vertical-align: middle; margin: 6px 32px 16px 0px; vertical-align: top; } #txtScaling { width: 70px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.4/fabric.min.js"></script> <div id="divScaling"> <label for="txtScaling">Scaling factor: </label> <input id="txtScaling" type="text" value="0.2" /> <button onclick="performScaling()"> Scale </button> </div> <img src="http://i.imgur.com/a47Yxsb.png" style="width: 30px;height: 30px;"/> <canvas id="c" width="600" height="400"></canvas>