Mostra notizie nelle discussioni
  • Avatar
    Scritto da
    Non Autenticato
    il 2016-03-11 17:55:31.0 alle 2016-03-11 17:55:31.0
    Trasformare canvas in immagine con javascript
    Creo un cerchio utilizzando canvas e siccome devo riuscire in qualche modo a infilare il cerchio in un'option (<option>) di una select HTML (<select>), sto cercando di trasformare il canvas in un'immagine... anzi meglio, un'immagine in base 64.

    Per questo proposito esiste il metodo toDataURL()... peccato solo che mi viene renderizzata un'immagine vuota (scacchiera).

    var circle = getStateCircle(offer.StateId);
var dataUrl = circle.toDataURL("image/png");
            
var img = new ElementBuilder("img")
     .withAttribute("src", dataUrl)
     .withAttribute("height", "40px")
     .getElement();


    Circle è un canvas (fidatevi sulla mia parola), un cerchio giallo, l'immagine successivamente viene sparata nella pagina... ma è un'immagine vuota.

    Possibile causa?
    • Avatar
      ☺
      Scritto da
      Giambo
      il 2016-03-11 18:22:11.0 alle 2016-03-11 18:22:11.0
      Trollate totali: 42885
      Re: Trasformare canvas in immagine con javascript
      Scritto da:
      > Creo un cerchio utilizzando canvas e siccome devo riuscire in qualche modo a infilare il cerchio in un'option (<option>) di una select HTML (<select>), sto cercando di trasformare il canvas in un'immagine... anzi meglio, un'immagine in base 64.
      >
      > Per questo proposito esiste il metodo toDataURL()... peccato solo che mi viene renderizzata un'immagine vuota (scacchiera).
      >
      > 
      > var circle = getStateCircle(offer.StateId);
> var dataUrl = circle.toDataURL("image/png");
> 
> var img = new ElementBuilder("img")
> .withAttribute("src", dataUrl)
> .withAttribute("height", "40px")
> .getElement();
> 
>

      >
      > Circle è un canvas (fidatevi sulla mia parola), un cerchio giallo, l'immagine successivamente viene sparata nella pagina... ma è un'immagine vuota.
      >
      > Possibile causa?

      Posta un esempio su JFiddle
      `"la realta' non e' cosi' terrificante come vogliono farti credere" - Giambo ` - Wakko che cita Giambo
      • Avatar
        Scritto da
        Non Autenticato
        il 2016-03-14 10:11:03.0 alle 2016-03-14 10:11:03.0
        Re: Trasformare canvas in immagine con javascript
        Scritto da: Giambo
        > Scritto da:
        > > Creo un cerchio utilizzando canvas e siccome devo riuscire in qualche modo a infilare il cerchio in un'option (<option>) di una select HTML (<select>), sto cercando di trasformare il canvas in un'immagine... anzi meglio, un'immagine in base 64.
        > >
        > > Per questo proposito esiste il metodo toDataURL()... peccato solo che mi viene renderizzata un'immagine vuota (scacchiera).
        > >
        > > 
        > > var circle = getStateCircle(offer.StateId);
