Modificare immagini

[fermat]

ciao!

vorrei sapere se è possibile fare una cosa.
ho delle immagini sopra le quali gli utenti dovrebbe mettere delle note e / o frecce, ecc.

niente di sofisticato.
ma sarebbe possibile farlo con javascript??

[cavicchiandrea]

Si metti l'immagine principale in un div come sfondo e le immagini da aggiungere le rendi drag-drop

[fermat]

ok, ma se non dovessi aggiungere immagini, ma disegnarci sopra?

ad esempio sull'immagine vorrei mettere una freccia che magari indica un difetto.
o metterci un box per delle note.

[cavicchiandrea]

L'operazione si complica forse puoi risolvere con i canvas

[fermat]

ok, seguendo questo link ho ottenuto in parte quello che vorrei: http://www.yourinspirationweb.com/20...anvas-parte-3/

ora, il discorso è che questo esempio crea una nuova immagine con quello che si è disegnato:

function salva() {
    var imageCopy = document.getElementById("img_salvataggio");
    imageCopy.src = canvas.toDataURL();
    var imageContainer = document.getElementById("box_salvataggio");
    imageContainer.style.display = "block";
}

io ho messo un background al canvas.
mi manca di modificare questa funzione per impostare un doppo background: quello che viene creato dalla funzione più quello che ho messo nel canvas:

<canvas id="prog_disegno" width="500" height="300" style="background: url(C5.0.026.jpg);"></canvas>

sarebbe possibile tramite js?

[fermat]

con questo workaround ho più o meno risolto:

function salva() {
    var imageCopy = document.getElementById("img_salvataggio");
    var canvasImg = canvas.style.backgroundImage;
    imageCopy.src = canvas.toDataURL();
    var imageContainer = document.getElementById("box_salvataggio");
    imageContainer.style.display = "block";

    var c = document.getElementById("final_canvas");
    var ctx = c.getContext("2d");
    var imageObj1 = new Image();
    var imageObj2 = new Image();
    imageObj1.src = canvasImg.replace('url(', '').replace(')', '').replace('"', '').replace('"', '');
    imageObj2.src = canvas.toDataURL();
    imageObj1.onload = function () {
        ctx.drawImage(imageObj1, 0, 0, 533, 800);
        imageObj2.onload = function () {
            ctx.drawImage(imageObj2, 0, 0, imageObj2.width, imageObj2.height);
            var img = c.toDataURL("image/png");
            document.getElementById('final').innerHTML = '<img src="' + img + '" width="533" height="800">';
        }
    };
}

prendo il background messo sul canvas da disgno.
prendo l'immagine disegnata.
"disegno su un nuovo canvas".
creo un tag img e ci metto dentro la nuova immagine.

poi dovrò salvare il tutto su disco con php, ma direi che il grosso è fatto.
ciao!