Kép kézi betöltése helyett GET használata

Kép kézi betöltése helyett GET használata
2019-12-14T23:42:42+01:00
2019-12-18T11:09:37+01:00
2022-10-15T21:26:16+02:00
dctacsi
Sziasztok,
Van egy kis termék "bemutató" oldal, amit átvettem a saját oldalamra.
Pontosan úgy is működik, mint az eredeti helyén, de én szeretnék benne egy apró kis változtatást.
Az oldal betöltődésekor bal felső sarokban be lehet tölteni egy minta filet amit megjelenít egy 3D-s bögrén. Én viszont azt szeretném elérni, hogy mondjuk GET-el betöltsön egy előre feltöltött képet mintaként automatikusan (bögréket gyártunk és mindenkinek csak egy linket szeretnék elküldeni, amire rá kattintanak és megnyílik a saját mintájuk...)
Az eredeti oldal az alábbi linken található: https://3dmockuper.com/coffeemug.html

A kodrészlet a következő, ami a betöltésért felelős (biztos ami biztos mellékletként csatoltam 2 fájlt is)

$scope.openFileOption = function() { document.getElementById("file1").click(); $scope.playPause(true); } onFileSelect = function(textureURL) { var file = document.getElementById("file1").files[0], url; if(file) url = URL.createObjectURL(file); if(textureURL) url = textureURL; img = new Image(); img.onload = function() { g.drawImage(img, imagerect[0],imagerect[1],imagerect[2],imagerect[3]); update(); if(!textureURL) $scope.playPause(isPaused); } img.src = url; }
Ha esetleg valaki tudna segíteni azt nagyon szépen megköszönném, mert én 1 hete killódok már vele, de úgy fest, hogy meghaladta a képességeimet!

Előre is nagyon szépen köszönöm mindenki segítségét!!!
Mutasd a teljes hozzászólást!
Csatolt állomány
coffeMugController.js:308
a $timeout funkcióba a következő kódot írtam:


                                $scope.isLoading = false;
                                var page_url = new URL(document.location.href);
                                var img_url = page_url.searchParams.get('pic');
                                if (!img_url) return;
                                var img = new Image();
                                img.onload = function() {
                                    g.drawImage(img, imagerect[0],imagerect[1],imagerect[2],imagerect[3]); 
                                    update();
                                }
                                img.src = img_url;

Ezután az url-be be kell írni a pic paramétert:

http://<host>/mug/?pic=img/kep.jpg

Ekkor betölti az img/kep.jpg-t. Ezt a képet fel kell tölteni korábban a szerverre, az adott helyre.
Cross-domain címet nem fogad el, letiltja a js, csak a saját szerverről jövő képet tölti be.

Remélem segítettem.

Üdv.,

Márk
Mutasd a teljes hozzászólást!
Csatolt állomány

  • Nem néztem bele a JS-kódjaidba, csak a linked próbáltam ki ezért csak ötlet szinten:
    1. A teszteden egyik kép sem jelenik meg a kiválasztás során a bögrén csak háttérként...???
    2. Az oldal betöltődése után aut. elindul a forgatás, de szerintem a forgatás fügvényed meghívása előtt nem határozod meg (vagy rosszul), hogy melyik kép kerüljön a bögrére. Hogy a kép-elérést fixen adod meg vagy a hívás-url GET-változójából adod meg az 1-re megy...
    3. Nézz utána, hogy hol hibádzik, mivel az alapszín meghatározása az jól működik (induláskor szürkés-fehér azaz a bal szélső ha igaz).
    Megj: Nem ártott volna a zip-fájlba minden szükséges fájl beletenni a próbálhatóság kedvéért és az eredi oldal linkjét is megadhattad volna szintés a próbálhatóság érdekében. Szerintem senki nem fogja összevadászni a szükséges fájlokat, hogy konkrétabb segítséget tudjon adni...
    Mutasd a teljes hozzászólást!
  • Az oldal jelenleg pontosan úgy működik helyesen ahogy meg lett írva még régen.
    Nem is próbál betölteni semmi mintát. Hanem eddig úgy működött, gy rá kell kattintani a kép kiválasztásáa.
    A jelenlegi módban semmi hiba nincs, csak más működést szeretnék a leírtak szerint csak nem tudtam, hogy hogy kezdjek hozzá.
    A linket pedig megadtam, ahol az eredeti oldal van...
    Mutasd a teljes hozzászólást!
  • Bocsi, hogy félreértettem és azt hittem, hogy a kiválasztott képnek a bögrére kell kerülnie és, hogy a link a Te teszted, bár a Te teszted továbbra is hiányolom...

    Pontosan úgy is működik, mint az eredeti helyén, de én szeretnék benne egy apró kis változtatást.
    Az oldal betöltődésekor bal felső sarokban be lehet tölteni egy minta filet amit megjelenít egy 3D-s bögrén.

    Megj: Részemről OFF, de majd később visszanézek, hogy láthassam a megfelelő, elfogadott megoldást is...

    Mutasd a teljes hozzászólást!
  • A projektet kellene ide berakni teljes forrással, nem két fájlt függőségeik nélkül.
    Első körben a document.getElementById("file1").files[0] (file objektum) cserével próbálkoznék az onFileSelect fv-ben, oda betenni dinamikusan bármilyen url-ből beolvasott kép objektumot. Jó eséllyel url megadása php-ból dinamikusan nem lesz itt elég, objektumot vár majd a createObjectURL (teljes képfájl szinten).
    De ezt lepróbálni nem tudtam, én ebbe az irányba indulnék el.
    Mutasd a teljes hozzászólást!
  • A teljes projekt az alábbi linken érhető el:
    mug.zip
    Mutasd a teljes hozzászólást!
  • coffeMugController.js:308
    a $timeout funkcióba a következő kódot írtam:


                                    $scope.isLoading = false;
                                    var page_url = new URL(document.location.href);
                                    var img_url = page_url.searchParams.get('pic');
                                    if (!img_url) return;
                                    var img = new Image();
                                    img.onload = function() {
                                        g.drawImage(img, imagerect[0],imagerect[1],imagerect[2],imagerect[3]); 
                                        update();
                                    }
                                    img.src = img_url;

    Ezután az url-be be kell írni a pic paramétert:

    http://<host>/mug/?pic=img/kep.jpg

    Ekkor betölti az img/kep.jpg-t. Ezt a képet fel kell tölteni korábban a szerverre, az adott helyre.
    Cross-domain címet nem fogad el, letiltja a js, csak a saját szerverről jövő képet tölti be.

    Remélem segítettem.

    Üdv.,

    Márk
    Mutasd a teljes hozzászólást!
    Csatolt állomány
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd