Articles of html5 canvas

Fotocamera / viewport Canvas HTML5 – come fare concretamente?

Sono sicuro che questo è stato risolto 1000 volte prima: ho ottenuto una canvas delle dimensioni di 960 * 560 e una stanza delle dimensioni di 5000 * 3000 di cui sempre dovrebbe essere disegnata solo 960 * 560, a seconda di dove si trova il giocatore. Il giocatore dovrebbe essere sempre nel mezzo, ma […]

Metodo Javascript per rilevare l’area di un PNG che non è trasparente

Sto cercando un metodo javascript per rilevare un’immagine all’interno di un PNG trasparente. Ad esempio, creerò un PNG con una canvas trasparente di 940×680, quindi posizionerò un object di opacità completo da qualche parte all’interno di quella canvas. Voglio essere in grado di rilevare la dimensione (h / w) e la posizione in alto + […]

Salva canvas come jpg sul desktop

Sto cercando di salvare un’immagine (JPEG) sul desktop da un HTML5canvas. Posso aprire in una nuova finestra window.open(canvas.toDataURL(‘png’), “”); , ma come posso salvarlo sul desktop? Grazie.

Come liberare la memoria in JavaScript

Sto lavorando con canvas e il suo object ImageData che contiene un’enorme quantità di dati (milioni di interi). Quindi lavorare con alcuni array richiede già molta memoria (fino a 300 MB). C’è un modo per liberare la memoria di alcuni array quando non è necessario? Sto cercando di assegnare undefined a quella variabile. È giusto?

canvas2d toDataURL () output diverso su browser diverso

Ho la stessa immagine e le stesse dimensioni della canvas, ma l’output è diverso. Voglio la stessa uscita, come dovrei farlo? var canvas = document.createElement(‘canvas’), ctx = canvas.getContext(‘2d’), img = new Image; img.crossOrigin = ‘Anonymous’; img.onload = function(){ canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL(); setBreakpoint(dataURL); callback.call(this, dataURL); canvas […]

canvas.toDataURL () per tele di grandi dimensioni

Ho un problema con .toDataURL() per tele di grandi dimensioni. Voglio enconde in base64 e decodificare su file php, ma se ho un grande canvas la variabile strDataURI è vuota. Il mio codice: var strDataURI = canvas.toDataURL(); strDataURI = strDataURI.substr(22, strDataURI.length); $.post(“save.php”, { str: strDataURI }; Esiste un’alternativa a .toDataURL() o un modo per modificare […]

Convertire la canvas HTML5 nel file da caricare?

Il caricamento di file HTML standard funziona come segue: Nel mio caso ho caricato un’immagine in una canvas html5 e desidero inviarla come file al server. Posso fare: var canvas; // some canvas with an image var url = canvas.toDataURL(); Questo mi dà un’immagine / png come base64. Come posso inviare l’immagine base64 al server […]

trascinando e ridimensionando un’immagine su canvas html5

Sto costruendo un editor di immagini su canvas HTML5. Dopo aver caricato un’immagine nella canvas ho bisogno di Dragg e ridimensionarlo sulla canvas. Sono riuscito a caricare un’immagine e renderla trascinabile sulla canvas. Ma ho bisogno di renderlo ridimensionabile anche lungo la canvas. Grazie in anticipo. var Img = new Image(); Img.src = file; Img.onload […]

Più aree di ritaglio sulla canvas Fabric.js

Per creare Photo Collage Maker , utilizzo fabric js con funzionalità di ritaglio basato su oggetti. Questa funzione è ottima ma l’immagine all’interno dell’area di ritaglio non può essere ridimensionata, spostata o ruotata. Voglio che la regione di clipping della posizione fissa e l’immagine possano essere posizionate all’interno dell’area di clipping fissa come l’utente desidera. […]

Come mostrare una barra di avanzamento in esecuzione mentre la pagina si sta caricando

Voglio mostrare una barra di avanzamento in esecuzione mentre la mia pagina si sta caricando come qui , nella mia pagina. Ho usato una semplice immagine di caricamento nel mio esempio, ma voglio convertirla in una barra di avanzamento in esecuzione. Ecco il mio codice: $(window).load(function() { alert(“hi”); $(‘#loading’).hide(); }); #loading { width: 100%; height: […]