HTMLCanvasElement : méthode toDataURL()
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La méthode toDataURL() de l'interface HTMLCanvasElement retourne une URL de données contenant une représentation de l'image au format défini par le paramètre type.
Vous pouvez définir le format de fichier souhaité ainsi que la qualité de l'image.
Si le format de fichier n'est pas défini, ou si le format donné n'est pas pris en charge, les données seront exportées en image/png.
Autrement dit, si la valeur retournée commence par data:image/png pour un autre type demandé, alors ce format n'est pas pris en charge.
Les navigateurs doivent prendre en charge image/png ; beaucoup prennent aussi en charge d'autres formats comme image/jpeg et image/webp.
Les données d'image créées auront une résolution de 96 dpi pour les formats de fichier qui prennent en charge l'encodage des métadonnées de résolution.
Attention :
toDataURL() encode toute l'image dans une chaîne de caractères en mémoire. Pour les images volumineuses, cela peut avoir un impact sur les performances, et peut même dépasser la limite de longueur d'URL des navigateurs si elle est affectée à HTMLImageElement.src. Il est recommandé d'utiliser toBlob() avec URL.createObjectURL().
Syntaxe
toDataURL()
toDataURL(type)
toDataURL(type, quality)
Paramètres
typeFacultatif-
Une chaîne de caractères indiquant le format de l'image. Le type par défaut est
image/png; ce format sera aussi utilisé si le type défini n'est pas pris en charge. qualityFacultatif-
Un nombre (
Number) compris entre0et1indiquant la qualité de l'image à utiliser lors de la création d'images avec des formats prenant en charge la compression destructive (commeimage/jpegouimage/webp). L'agent utilisateur utilisera sa valeur de qualité par défaut si cette option n'est pas précisée, ou si le nombre est en dehors de la plage autorisée.
Valeur de retour
Une chaîne de caractères contenant l'URL de données demandée.
Si la hauteur ou la largeur du canevas est 0 ou supérieure à la taille maximale du canevas, la chaîne "data:," est retournée.
Exceptions
SecurityError-
Le bitmap du canevas n'est pas d'origine sûre ; au moins une partie de son contenu a été ou pourrait avoir été chargée depuis un site différent de celui du document lui-même.
Exemples
Étant donné cet élément HTML <canvas> :
<canvas id="canvas" width="5" height="5"></canvas>
Vous pouvez obtenir une URL de données du canevas avec les lignes suivantes :
const canvas = document.getElementById("canvas");
const dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
Définir la qualité d'image avec les JPEG
const fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…9oADAMBAAIRAxEAPwD/AD/6AP/Z"
const mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
const lowQuality = canvas.toDataURL("image/jpeg", 0.1);
Exemple : changer dynamiquement les images
Vous pouvez utiliser cette technique en coordination avec des évènements souris afin de changer dynamiquement les images (niveaux de gris contre couleur dans cet exemple) :
HTML
<img class="grayscale" src="myPicture.png" alt="Description de mon image" />
JavaScript
function showColorImg() {
this.style.display = "none";
this.nextSibling.style.display = "inline";
}
function showGrayImg() {
this.previousSibling.style.display = "inline";
this.style.display = "none";
}
function removeColors() {
const images = document.getElementsByClassName("grayscale");
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
for (const colorImg of images) {
const width = colorImg.offsetWidth;
const height = colorImg.offsetHeight;
canvas.width = width;
canvas.height = height;
ctx.drawImage(colorImg, 0, 0);
const imgData = ctx.getImageData(0, 0, width, height);
const pix = imgData.data;
const pixLen = pix.length;
for (let pixel = 0; pixel < pixLen; pixel += 4) {
pix[pixel + 2] =
pix[pixel + 1] =
pix[pixel] =
(pix[pixel] + pix[pixel + 1] + pix[pixel + 2]) / 3;
}
ctx.putImageData(imgData, 0, 0);
const grayImg = new Image();
grayImg.src = canvas.toDataURL();
grayImg.onmouseover = showColorImg;
colorImg.onmouseout = showGrayImg;
ctx.clearRect(0, 0, width, height);
colorImg.style.display = "none";
colorImg.parentNode.insertBefore(grayImg, colorImg);
}
}
removeColors();
Spécifications
| Specification |
|---|
| HTML # dom-canvas-todataurl-dev |
Compatibilité des navigateurs
Voir aussi
- URL de données dans la référence HTTP.