> > var dataUrl = circle.toDataURL("image/png");
> > 
> > var img = new ElementBuilder("img")
> > .withAttribute("src", dataUrl)
> > .withAttribute("height", "40px")
> > .getElement();
> > 
> >

        > >
        > > Circle è un canvas (fidatevi sulla mia parola), un cerchio giallo, l'immagine successivamente viene sparata nella pagina... ma è un'immagine vuota.
        > >
        > > Possibile causa?
        >
        > Posta un esempio su JFiddle

        Eccolo: https://jsfiddle.net/4hfmp0cs/
        • Avatar
          ☺
          Scritto da
          Giambo
          il 2016-03-14 10:59:41.0 alle 2016-03-14 10:59:41.0
          Trollate totali: 42885
          Re: Trasformare canvas in immagine con javascript
          Scritto da:

          > > Posta un esempio su JFiddle
          >
          > Eccolo: https://jsfiddle.net/4hfmp0cs/

          OOooocchei ... Non conosco canvas con tutti i tazzi e mazzi, ma mi pare che il tuo esempio non possa funzionare ...

          Prova questo, messo giu' alla cazzocane ma che funziona Sorride

          https://jsfiddle.net/6d7p2xk8/2/

          **Modificato dall'autore il 14.03.2016 11:00**
          `"la realta' non e' cosi' terrificante come vogliono farti credere" - Giambo ` - Wakko che cita Giambo
          • Avatar
            Scritto da
            Non Autenticato
            il 2016-03-14 11:04:43.0 alle 2016-03-14 11:04:43.0
            Re: Trasformare canvas in immagine con javascript
            Scritto da: Giambo
            > Scritto da:
            >
            > > > Posta un esempio su JFiddle
            > >
            > > Eccolo: https://jsfiddle.net/4hfmp0cs/
            >
            > OOooocchei ... Non conosco canvas con tutti i tazzi e mazzi, ma mi pare che il tuo esempio non possa funzionare ...
            >
            > Prova questo, messo giu' alla cazzocane ma che funziona Sorride
            >
            > https://jsfiddle.net/6d7p2xk8/2/
            >
            > **Modificato dall'autore il 14.03.2016 11:00**

            Si, nel frattempo ci sono arrivato anche io... non avevo ben capito come canvas funziona. Adesso resta da capire perché sia nel tuo risultato che nel mio c'è quel margine/distacco tra il bottone e il cerchio.
            • Avatar
              ☺
              Scritto da
              Giambo
              il 2016-03-14 11:35:50.0 alle 2016-03-14 11:35:50.0
              Trollate totali: 42885
              Re: Trasformare canvas in immagine con javascript
              Scritto da:

              > > > > Posta un esempio su JFiddle
              > > >
              > > > Eccolo: https://jsfiddle.net/4hfmp0cs/
              > >
              > > OOooocchei ... Non conosco canvas con tutti i tazzi e mazzi, ma mi pare che il tuo esempio non possa funzionare ...
              > >
              > > Prova questo, messo giu' alla cazzocane ma che funziona Sorride
              > >
              > > https://jsfiddle.net/6d7p2xk8/2/
              > >
              > > **Modificato dall'autore il 14.03.2016 11:00**
              >
              > Si, nel frattempo ci sono arrivato anche io... non avevo ben capito come canvas funziona. Adesso resta da capire perché sia nel tuo risultato che nel mio c'è quel margine/distacco tra il bottone e il cerchio.

              Credo sia causato da document.createElement("img"); che automaticamente crea un'immagine di dimensioni "standard" (300x150px)
              `"la realta' non e' cosi' terrificante come vogliono farti credere" - Giambo ` - Wakko che cita Giambo
              • Avatar
                Scritto da
                Non Autenticato
                il 2016-03-14 11:41:29.0 alle 2016-03-14 11:41:29.0
                Re: Trasformare canvas in immagine con javascript
                Scritto da: Giambo
                > Scritto da:
                >
                > > > > > Posta un esempio su JFiddle
                > > > >
                > > > > Eccolo: https://jsfiddle.net/4hfmp0cs/
                > > >
                > > > OOooocchei ... Non conosco canvas con tutti i tazzi e mazzi, ma mi pare che il tuo esempio non possa funzionare ...
                > > >
                > > > Prova questo, messo giu' alla cazzocane ma che funziona Sorride
                > > >
                > > > https://jsfiddle.net/6d7p2xk8/2/
                > > >
                > > > **Modificato dall'autore il 14.03.2016 11:00**
                > >
                > > Si, nel frattempo ci sono arrivato anche io... non avevo ben capito come canvas funziona. Adesso resta da capire perché sia nel tuo risultato che nel mio c'è quel margine/distacco tra il bottone e il cerchio.
                >
                > Credo sia causato da document.createElement("img"); che automaticamente crea un'immagine di dimensioni "standard" (300x150px)

                No, non è quello... ho provato a modificare l'altezza della'immagine: https://jsfiddle.net/4hfmp0cs/4/
                • Avatar
                  Scritto da
                  Non Autenticato
                  il 2016-03-14 12:11:58.0 alle 2016-03-14 12:11:58.0
                  Re: Trasformare canvas in immagine con javascript
                  Scritto da:
                  > Scritto da: Giambo
                  > > Scritto da:
                  > >
                  > > > > > > Posta un esempio su JFiddle
                  > > > > >
                  > > > > > Eccolo: https://jsfiddle.net/4hfmp0cs/
                  > > > >
                  > > > > OOooocchei ... Non conosco canvas con tutti i tazzi e mazzi, ma mi pare che il tuo esempio non possa funzionare ...
                  > > > >
                  > > > > Prova questo, messo giu' alla cazzocane ma che funziona Sorride
                  > > > >
                  > > > > https://jsfiddle.net/6d7p2xk8/2/
                  > > > >
                  > > > > **Modificato dall'autore il 14.03.2016 11:00**
                  > > >
                  > > > Si, nel frattempo ci sono arrivato anche io... non avevo ben capito come canvas funziona. Adesso resta da capire perché sia nel tuo risultato che nel mio c'è quel margine/distacco tra il bottone e il cerchio.
                  > >
                  > > Credo sia causato da document.createElement("img"); che automaticamente crea un'immagine di dimensioni "standard" (300x150px)
                  >
                  > No, non è quello... ho provato a modificare l'altezza della'immagine: https://jsfiddle.net/4hfmp0cs/4/

                  Ok, il problema non è l'altezza dell'immagine, ma dell'elemento canvas. Adesso devo capire che unità di misura viene usato nel disegno del canvas (tipo, se uso come raggio del cerchio "20" cosa significa?), in maniera tale da far coincidere l'altezza del canvas con quella del cerchio. L'altezza del canvas è in pixel, ma il raggio del cerchio?
                  • Avatar
                    ☺
                    Scritto da
                    Giambo
                    il 2016-03-14 12:21:40.0 alle 2016-03-14 12:21:40.0
                    Trollate totali: 42885
                    Re: Trasformare canvas in immagine con javascript
                    Scritto da:

                    > > > > > > > Posta un esempio su JFiddle
                    > > > > > >
                    > > > > > > Eccolo: https://jsfiddle.net/4hfmp0cs/
                    > > > > >
                    > > > > > OOooocchei ... Non conosco canvas con tutti i tazzi e mazzi, ma mi pare che il tuo esempio non possa funzionare ...
                    > > > > >
                    > > > > > Prova questo, messo giu' alla cazzocane ma che funziona Sorride
                    > > > > >
                    > > > > > https://jsfiddle.net/6d7p2xk8/2/
                    > > > > >
                    > > > > > **Modificato dall'autore il 14.03.2016 11:00**
                    > > > >
                    > > > > Si, nel frattempo ci sono arrivato anche io... non avevo ben capito come canvas funziona. Adesso resta da capire perché sia nel tuo risultato che nel mio c'è quel margine/distacco tra il bottone e il cerchio.
                    > > >
                    > > > Credo sia causato da document.createElement("img"); che automaticamente crea un'immagine di dimensioni "standard" (300x150px)
                    > >
                    > > No, non è quello... ho provato a modificare l'altezza della'immagine: https://jsfiddle.net/4hfmp0cs/4/
                    >
                    > Ok, il problema non è l'altezza dell'immagine, ma dell'elemento canvas. Adesso devo capire che unità di misura viene usato nel disegno del canvas (tipo, se uso come raggio del cerchio "20" cosa significa?), in maniera tale da far coincidere l'altezza del canvas con quella del cerchio. L'altezza del canvas è in pixel, ma il raggio del cerchio?

                    Pixel ? Comunque, se cambi la dimensione del canvas, cambia pure il suo contenuto

                    https://jsfiddle.net/utgr4w1x/1/

                    Prova a scommentare width: 100px; nel CSS ...
                    `"la realta' non e' cosi' terrificante come vogliono farti credere" - Giambo ` - Wakko che cita Giambo
<softv>

Pagina generata in 81 millisecondi

Utenti attivi: 6 nell'ultimo minuto, 18 negli ultimi cinque minuti, 36 negli ultimi 15 minuti