FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Marek Mozola
Člen
Avatar
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
Avatar
Peter Mlich
Člen
Avatar
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
 
Nahoru Odpovědět
17.8.2018 9:04
Avatar
Marek Mozola
Člen
Avatar
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
Avatar
Marek Mozola
Člen
Avatar
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
Avatar
Peter Mlich
Člen
Avatar
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
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.