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

Question

我在我的项目中使用 lanczos 过滤器来制作高质量的图像。特别适用于画布上的上传图像。 我已经使用了 Fabric.js 演示 · 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);
        });

检查屏幕截图是否有问题。在此图像中，龙龙图像看起来很好且清晰。但口袋妖怪图像看起来不太好并且图像模糊。 检查这个小提琴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>