<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* Style de l'éditeur */
#editor {
width: 100%;
height: 500px;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- éditeur texte HTML-->
<div id="editor" contenteditable="true"></div>
<script>
/* l'éditeur texte HTML */
var editor = document.getElementById("editor");
/* Pour écouter les événements input (modification du champ) */
editor.addEventListener("input", handleInput, false);
function handleInput(event) {
/* Selectionne tous les éléments image */
var images = editor.querySelectorAll("img");
/* Pour toutes les images ajouter un listener de chargement */
images.forEach(image => image.addEventListener("load", handleImageLoad));
}
function handleImageLoad() {
/* Suppression du listener */
this.removeEventListener("load", handleImageLoad);
/* Redimensionnement de l'image */
this.src = resizeImage(this);
}
function resizeImage(img) {
var size = {
width: img.width,
height: img.height,
maxWidth: 250,
maxHeight: 250
};
/* Conserve l'échelle de l'image */
size = constraintingProportions(size);
/* Récupération du canvas */
var canvas = drawImageIntoCanvas(img, size);
/*Conversion du canvas en Base64*/
return canvas.toDataURL("image/jpeg", 0.7);
}
function constraintingProportions(size) {
/* Si la largeur est supérieure à la hauteur */
if (size.width > size.height) {
/* Si la largeur est supérieure à la largeur maximale */
if (size.width > size.maxWidth) {
/* Calcul la nouvelle taille */
size.height = size.height * (size.maxWidth / size.width);
size.width = size.maxWidth;
}
} else {
/* Si la hauteur est supérieure à la hauteur maximale */
if (size.height > size.maxHeight) {
/* Calcul la nouvelle taille */
size.width = size.width * (size.maxHeight / size.height);
size.height = size.maxHeight;
}
}
return size;
}
function drawImageIntoCanvas(img, size) {
/* Création d'un élément canvas */
var canvas = document.createElement("canvas");
canvas.width = size.width;
canvas.height = size.height;
var context = canvas.getContext("2d");
/* Dessine l'image dans le canvas */
context.drawImage(img, 0, 0, size.width, size.height);
return canvas;
}
</script>
</body>
</html>
Commentaires
Enregistrer un commentaire