Articles of html5 canvas

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 […]

come tracciare una curva uniforms attraverso N punti usando la canvas HTML5 javascript?

Per un’applicazione di disegno sto salvando le coordinate del movimento del mouse su un array e quindi disegnandole con lineTo. La linea risultante non è liscia. Come posso produrre una curva singola tra tutti i punti raccolti? Ho cercato su Google, ma ho trovato solo 3 funzioni per disegnare linee: per 2 punti campione, usa […]

Accesso ai dati di rotazione JPEG EXIF ​​in JavaScript sul lato client

Mi piacerebbe ruotare le foto in base alla loro rotazione originale, come impostato dalla fotocamera nei dati di immagine JPEG EXIF. Il trucco è che tutto ciò dovrebbe accadere nel browser, utilizzando JavaScript e . In che modo JavaScript può accedere a JPEG, un object API file locale, dati o remoti , dati EXIF ​​per […]

Le tele contaminate non possono essere esportate

Voglio salvare la mia canvas su un img. Ho questa funzione: function save() { document.getElementById(“canvasimg”).style.border = “2px solid”; var dataURL = canvas.toDataURL(); document.getElementById(“canvasimg”).src = dataURL; document.getElementById(“canvasimg”).style.display = “inline”; } Mi dà errore: Uncaught SecurityError: imansible eseguire ‘toDataURL’ su ‘HTMLCanvasElement’: le tinte contaminate non possono essere esportate. Cosa dovrei fare?

Posizione reale del mouse su canvas

Sto provando a disegnare con il mouse su una canvas HTML5, ma l’unico modo in cui sembra funzionare bene è se la canvas si trova nella posizione 0,0 (angolo superiore sinistro) se cambio la posizione della canvas, per qualche motivo non disegna come dovrebbe Ecco il mio codice. function createImageOnCanvas(imageId){ document.getElementById(“imgCanvas”).style.display = “block”; document.getElementById(“images”).style.overflowY= “hidden”; […]

Html5 draw drawImage: come applicare l’antialiasing

Si prega di dare un’occhiata al seguente esempio: http://jsfiddle.net/MLGr4/47/ var canvas=document.getElementById(“canvas”); var ctx=canvas.getContext(“2d”); img=new Image(); img.onload=function(){ canvas.width=400; canvas.height=150; ctx.drawImage(img,0,0,img.width,img.height,0,0,400,150); } img.src=”http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg”; Come vedi, l’immagine non ha l’anti-aliasing, anche se si dice che drawImage applica automaticamente l’anti aliasing. Ho provato molti modi diversi ma non sembra funzionare. Potresti dirmi come posso ottenere un’immagine anti-alias? Grazie.

Come salvare un’immagine PNG lato server, da una stringa di dati base64

Sto usando lo strumento JavaScript “Canvas2Image” di Nihilogic per convertire i disegni su canvas in immagini PNG. Quello di cui ho bisogno ora è di trasformare quelle stringhe base64 che questo strumento genera, in file PNG reali sul server, usando PHP. In breve, quello che sto facendo è generare un file sul lato client usando […]