Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/416.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 当你减少太多样本时,重新采样会失败_Javascript_Image_Image Size_Hermite - Fatal编程技术网

Javascript 当你减少太多样本时,重新采样会失败

Javascript 当你减少太多样本时,重新采样会失败,javascript,image,image-size,hermite,Javascript,Image,Image Size,Hermite,我正在尝试使用这个重采样hermite函数,我在各种堆栈溢出答案中找到了这个函数,它似乎来自。不幸的是,当我尝试过多地减少采样时,它会破坏图像,就像这里显示的小提琴一样,直到我将采样减少了1/2 以下是JSFIDLE中的代码: var img = document.getElementById("mm"); var W = 425; //works if 850 X 638 var H = 319; //works if 850 X 638 var canvas = document.getE

我正在尝试使用这个重采样hermite函数,我在各种堆栈溢出答案中找到了这个函数,它似乎来自。不幸的是,当我尝试过多地减少采样时,它会破坏图像,就像这里显示的小提琴一样,直到我将采样减少了1/2

以下是JSFIDLE中的代码:

var img = document.getElementById("mm");

var W = 425; //works if 850 X 638
var H = 319; //works if 850 X 638
var canvas = document.getElementById("cc");
var ctx = canvas.getContext("2d");
canvas.width = W;
canvas.height = H;

var img = new Image();
img.crossOrigin = "Anonymous"; //cors support
img.onload = function(){
    ctx.drawImage(img, 0, 0); //draw image

    //now we can resize
    resample_hermite(canvas, W, H, W/2, H/2);
}
img.src = 'http://i.imgur.com/8VsK7gS.png';




function resample_hermite(canvas, W, H, W2, H2){
    var time1 = Date.now();
    var img = canvas.getContext("2d").getImageData(0, 0, W, H);
    var img2 = canvas.getContext("2d").getImageData(0, 0, W2, H2);
    var data = img.data;
    var data2 = img2.data;
    var ratio_w = W / W2;
    var ratio_h = H / H2;
    var ratio_w_half = Math.ceil(ratio_w/2);
    var ratio_h_half = Math.ceil(ratio_h/2);

    for(var j = 0; j < H2; j++){
        for(var i = 0; i < W2; i++){
            var x2 = (i + j*W2) * 4;
            var weight = 0;
            var weights = 0;
            var weights_alpha = 0;
            var gx_r = gx_g = gx_b = gx_a = 0;
            var center_y = (j + 0.5) * ratio_h;
            for(var yy = Math.floor(j * ratio_h); yy < (j + 1) * ratio_h; yy++){
                var dy = Math.abs(center_y - (yy + 0.5)) / ratio_h_half;
                var center_x = (i + 0.5) * ratio_w;
                var w0 = dy*dy //pre-calc part of w
                for(var xx = Math.floor(i * ratio_w); xx < (i + 1) * ratio_w; xx++){
                    var dx = Math.abs(center_x - (xx + 0.5)) / ratio_w_half;
                    var w = Math.sqrt(w0 + dx*dx);
                    if(w >= -1 && w <= 1){
                        //hermite filter
                        weight = 2 * w*w*w - 3*w*w + 1;
                        if(weight > 0){
                            dx = 4*(xx + yy*W);
                            //alpha
                            gx_a += weight * data[dx + 3];
                            weights_alpha += weight;
                            //colors
                            if(data[dx + 3] < 255)
                                weight = weight * data[dx + 3] / 250;
                            gx_r += weight * data[dx];
                            gx_g += weight * data[dx + 1];
                            gx_b += weight * data[dx + 2];
                            weights += weight;
                            }
                        }
                    }       
                }
            data2[x2]     = gx_r / weights;
            data2[x2 + 1] = gx_g / weights;
            data2[x2 + 2] = gx_b / weights;
            data2[x2 + 3] = gx_a / weights_alpha;
            }
        }
    console.log("hermite = "+(Math.round(Date.now() - time1)/1000)+" s");
    canvas.getContext("2d").clearRect(0, 0, Math.max(W, W2), Math.max(H, H2));
    canvas.getContext("2d").putImageData(img2, 0, 0);
}

项目所有者发布了一个对此项目的更新来修复它。您只需要将宽度和高度输入四舍五入