Tirage sur toileImage qualité
Ici est une .image png (sur la droite), et l'élément canvas laquelle j'ai attiré l'image (sur la gauche). Pouvez-vous remarquez la différence de qualité? Toile affiche l'image avec perte notable de qualité. Que pouvons-nous faire?
J'ai observé ce résultat sur google Chrome et IE9. D'autres vont probablement faire la même chose.
Comment je le rendu de l'image est tout à fait habituel: Dans le script que j'ai créer un nouveau Image()
objet, après c'est j'ai chargé appel
context.drawImage(myimage, x, y);
EDIT:
C'est la première image que j'ai observé sur la toile:
Et voici ce que la toile rend après, j'ai écrit:
context.drawImage(myimage,parseInt(x),parseInt(y));
Ce que je peux dire, la grande réponse de l'homme. Le tir de précision à son meilleur. Le chapeau est hors de vous.
EDIT2:
J'ai essayé context.drawImage(myimage, parseInt(x) + 0.5, parseInt(y)+ 0.5);
voici le résultat:
Je pense que c'est pire que la première. J'ai remarqué cela sur chrome, IE9 c'est un peu la même que mauvais.
source d'informationauteur Halo
Vous devez vous connecter pour publier un commentaire.
Je viens de créer une superposition de deux images pour qu'elles se neutralisent mutuellement.
Cela n'a pas fonctionné, j'ai eu des difficultés avec les bords.
Veuillez vérifier si vos coordonnées
x, y
sont des nombres entiers.À l'aide de nombre à virgule flottante ici risque de brouiller votre image que certaines implémentations essayez de le rendre "entre les pixels"
Si cela ne fonctionne pas, essayez d'utiliser la valeur de l'entier + 0.5
Je sais que pour les implémentations d'OpenGL, vous devez utiliser les coordonnées avec 0,5 dans le but de toucher le centre d'un pixel.
EDIT:
Découvrez cette page sur Html5Rocks!
Je sais que cela a déjà été posée, mais je veux vous donner plus d'informations à parler de ce qui se passe ici et ce qui peut être fait.
C'est à cause de lissage d'image, qui, par défaut, lisse algorithmes comme bilinéaire/trilieaner/bicubique sur toile par défaut, alors que ce que vous voulez est connu comme le plus proche voisin.
La spécification a récemment ajouté une propriété appelée
imageSmoothingEnabled
qui est par défauttrue
et détermine si les images dessinées sur la non-entier coordonnées ou dessinés à l'échelle va utiliser un lisseur algorithme. Si elle est définie àfalse
alors plus proche voisin est utilisé, la production d'une image moins lisse et au lieu de simplement faire de plus grands à la recherche de pixels.Lissage d'Image a été récemment ajouté à la toile de spécification et n'est pas pris en charge par tous les navigateurs, mais certains navigateurs ont mis en œuvre préfixé fournisseur versions de cette propriété. Sur le contexte, il existe
mozImageSmoothingEnabled
dans Firefox etwebkitImageSmoothingEnabled
dans Chrome et Safari, et la définition de ces à false va arrêter l'anti-aliasing de se produire. Malheureusement, au moment de la rédaction, IE9 et de l'Opéra n'ont pas mis en œuvre cette propriété, le vendeur préfixé ou autrement.En général, il vous suffit de suivre deux règles:
(x | 0, y | 0)
Où
x | 0
étagesx
rapidement, ne sera toutefois pas travailler avec des nombres plus grands que de 2 147 483 647: Le plus grand entier signé de 32 bits.Espérons que vos coordonnées ne sont pas plus gros que ça!
Je pense que ce lien sera de l'aide totale. J'ai fait la même mais dans mon cas, je donne la toile, le poids et la taille de façon dynamique à l'aide de javascript. Puis j'ai donné la hauteur et la largeur de la toile quand je le reconnais. Afin de résoudre le problème.