Articles of html5 canvas

Manipulação de imagens e mapeamento de texturas usando HTML5 Canvas?

Em um mecanismo 3D no qual estou trabalhando, consegui desenhar um cubo em 3D com êxito. O único método para preencher os lados é usando uma cor sólida ou gradiente, tanto quanto eu estou preocupado. Para tornar as coisas mais interessantes, eu adoraria implementar o mapeamento de texturas usando um bitmap simples. O ponto é […]

Cortar imagens no navegador ANTES de carregar

Muitas bibliotecas que eu encontrei, como o Jcrop, não fazem o corte, apenas cria uma interface de usuário de corte de imagem. Depende então do servidor fazer o recorte real. Como posso fazer a imagem cortar o lado do cliente usando algum recurso HTML5 sem usar qualquer código do lado do servidor. Se sim, existem […]

Obtendo dados binários (base64) do Canvas HTML5 (readAsBinaryString)

Existe alguma maneira de ler o conteúdo de uma canvas HTML como dados binários? No momento, eu tenho o seguinte HTML para mostrar um arquivo de input e a canvas abaixo: Get Image Content Input: Canvas Eu configurei meu arquivo de input para definir a canvas corretamente, o que funciona bem: $(‘#fileInput’).on(‘change’, function() { $.each(this.files, […]

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