Diskuze: fabriclab - upload obrazku

Marek Mozola

Člen

Marek Mozola:16.8.2018 20:29

Čau, upravujem jeden script na tvorbu tričiek s vlastným potiskom, mám však problém s uploadom obrázkov. Keď tam nahrám obrázok, tak vždycky je to štvorec, alebo proste rozmery nie sú také aké majú byť. Môžte si to vyskúšať na shirtsmaui.com v design labe. Tu môžte vidieť kód funkcie, ktorá sa stará o upload

function upload_image() {
    data = new FormData();
    data.append('file', $('#choose-file')[0].files[0]);
    $('.loader, .backblur').removeClass('hide');
    $.ajax({
        url: "ajax/upload.php",
        type: "POST",
        data: data,
        contentType: false,
        cache: false,
        processData: false,
        success: function (data) {
            $('#choose-file').val();

            if (!(canvas.getActiveObject() && canvas.getActiveObject().get('type') == "image" && canvas.getActiveObject().get('imgType') == "design_img_custom")) {
                fabric.Image.fromURL(data, function (image) {
                    // scale image down, and flip it, before adding it onto canvas
                    image.set({
                        imgType: "design_img_custom",
                        left: min_left,
                        top: min_top,
                        hoverCursor: 'pointer',
                        height: parseInt($("#custom-size1").val() * 96),
                        width: parseInt($("#custom-size2").val() * 96),
                        centeredRotation: true
                    }).setControlsVisibility({
                        mt: false,
                        mb: false,
                        ml: false,
                        mr: false,
                        tr: false,
                        bl: false,
                        mtr: false
                    });

                    image.on('selected', function () {
                        fnUploadSelected();
                    });

                    image.on('deselected', function () {
                        fnUploadDeselected();
                    });
                    canvas.add(image).setActiveObject(image);
                    while (parseFloat(canvas.getActiveObject().width) + 10 >= max_width - 15) {
                        canvas.getActiveObject().set({
                            width: parseInt(canvas.getActiveObject().get('width')) - 1,
                            left: (min_left - 10) + (max_width - 5) - (canvas.getActiveObject().width + 10)
                        });
                    }

                    var b = canvas.getActiveObject().getBoundingRect();
                    if (!(b.left >= minX && maxX >= b.left + b.width)) {
                        canvas.getActiveObject().set("left", (min_left - 10) + (max_width - 5) - (canvas.getActiveObject().width + 10));
                    }

                    while (parseFloat(canvas.getActiveObject().height) + 10 >= max_height - 15) {
                        canvas.getActiveObject().set({
                            height: parseInt(canvas.getActiveObject().get('height')) - 1,
                            top: (min_top - 10) + (max_height - 5) - (canvas.getActiveObject().height + 10)
                        });
                    }

                    b = canvas.getActiveObject().getBoundingRect();
                    if (!(maxY >= b.top + b.height && b.top >= minY)) {
                        canvas.getActiveObject().set("top", (min_top - 10) + (max_height - 5) - (canvas.getActiveObject().height + 10));
                    }

                    $('#custom-size2').val(canvas.getActiveObject().width / 96);
                    $('#custom-size1').val(canvas.getActiveObject().height / 96);
                    canvas.getActiveObject().setCoords(false, false);
                    canvas.getActiveObject().lastWidth = canvas.getActiveObject().width;
                    canvas.getActiveObject().lastHeight = canvas.getActiveObject().height;
                    canvas.renderAll();
                });
            } else {
                canvas.getActiveObject().setSrc(data, function () {
                    canvas.getActiveObject().set({
                        width: parseInt(1 * 96),
                        height: parseInt(1 * 96),
                        left: min_left,
                        top: min_top
                    });
                    canvas.renderAll();

                    while (parseFloat(canvas.getActiveObject().width) + 10 >= max_width - 15) {
                        canvas.getActiveObject().set({
                            width: parseInt(canvas.getActiveObject().get('width')) - 1,
                            left: (min_left - 10) + (max_width - 5) - (canvas.getActiveObject().width + 10)
                        });
                    }

                    var b = canvas.getActiveObject().getBoundingRect();
                    if (!(b.left >= minX && maxX >= b.left + b.width)) {
                        canvas.getActiveObject().set("left", (min_left - 10) + (max_width - 5) - (canvas.getActiveObject().width + 10));
                    }

                    while (parseFloat(canvas.getActiveObject().height) + 10 >= max_height - 15) {
                        canvas.getActiveObject().set({
                            height: parseInt(canvas.getActiveObject().get('height')) - 1,
                            top: (min_top - 10) + (max_height - 5) - (canvas.getActiveObject().height + 10)
                        });
                    }

                    b = canvas.getActiveObject().getBoundingRect();
                    if (!(maxY >= b.top + b.height && b.top >= minY)) {
                        canvas.getActiveObject().set("top", (min_top - 10) + (max_height - 5) - (canvas.getActiveObject().height + 10));
                    }
                    $('#custom-size2').val(canvas.getActiveObject().width / 96);
                    $('#custom-size1').val(canvas.getActiveObject().height / 96);
                    canvas.getActiveObject().setCoords(false, false);
                    canvas.getActiveObject().lastWidth = canvas.getActiveObject().width;
                    canvas.getActiveObject().lastHeight = canvas.getActiveObject().height;
                    canvas.renderAll();
                    updateCanvasState();
                });
            }
            $('.loader, .backblur').addClass('hide');
        },
        error: function(error){
            alert('Loading Error');
            $('.loader, .backblur').addClass('hide');
        }
    })
}

