Articles of html5 canvas

Redimensionar imagem com canvas de javascript (suavemente)

Eu estou tentando resize algumas imagens com canvas, mas eu não tenho ideia de como suavizá-las. No photoshop, navegadores, etc., existem alguns algoritmos que eles usam (por exemplo, bicubic, bilinear), mas eu não sei se eles estão embutidos na canvas ou não. Aqui está meu violino: http://jsfiddle.net/EWupT/ var canvas = document.createElement(‘canvas’); var ctx = canvas.getContext(‘2d’); […]

HTML5 Canvas vs. SVG vs. div

Qual é a melhor abordagem para criar elementos na hora e ser capaz de movê-los? Por exemplo, digamos que eu queira criar um retângulo, um círculo e um polígono e, em seguida, selecioná-los e movê-los. Eu entendo que o HTML5 fornece três elementos que podem tornar isso possível: svg , canvas e div . Para […]

Orientação Exif do lado do cliente JS: girar e espelhar imagens JPEG

As fotos da câmera digital geralmente são salvas como JPEG com uma tag “orientação” EXIF. Para exibir corretamente, as imagens precisam ser giradas / espelhadas dependendo da orientação definida, mas os navegadores ignoram essas informações renderizando a imagem. Mesmo em grandes aplicativos web comerciais, o suporte para orientação EXIF ​​pode ser irregular 1 . A […]

HTML5 Canvas Resize (Downscale) Imagem de alta qualidade?

Eu uso elementos de canvas html5 para resize imagens no meu navegador. Acontece que a qualidade é muito baixa. Eu encontrei isto: Desabilite a Interpolação ao Escalar um , mas isso não ajuda a aumentar a qualidade. Abaixo está meu código css e js, bem como a imagem esculpida com o Photoshop e dimensionada na […]

Como corrigir o erro getImageData () A canvas foi corrompida por dados de origem cruzada?

Meu código está funcionando muito bem no meu localhost, mas não está funcionando no site. Eu recebi este erro do console, para esta linha .getImageData(x,y,1,1).data : Uncaught SecurityError: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data. parte do meu código: jQuery.Event.prototype.rgb=function(){ var x = this.offsetX || (this.pageX – $(this.target).offset().left),y […]

Como desenhar uma curva suave através de N pontos usando a canvas HTML5 javascript?

Para um aplicativo de desenho, estou salvando as coordenadas do movimento do mouse em uma matriz e, em seguida, desenhando-as com lineTo. A linha resultante não é suave. Como posso produzir uma curva única entre todos os pontos reunidos? Eu pesquisei mas só encontrei 3 funções para desenhar linhas: para 2 pontos de amostra, simplesmente […]

Acessando dados de rotação JPEG EXIF ​​em JavaScript no lado do cliente

Eu gostaria de rodar fotos com base em sua rotação original, conforme definido pela câmera em dados de imagem JPEG EXIF. O truque é que tudo isso deve acontecer no navegador, usando JavaScript e . Como o JavaScript pode acessar o JPEG, um object de API de arquivo local, local ou remoto , dados EXIF […]

As canvass contaminadas não podem ser exportadas

Eu quero salvar minha canvas para um img. Eu tenho essa function: function save() { document.getElementById(“canvasimg”).style.border = “2px solid”; var dataURL = canvas.toDataURL(); document.getElementById(“canvasimg”).src = dataURL; document.getElementById(“canvasimg”).style.display = “inline”; } Isso me dá erro: SecurityError não detectado: falha ao executar ‘toDataURL’ em ‘HTMLCanvasElement’: As canvass corrompidas podem não ser exportadas. O que devo fazer?

Html5 canvas drawImage: como aplicar o antialiasing

Por favor, dê uma olhada no seguinte exemplo: 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”; Como você pode ver, a imagem não tem suavização de borda, embora seja dito que drawImage aplica automaticamente o anti-aliasing. Eu tentei muitas maneiras diferentes, mas parece que não funciona. Você poderia, por favor, […]

CanvasContext2D drawImage () issue

Eu estou tentando pintar uma imagem em uma canvas antes de obter seu dataURL() , mas os dados retornados são como vazios. Quando eu verificá-lo no console, vejo que há um monte de A na string: ( “data:image/png;base64,iVBO..some random chars… bQhfoAAAAAAAAAA… a lot of A …AAAASUVORK5CYII=” ) Quando tento append a canvas ao documento, nada […]