javascript - KineticJS:如何在不降低质量的情况下编辑比我的屏幕/舞台尺寸大得多的图像？

Question

我在 iPhone 5 上有一个 KineticJS 5.1.0 舞台。由于 iPhone 的屏幕尺寸，我的舞台限制为 320px x 320px。我捕获的图像是 1280px x 1280px。我希望能够在舞台上处理此图像而不会因收缩而降低质量。

这是原始图像(大版本:https://dl.dropboxusercontent.com/u/47067729/originalImage2.jpg):

这是当我将图像加载到舞台上时发生的情况:

图像看起来很奇怪，正如您在图像上看到的那样，内部有很多 strip 。

当我应用过滤器时，图像看起来像这样。

这不是它应该的样子。

我创建了一个 JsFiddle ( http://jsfiddle.net/confile/qhm7dn09/) 来显示这个问题

console.clear();


var imageObj = new Image();
var img = null;
var saveBtn = document.getElementById("save");
var resultImage = document.getElementById("resultImage");
var original = document.getElementById("original");
var downloadLink = document.getElementById("DownloadLink");

Kinetic.pixelRatio = 4;
stage = new Kinetic.Stage({
        container: 'container',
        width: 320,
        height: 320
    });
layer = new Kinetic.Layer();

img = new Kinetic.Image({
    x: 0,   
    y: 0,   
    image: new Image()
});

layer.add(img);
stage.add(layer);

imageObj.onload = function() {

    var tmpWidth = Math.floor(imageObj.width /2);
    var w = Math.min(tmpWidth, 320);
    var h = imageObj.height * w / imageObj.width;

    img.setImage(this);
    img.setWidth(w);
    img.setHeight(h);

    img.cache(); // 5.1.0

  //  img.setFilter(Kinetic.Filters.Shinny);  // 4.5.2.
    img.filters([Kinetic.Filters.Shinny]); // 5.1.0
    layer.draw();
};

imageObj.crossOrigin = "anonymous";
var imageUrl = "https://dl.dropboxusercontent.com/u/47067729/originalImage2.jpg";
imageObj.src = imageUrl;      
original.src = imageUrl;

saveBtn.onclick = function(evt) {
   console.log("save");
   var canvas = $(stage.getContent()).find('canvas').get(0);

    console.log("canvas: "+canvas);
    var dataURL = canvas.toDataURL('image/jpeg', 1.0);
    resultImage.src = dataURL;
    downloadLink.href = dataURL;

};

如何在不降低质量的情况下编辑比我的屏幕/舞台尺寸大得多的图像？

编辑:呈现给用户的舞台/ Canvas 仍然是某种预览。不应缩小原始图像。应用效果并导出舞台后，我希望导出的图像与原始图像大小相同，而不会降低质量。我不想将 320px x 320px 的舞台大小调整回 1280px x 1280px，这会导致巨大的质量损失。

Answer 1

在 iPhone 上看到的振铃模式是 resizing artifacts , 一种 Moiré pattern .是actually pretty common .

在撰写本文时，我们无法控制 Canvas 如何缩放图像，因此我们需要解决它:

1. 使用更合适的 scaling algorithm 手动创建一个或多个缩放图像.目的是避免缩放，从而避免任何伪影。

2. 实现 step down algorithm ，并在将其交给 Kinetic 之前生成更合适尺寸的图像。

3. 在缩小比例之前对图像进行模糊处理会淡化伪像，但不会消除它。在 Kinetic 中，只需正常应用模糊滤镜即可。

4. 实现一个更合适的scaling algorithm ，并使用它将图像动态缩放到维度(即自动 #1)。

当然，推荐前两种方法。

---

320 像素的舞台只会导出 320 像素的图像。要在不缩放的情况下以原始大小导出原始图像，您需要从足够大的舞台导出。新阶段不需要可​​见；这是off-screen rendering .

我已经修改了 fiddle 的保存处理程序来演示它:http://jsfiddle.net/qhm7dn09/13/embedded/result

请记住，JavaScript 的速度和效率远不及 native 程序，而且大多数移动设备在使用 JS 的浏览器中处理大图像时会遇到困难。

---

原始问题询问如何提高缩小后的图像质量。

鉴于现有的模糊滤镜，为 Kinetic 5.1 实现锐化滤镜相对容易。具体来说，是一个反锐化蒙版过滤器。

Kinetic.Filters.UnsharpMask = function kinetic_filter_unsharpmask( imageData ) {
    var amount = this.attrs.unsharpAmout / 100; // Normally 1 to 100 (%)
    var radius = Math.round( this.attrs.unsharpRadius );
    var threshold = Math.round( this.attrs.unsharpThreshold ); // 1 to 765
    if ( amount && radius > 0 && threshold > 0 ) {
        var data = imageData.data, len = data.length, i;
        // Copy the image and call blur filter on it
        var blurData = new Uint8Array( imageData.data.buffer.slice(0) );
        Kinetic.Filters.Blur.call( 
            { blurRadius: function(){ return radius; } },
            { data: blurData, width: imageData.width, height: imageData.height } );
        // Unsharp mask
        for ( i = 0 ; i < len ; i += 4 ) {
            // Calculate difference
            var d = [ data[i] - blurData[i], data[i+1] - blurData[i+1], data[i+2] - blurData[i+2] ];
            var diff = Math.abs( d[0] ) + Math.abs( d[1] ) + Math.abs( d[2] );
            // Apply difference
            if ( diff && diff >= threshold ) {
                data[i  ] = Math.max( 0, Math.min( Math.round( data[i  ] + d[0] * amount ), 255 ) );
                data[i+1] = Math.max( 0, Math.min( Math.round( data[i+1] + d[1] * amount ), 255 ) );
                data[i+2] = Math.max( 0, Math.min( Math.round( data[i+2] + d[2] * amount ), 255 ) );
            }
        }
    }
}

---

用法:

img = new Kinetic.Image({
    x: 0, y: 0, image: imageObj,
    unsharpRadius: 3, // Pixel range, should be integer (blur filter will round it to integer)
    unsharpAmout: 50, // 1 to 100
    unsharpThreshold: 10 // 1 to 765
});
img.filters([Kinetic.Filters.UnsharpMask]);

---

原问题还询问了渲染图像的感知差异，这不太可能是由不同的库引起的。

根据经验，这些因素通常会影响显示颜色的外观:

1. 不同的显示器(即使是同一型号)或具有不同设置或模式的同一显示器会显示不同的颜色。
2. 屏幕调整软件(例如 Adob​​e Gamma 或某些显示卡驱动程序)可能会严重扭曲颜色。
3. 不同的视角；相同的图像在左侧和右侧或上下可能看起来不同。