Zkusil jsem: Skúšal som všetko možné, ale nikdy nebol ten výsledok taký, aký chcem

Chci docílit: Chcem aby keď nahrám obrázok, a je väčší ako plocha na ktorej môže byť, tak sa zmenší v tom canvase na buď šírku, alebo výšku toho canvasu (podľa toho, čo je väčšie). A ak je menší, tak sa zobrazí normálne v plnej veľkosti a bude mať reálnu šírku a výšku, nebude deformovaný ako je to teraz. Úplne mi stačí, keď ma navediete k tomu ako to dosiahnuť.Ďakujem.

Odpovědět

16.8.2018 20:29

Peter Mlich

Člen

Peter Mlich:17.8.2018 9:04

height: parseInt($("#custom-size1").val() * 96),
width: parseInt($("#custom-size2").val() * 96),

width: parseInt(1 * 96),
height: parseInt(1 * 96),

'sa zmenší v tom canvase na buď šírku, alebo výšku toho canvasu (podľa toho, čo je väčšie'
Takove podminky tam nikde v kodu nemas.
Na webu ted pouzivame pro obrazky toto css:

<div class="clanek clanek_s_obr">
  <div class="img_left" style="background-image: url('https://plone.slu.cz/fpf/cz/clanky/cl_soubory/2018/2018_10_01_Zajezd_Dolni_Rakousy_a_Viden.jpg/@@images/image/large'); width: 150px; height: 130px; background-position: 50% 50%; background-size: cover;">
</div><div class="nadpis">...

Cili, z celeho tveho js by tam zustal jen kod pro upload obrazku a to css by si uz udelalo nahled samo. (je to neusporne, posila se cely obrazek, ale zajimave a u nas na tom trvaly)

Editováno 17.8.2018 9:05

Nahoru Odpovědět

17.8.2018 9:04

Marek Mozola

Člen

Marek Mozola:17.8.2018 17:32

Cez css to nemôžem spraviť, pretože ten obrázok tam fyzicky nieje, je to v tom canvase pomocou tej knižnice fabric.js.. Už som tam dal tú podmienku na šírku, a na výšku, to funguje, ale chcel by som ešte aby sa to prispôsobovalo, teda že keď originál ma napr. 500x200 tak sa to zmenší trebarz na 250x100.. Stačila by mi tá logika, ako to dosiahnem. Myslím, že človek, ktorý to robil to chcel dosiahnuť tými cyklami while, akurát mu to nejak nevydalo a nerobí to to, čo to má robiť

Nahoru Odpovědět

17.8.2018 17:32

Marek Mozola

Člen

Marek Mozola:17.8.2018 19:12

Nakoniec som to spravil takto, a funguje to

while(parseFloat(canvas.getActiveObject().width) > max_width ){
                                                canvas.getActiveObject().set({
                            width: parseInt(canvas.getActiveObject().get('width')) / 2,
                                                        height: parseInt(canvas.getActiveObject().get('height')) / 2
                        });
                                        }

Nahoru Odpovědět

17.8.2018 19:12

Peter Mlich

Člen

Peter Mlich:21.8.2018 15:37

'Myslím, že človek, ktorý to robil to chcel dosiahnuť tými cyklami while'
Jo, budi to ten dojem, takze od toho kodu radeji ruce pryc.

Zmensovani principiane je
pomer = w / h
--
new_h = 300
new_w = new_h *pomer
--
new_w = 300
new_h = new_w * (1/pomer)

A pak ho muzes chtit napasovat do obdelnicku.

Bud zmensit v pomeru. Pak musis urcit vetsi cislo z A=w/new_w nebo B=h/new_h a pak stanovit pomer. (snad to rikam spravne) A<B ? pomer = A a z pomeru vypocitas new_w, new_h
Nebo potrebujes vyplnit celou plochu a okraje oriznout, jako to dela to css. To si zpameti nevybavim, ale mohlo opacne A>B ? pomer = A a z pomeru vypocitas new_w, new_h

Rozhodne to neni treba resit while cyklem

Idealni pomuckou je k tomu papir a tam si nakreslit treba cervenou, carkovanou, jak se to ma do toho obdelnicku zvetsit a z toho ty rovnice uz vykoukas.

Nahoru Odpovědět

21.8.2018 15:37