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

检查截屏是否有问题。在这个图像drangon图像看起来很好，清晰。但口袋妖怪图像不好看，模糊图像。检查这个小提琴https://jsfiddle.net/AppleDev/xpvt214o/179163/

先谢谢

Answer 1

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

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

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

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

char[]

$(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);
        });
});

Lanczos图像滤镜不适用于图像

1 个答案: