Lanczos 图像滤镜不适用于图像

Question

我在我的项目中使用 lanczos 过滤器来使图像质量良好。专门用于 canvas 上的上传图像。我已经使用了 Fabric.js 演示 · 实时 lanczos http://fabricjs.com/lanczos-webgl 它对我有用。

但它不适用于两个或更多图像。

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

请针对上述情况提出一些解决方案。

下面是我的脚本：

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

检查屏幕截图是否有问题。在此图像中，龙图像看起来不错，而 clear.But 口袋妖怪图像看起来不佳且图像模糊。检查这个 fiddle https://jsfiddle.net/AppleDev/xpvt214o/179163/

提前致谢

Answer 1

我认为您的代码中的问题在于您与所有图像共享同一个滤镜，因此图像的大小就像是根据您缩放的顺序随机调整的。

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

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

我认为使用特定的 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>

Lanczos 图像滤镜不适用于图像

Lanczos image filter is not applying to image

jquery

fabricjs

imagefilter