Articles of html5 canvas

Come posso correggere il testo sfocato nella mia canvas HTML5?

Sono un n00b totale con HTML5 e sto lavorando con il canvas per il rendering di forms, colors e testo. Nella mia app, ho un adattatore di visualizzazione che crea una canvas in modo dinamico e la riempie di contenuto. Funziona molto bene, tranne che il mio testo è reso molto sfocato / sfocato / […]

Come rendere l’effetto testo del tetto e l’effetto testo valle in HTML5 (o Fabric.js)

Sto usando sotto il codice: // Curve: 110 OffsetY: 0 Text height: 64 Bottom: 200 Text: Ho bisogno dell’effetto di testo come sotto le immagini, ho provato molto per farlo ma non posso. Per favore qualcuno può aiutarmi? Possiamo anche usare l’object attivo da fabric.js con il contesto?

Manipolazione delle immagini e mapping delle texture con HTML5 Canvas?

In un motore 3D su cui sto lavorando sono riuscito a disegnare un cubo in 3D. L’unico metodo per riempire i lati è usare un colore a tinta unita o una sfumatura per quanto mi riguarda. Per rendere le cose più eccitanti, mi piacerebbe davvero implementare il mapping delle texture usando una semplice bitmap. Il […]

Ritaglio delle immagini nel browser PRIMA del caricamento

Molte librerie che ho trovato, come Jcrop, non eseguono il ritaglio, ma creano solo un’interfaccia utente per il ritaglio di immagini. Dipende quindi dal server che esegue il ritaglio effettivo. Come posso rendere l’immagine ritagliata lato client utilizzando alcune funzionalità HTML5 senza utilizzare alcun codice lato server. Se sì, ci sono alcuni esempi o suggerimenti?

Ottenere dati binari (base64) da Canvas HTML5 (readAsBinaryString)

C’è un modo per leggere il contenuto di una canvas HTML come dati binari? Al momento ho il seguente codice HTML per mostrare un file di input e la canvas sottostante: Get Image Content Input: Canvas Ho quindi impostato il mio file di input per impostare correttamente il canvas che funziona bene: $(‘#fileInput’).on(‘change’, function() { […]

Ridimensiona l’immagine con canvas javascript (senza intoppi)

Sto cercando di ridimensionare alcune immagini con la canvas ma non ho idea di come renderle più morbide. Su Photoshop, browser ecc. Ci sono alcuni algoritmi che usano (es. Bicubico, bilineare) ma non so se questi sono incorporati nella canvas o no. Ecco il mio violino: http://jsfiddle.net/EWupT/ var canvas = document.createElement(‘canvas’); var ctx = canvas.getContext(‘2d’); […]

HTML5 Canvas vs. SVG vs. div

Qual è l’approccio migliore per creare elementi al volo e poterli spostare? Ad esempio, supponiamo di voler creare un rettangolo, un cerchio e un poligono e quindi selezionare quegli oggetti e spostarli. Comprendo che HTML5 fornisce tre elementi che possono renderlo ansible: svg , canvas e div . Per quello che voglio fare, quale di […]

Orientamento Exif lato client JS: Ruota e specchia le immagini JPEG

Le foto della fotocamera digitale vengono spesso salvate come JPEG con un tag “orientamento” EXIF. Per visualizzare correttamente, le immagini devono essere ruotate / specchiate a seconda dell’orientamento impostato, ma i browser ignorano queste informazioni rendendo l’immagine. Anche nelle grandi app Web commerciali, il supporto per l’orientamento EXIF ​​può essere discutibile 1 . La stessa […]

Come correggere l’errore getImageData () L’area di disegno è stata macchiata da dati di origine incrociata?

Il mio codice funziona molto bene sul mio localhost ma non funziona sul sito. Ho ricevuto questo errore dalla console, per questa riga .getImageData(x,y,1,1).data : Uncaught SecurityError: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data. parte del mio codice: jQuery.Event.prototype.rgb=function(){ var x = this.offsetX || (this.pageX – $(this.target).offset().left),y = […]

Immagine di ridimensionamento immagine (ridimensionamento) immagine HTML5 Alta qualità?

Uso gli elementi canvas html5 per ridimensionare le immagini nel mio browser. Si scopre che la qualità è molto bassa. Ho trovato questo: Disabilita interpolazione quando ridimensiona un ma non aiuta ad aumentare la qualità. Di seguito è riportato il mio codice css e js e l’immagine scartata con Photoshop e ridimensionata nell’API canvas. Cosa […]