getImageData заставляет изображение наклоняться - PullRequest
Новая
       1

getImageData заставляет изображение наклоняться

0 голосов
/ 27 мая 2020

Я создаю инструмент для преобразования изображения в частицы для Minecraft.

Принцип преобразования этого инструмента заключается в преобразовании изображения в холст, прохождении каждого пикселя через getImageData и преобразовании его в частицы в Minecraft.

Но есть проблема на последнем шаге (или случается, когда холст конвертируется), преобразованное изображение (частицы) было наклонено. наклонное изображение

код: 

function pp_draw(){
    let canvas = $('#particlePhoto').cropper('getCroppedCanvas');
    $('#pp-crop-preview').attr( 'src',canvas.toDataURL() );

    let gimg = new Image;
    gimg.onload = function(){
        let size = sizeHandle({
            w:gimg.width,h:gimg.height,
            rw:_gt.maxPW,rh:_gt.maxPH
        });
        _gt.pixelsChosen = gimg.width*gimg.height;

        let c = canvas.getContext('2d');
        c.width = canvas.width = size.w;
        c.height = canvas.height = size.h;
        c.clearRect(0, 0, c.width, c.height);
        c.drawImage(gimg, 0, 0, size.w , size.h);

        ppCropHandle(c);
    };
    gimg.src = canvas.toDataURL();
}
function ppCropHandle(c){
    if( $('#particlePhoto').cropper('getCroppedCanvas')===null ){return null;}

    $('#pic-crop-info').html('出错啦！');
    _gt.image = c.getImageData(0, 0, c.width, c.height);
    let t = {};
    t.extra = '';

    t.pBlocks = Math.round(c.width*c.height);
    if(_gt.pixelsChosen>t.pBlocks){
        t.comp = (1-t.pBlocks/_gt.pixelsChosen)*100;
        t.comp = t.comp.toFixed(2);
        t.extra = '图片将被压缩 '+t.comp+'%';
    }

    $('#pic-crop-info').html('选择了 '+_gt.pixelsChosen+' 个像素点，将产生 '+t.pBlocks+' 个色块。'+t.extra);
}

function cmdGenerate(){
    let cmds = [],
        p = {},size = {x:0,y:0,z:0},xyz = {x:0,y:0,z:0};

    xyz.w = _gt.image.width;
    xyz.h = _gt.image.height;

    for (var data = _gt.image.data,i = data.length - 1; i >= 0; i=i-4) {
        p.r = (data[i-3]/255).toFixed(6);
        p.b = (data[i-2]/255).toFixed(6);
        p.g = (data[i-1]/255).toFixed(6);
        p.a = (data[i]/255).toFixed(2);
        p.r==0 && (p.r=0);p.b==0 && (p.b=0);p.g==0 && (p.g=0);

        xyz.x = (size.x/10);
        xyz.y = (size.y/10);
        p.xyz = '~'+xyz.x+' '+'~'+xyz.y+' '+'~';

        if(p.a!=0){
            p.cmd = 'particle dust '+p.r+' '+p.b+' '+p.g+' '+p.a+' '+p.xyz+' 0 0 0 0 1 force';
            cmds.push(p.cmd);
        }

        size.x++;
        size.x > xyz.w && (size.x = 0,size.y++);
    }

    return cmds.join('\n');
}
...