Skip to content

Modifier une zone particulière d'une image et remplir la couleur dans cette zone.

Gardez votre attention car dans cet article vous trouverez la réponse que vous cherchiez.Cette chronique a été validée par nos spécialistes pour garantir la qualité et l'exactitude de notre post.

Solution :

Edit : Its Possible to get the image data from a canvas and change its pixels. Vous pourriez également rechercher des algorithmes pour dessiner des lignes, des cercles et etc. Mais l'ideia reste la même (Obtenir une image de canevas, la modifier, puis l'enregistrer).

Puisque vous utilisez AngularJS, vous pouvez créer une directive qui obtient la couleur en entrée et trace cette couleur sur une zone spécifique de l'image. Ensuite, vous pouvez utiliser la directive canvas.toDataURL() ou canvas2image() pour analyser le canevas en une image au format souhaité.

Consultez les docs MDN pour cette méthode ici https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLCanvasElement/toDataURL.

J'ai fait un petit extrait de code juste pour vous donner une ideia. Je pense que la fonction de sélecteur de couleur est une étape que vous pouvez facilement mettre en œuvre et livrer en entrée de votre directive canvas. J'espère que cela vous aidera !

function hexToRgb(color) {
    var shorthandRegex = /^#?([a-fd])([a-fd])([a-fd])$/i;
    color = color.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(color);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : {
        r: 0,
        g: 0,
        b: 0
    };
}

function colorImage(imgId,hexaColor) {
    // create hidden canvas (using image dimensions)
    var imgElement = document.getElementById(imgId);

    var canvas = document.createElement("canvas");
    canvas.width = imgElement.width;
    canvas.height = imgElement.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElement,0,0);

    var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);

    var data = imageData.data;

    // convert image to grayscale
    var rgbColor = hexToRgb(hexaColor);
    //console.log(rgbColor);

    for(var p = 0, len = data.length; p < len; p+=4) {
        //if(data[p+3] == 0)
        //   continue;
        data[p + 0] = rgbColor.r;
        data[p + 1] = rgbColor.g;
        data[p + 2] = rgbColor.b;
        //data[p + 3] = 255;
    }
    ctx.putImageData(imageData, 0, 0);

    // replace image source with canvas data
    imgElement.src = canvas.toDataURL();
}

// changing color of capsule on select event
document.getElementById('sel_top').onchange = function(){
    colorImage('img_top', this.value);
}
document.getElementById('sel_bottom').onchange = function(){
    colorImage('img_bottom', this.value);
}

$('input[type="color"]').on("change", function(color) {
      console.log(this.value);
      var colorHex = this.value;

      colorImage('img_top',colorHex);
 });
img.color-img {
	position: absolute;
}





		
		
		
    


Démonstration :

Page complète : https://angularjs-rj88cu.stackblitz.io/

Code : https://stackblitz.com/edit/angularjs-rj88cu

Explication :

L'éditeur est un svg contenant une image d'arrière-plan en tant que et des zones en tant que les deux sont créés à partir de editor.imageUrl et editor.areas

Pour le téléchargement,

  1. L'image de fond est dessinée sur un canevas
  2. SVG (sans ) est converti en dataUrl puis dessiné sur un canevas
  3. Le canevas est converti en dataUrl pour être téléchargé.

Pourquoi canvas n'a pas été utilisé à la place de svg en premier lieu ?

Parce que les interactions de la souris sont difficiles à mettre en œuvre dans canvas et est beaucoup plus facile dans inline svg que le travail comme les éléments DOM (pseudo classe hover, événements de clic, etc).

Aussi, j'ai supposé que vous vouliez angularjs parce que vous l'avez marqué (même si vous n'avez pas mentionné dans la question).

Aussi il y a beaucoup de mauvaises pratiques dans le code comme l'éditeur qui n'est pas un composant et le style.... input[type=color]'s Shadow DOM (vous pouvez utiliser un plugin colorpicker à la place).

PS : dites-moi si quelque chose doit être modifié.



Utilisez notre moteur de recherche

Ricerca
Generic filters

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.