Lanczos图像滤波器不适用于图像

Question

我在我的项目中使用lanczos过滤器来提高形象的质量。专门用于在画布上上传图片。我已经使用了Fabric.js demos·Realtime lanczos http://fabricjs.com/lanczos-webgl，它正在为我工作。

，但是它不能处理两个或更多的图像.

当我在画布上添加两个或更多的图像时，我放大了一个图像。工作正常。但我放大了另一张图像，然后第一张图像变得模糊或无法正确显示。当我缩放图像时，它会影响其他图像。

请对上述情况提出一些解决办法。

下面是我的剧本：

        jQuery('#cust_image').change(function(e) {
            var file = e.target.files[0];  //alert(JSON.stringify(e.target.files[0]));
            var reader = new FileReader();
            var r = canvas.getRetinaScaling();
            reader.onload = function(f) {
                var data = f.target.result;  
                console.log(data);
                fabric.Image.fromURL(data, function(cimg) {
                    var oImg = cimg.set({
                        left: 0,
                        top: 0,
                        angle: 00,
                        centeredScaling: true,
                        hasRotatingPoint: false
                    }).scale(0.3);

                    lanczosFilter.scaleX = lanczosFilter.scaleY = oImg.scaleX * r;
                    oImg.lockScalingFlip = true;
                    oImg.minScaleLimit = 0.025;
                    oImg.padding = 5;
                    oImg.filters = [lanczosFilter];
                    //oImg.hoverCursor = 'crossHair';

                    oImg.on('scaling', function(opt) {
                        var filters = [];
                        var sX = Math.abs(this.scaleX) * r, sY = Math.abs(this.scaleY) * r;
                        if (sX > 0.01 && sY > 0.01 && sX < 1 && sY < 1) {
                            if (sX <= 0.2 || sY <= 0.2) {
                                lanczosFilter.lanczosLobes = 2;
                            } else if (sX <= 0.05 || sY <= 0.05) {
                                lanczosFilter.lanczosLobes = 1;
                            } else {
                                lanczosFilter.lanczosLobes = 3;
                            }
                            lanczosFilter.scaleX = sX;
                            lanczosFilter.scaleY = sY;
                            filters.push(lanczosFilter);
                        }
                        this.filters = filters;
                    });

                    canvas.add(oImg).renderAll();
                    var a = canvas.setActiveObject(oImg);   
                    canvas.on('before:render', function() {
                        oImg.applyFilters();                    
                    });
                    var dataURL = canvas.toDataURL({
                        format: 'png',
                        quality: 0.8
                    });     
                });
            };
            reader.readAsDataURL(file);
        });

检查屏幕截图是否有问题。在这个图像中，drangon图像看起来很好，clear.But中的pokemon图像看起来不好看，模糊的图像。看看这把小提琴https://jsfiddle.net/AppleDev/xpvt214o/179163/

​

​

提前谢谢

Answer 1

我认为您的代码中的问题是，您与所有图像共享相同的过滤器，因此图像就像随机调整大小，这取决于您进行缩放的顺序。

请检查此版本的代码，看看它是否有用。

不同之处在于，我正在为您在画布上加载的每个图像创建一个新的过滤器。

我认为使用特定的Image.resizeFilter属性更好地完成这项工作，不确定现在如何预先设置一个示例

​

$(function() {
	var canvas = new fabric.Canvas('can',{
		imageSmoothingEnabled: false,
		enableRetinaScaling: false,
		fireRightClick: true,
		stopContextMenu: true,
	});
  
  function newFilter() {
    return new fabric.Image.filters.Resize({
      scaleX: 1,
      scaleY: 1,
      resizeType: 'lanczos',
      lanczosLobes: 3,
    });
  }
  
  /* For Image quality */
	

	var p = {
		x: 0,
		y: 0,
	};
  
  jQuery('#cust_image').change(function(e) {
            var file = e.target.files[0];  //alert(JSON.stringify(e.target.files[0]));
            var reader = new FileReader();
            var r = canvas.getRetinaScaling();
            reader.onload = function(f) {
                var data = f.target.result;  
                fabric.Image.fromURL(data, function(oImg) {
                    oImg.set({
                        left: 0,
                        top: 0,
                        angle: 00,
                        centeredScaling: true,
                        hasRotatingPoint: false
                    }).scale(0.3);
                    var lanczosFilter = newFilter();
                    lanczosFilter.scaleX = lanczosFilter.scaleY = oImg.scaleX * r;
                    oImg.lockScalingFlip = true;
                    oImg.minScaleLimit = 0.025;
                    oImg.padding = 5;
                    oImg.filters = [lanczosFilter];

                    oImg.on('scaling', function(opt) {
                        var lanczosFilter = this.filters[0];
                        var sX = Math.abs(this.scaleX) * r, sY = Math.abs(this.scaleY) * r;
                        if (sX > 0.01 && sY > 0.01 && sX < 1 && sY < 1) {
                            if (sX <= 0.2 || sY <= 0.2) {
                                lanczosFilter.lanczosLobes = 2;
                            } else if (sX <= 0.05 || sY <= 0.05) {
                                lanczosFilter.lanczosLobes = 1;
                            } else {
                                lanczosFilter.lanczosLobes = 3;
                            }
                            lanczosFilter.scaleX = sX;
                            lanczosFilter.scaleY = sY;
                        }
                    });
                    canvas.add(oImg);
                    var a = canvas.setActiveObject(oImg);   
                    canvas.on('before:render', function() {
                        oImg.applyFilters();                    
                    });     
                });
            };
            reader.readAsDataURL(file);
        });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="cust_image" class="form-control" />
<canvas id="can" height="600" width="600"></canvas>

​