changer une zone particulière d'une image et remplir les couleurs de cette zone
Edit Png Image For E.g changez de zone et remplissez la couleur de cette zone.
Je souhaite modifier la couleur d'une image uniquement dans la zone sélectionnée. Comme le premier utilisateur sélectionne une couleur, il choisit une image après quoi il peut modifier la zone de couleur de l'image avec la couleur sélectionnée.
Après cela, il pourra également sauvegarder cette image. Est-ce possible ?? comme le site Web de la société Color utilise ce genre de chose.
comme ci-dessous URL https://www.sherwin-williams.com/visualizer#/active
Démo:
Page complète: https://angularjs-rj88cu.stackblitz.io/
Code: https://stackblitz.com/edit/angularjs-rj88cu
Explication:
L'éditeur est un svg contenant l'image d'arrière-plan sous la forme <image> et les zones sous la forme <path>. Les deux sont créées à partir de editor.imageUrl et editor.areas.
Pour le téléchargement,
- L'image de fond est dessinée sur une toile
- SVG (sans
<image>) est converti en dataUrl puis dessiné sur du canevas - La toile est convertie en dataUrl pour le téléchargement
Pourquoi la toile n'a-t-elle pas été utilisée à la place de svg?
Parce que les interactions de la souris sont difficiles à implémenter dans le canevas et sont beaucoup plus faciles dans les svg en ligne car elles fonctionnent comme des éléments DOM (pseudo classe survolée, événements de clic, etc.)
J'ai aussi supposé que vous vouliez angularjs parce que vous l'avez étiqueté (même si vous ne l'avez pas mentionné dans la question)
De plus, il y a beaucoup de mauvaises pratiques dans le code, comme l'éditeur ne faisant pas partie des composants et le style de Shadow DOM de input[type=color] (vous pouvez utiliser un plugin colorpicker à la place).
PS: Dites-moi si quelque chose doit être changé
Éditer: Il est possible d’obtenir les données d’image d’une toile et de changer ses pixels. Vous pouvez également rechercher des algorithmes pour dessiner des lignes, des cercles, etc. Mais les idées sont toujours les mêmes (obtenir une image de toile, la modifier, puis la sauvegarder).
Puisque vous utilisez AngularJS, vous pouvez créer une directive qui récupère la couleur en entrée et trace cette couleur sur une zone spécifique de l'image. Ensuite, vous pouvez utiliser la méthode canvas.toDataURL() ou canvas2image() pour analyser le canevas dans une image au format souhaité.
Consultez les documents 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 idée. Je pense que la fonctionnalité de sélection de couleur est une étape que vous pouvez facilement implémenter et transmettre en tant qu'entrée à votre directive canvas. J'espère que ça aide!
function hexToRgb(color) {
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
color = color.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinyColorPicker/1.1.1/jqColorPicker.min.js"></script>
<label for="sel_top">top color: </label>
<select id="sel_top">
<option value="#ffffff">select</option>
<option value="#ff0000">red</option>
<option value="#00ff00">green</option>
<option value="#0000ff">blue</option>
<option value="#FCF153">yellow</option>
</select>
<label for="sel_top">bottom color: </label>
<select id="sel_bottom">
<option value="#ffffff">select</option>
<option value="#ff0000">red</option>
<option value="#00ff00">green</option>
<option value="#0000ff">blue</option>
<option value="#FCF153">yellow</option>
</select>
<div>
<input type="color" value="#ff0000" class="myColorPic">
</div>
<br><br>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHYAAAB1CAYAAACbMxW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExOTJCMDg3OTU1MEJDOEEwMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowQzU0OTlGNERGMjIxMUUzODlENzkyOUUyRDQ1QTJEQSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowQzU0OTlGM0RGMjIxMUUzODlENzkyOUUyRDQ1QTJEQSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk4ODVENjMxMkYyMDY4MTE5REQwRDU4RURDQjc0MkNFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTE5MkIwODc5NTUwQkM4QTAwIi8+IDwvcmRmOkRlc2NyaXB0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" />
<img id="img_top" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHYAAAB1CAYAAACbMxW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExOTJCMDg3OTU1MEJDOEEwMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0RjZGMTczMURGM0UxMUUzODlENzkyOUUyRDQ1QTJEQSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0RjZGMTczMERGM0UxMUUzODlENzkyOUUyRDQ1QTJEQSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk4ODVENjMxMkYyMDY4MTE5REQwRDU4RURDQjc0MkNFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTE5MkIwODc5NTUwQkM4QTAwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+MgKkpAAAAyhJREFUeNrsnV2ITGEch98z67OUbNxJlNKmKfJ5o3XhK+XGlUSrlHIlHxf2Si7sjcIVKSlSciGluBElrkhCudiUUkqRtIxZY3bH7+0cN5pzZpnd0/t/PU89bW3b7Nn36X/mzMzOO0mr1XIQH9Mi+lt6ZFVulevlCrlAzpaVNj/flCPyvXwpH8sHcjiGxUgimNi5cqfcJ9fKWV3c1lf5SF6Tt2WNsOUzQ+6Sx2XfFNz+c3lGXpdjhC2H1XJIbi7hd92Vg9npmrBTyEF5Ss4r8Xd+kkflVSuLVDEUdLo8J8+XHNUzX16RJ5jYyWWmvCT3BHAsZ+URJnZyHsZcDCSq57A8ycR2z2l5LMDj2i8vE/bf2BvwBcsXuVG+IOzfsVg+zS5cQuWh3CIb3MdOnKHAo3r65QATO3H8Ke6+kYu7N3KVS593ZmI7XAUPGnqMvVTu5lTcmXVyk7PFAZc+gULYAgacrWfEPP4lwjWEzce/BLfd2SOROwibj3+BfKGzyQbCFoe1yrKQ7mdDC7vScNhe191/b0Qdts9w2AoTm88cZ5sewga+MNbXM7SwifGw44RtzxhhCUtYQ2HHjYdtEbY9P5jYOMPWjEdlYnMYNRy2ycTGeSpuMrH5NJjYOMN+Z2K5eGJiDYWtE5aLJ07FhC3t2Ambw0/DYUcJW7w4lsM6wsb3cIewkU5snbD5NJhYJpawhsLWCEtYwhoKWydsnGFHDIflqriAYcNXxkxsh4n1W9R+NDitNwlbzB25XN4wEvWWS98l+Cqkgwp9Ay+/ccchl24yHdIbtj5kQS+EFtRK2N/4Taf7M7e5dPudMvkmn2Tec+kW80FjdSNq/ybjJS7d1GNRZjX7Xm8Xt/ss++qn8J18m8V8bW2Bkv/gUzyq2cT/yecsXJQkfDxLnFRYAsICYYGwQFggLGFZAsICYYGwQFggLGFZAsICYYGwQFggLGFZAsICYYGwQFggLGFZAsICYYGwQFggLGFZAsICYYGwQFggLGFZAsICYYGwQFggLGFZAsICYYGwQFggLGFZAsICYYGwQFggLGFZAsICYYGwQFggLGFZgjj5JcAAduytr+mX7+kAAAAASUVORK5CYII=" class="color-img" />
<img id="img_bottom" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHYAAAB1CAYAAACbMxW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExOTJCMDg3OTU1MEJDOEEwMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0RjZGMTczNURGM0UxMUUzODlENzkyOUUyRDQ1QTJEQSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0RjZGMTczNERGM0UxMUUzODlENzkyOUUyRDQ1QTJEQSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk4ODVENjMxMkYyMDY4MTE5REQwRDU4RURDQjc0MkNFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTE5MkIwODc5NTUwQkM4QTAwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ikYT4wAAA59JREFUeNrsnd2LjFEcx896K3lJXkou1Ja8tpQtV668hLiRC5JIKSmRC/+CXLiSv0B5iXBBQm6kUJJlkFJECcUSMe8zvqc5e7Nmd59pZ8f5nf186tts07ycfp/nnOecZ2bndNXrdQfpMYESIBYQC4gFxAJiEUsJEAuIBcQCYgGxiKUEiAXEAmIBsYBYxFICxAJiAbGAWEAsYikBYgGxgFhALCAWsZQAsYBYQCwgFhCLWEqAWEAsIBYQC4hFLCVALCAWEAuIBcQiNrL2rFRuKPOM1XGqshWxQ1NUtigvlZ1GpG5XniqLEDs0FaUUeuxF5Y1yWJkeWTvnK4eU58pVZYlSiKmBXZHtCbBQeaHMGHS/l30v5JbypMPt8gfWmpCNyromj9mnnEVscxaEXjBnhMf1K++UPuVDSC7c1z+K9+8Ntz3hIOsOMpdneK4/dVyKpZCTIhviyuE8OxKzQ3ozPDYXenyz1+huY9vzMRUyRrGlNr9mT4faHtU5NsbJU9no0jGP2M72WEePRSxix4iaUbHVjJO+cSvWGRVbCvMDxA5D0ajYMmINnavosYkuG+ixiKXHJii2SI9NU2wZsQzFiDUmto7YNMU6xKa3ji0gdmT+IJYey8FoSKzFa8V5xKYplqGYHotYxCa4jq0hNs0eW0FsmsudKmLTE1tCbLpDsTWxLHcS7bFFxKY5eUJsBmoG17KIzSi2gNj0xFaNia0i1nChhqGC2OxDcZ4em57YKNeFiE10MsJQPP7ERjnZQ+zoie6/ADjHtu8grCE2PbFRfsyIWMQidpi2MhRn5KcxsXXEZuO9MbEOsdnIGVryfEdsdvwPUPcZEfsWsdnxX4+5ZkTsQ8S2xmXlR+RSPysPENv6EHclcrHnYz3HxvbT8YPxP9n+yP27R0AM+NFktWv8XD09tkVeKScibduZWKVa6LGeKcpNZX1EbXqsbHARX0ixsAWanyEfVb5E0p5PygEX+dUxK3vb+Z2z9kZQzN/KftfYQsYhtj3cUfYo3/7T+/tLhweV2xaKZW03yuvKDuVjh9/3aziozlkplMVtRv02aJvDbSe4r2wysKY2NyseCr+153HlmDJrDF7fb6V2WjkVzq0OsZ1lmXJE2a3MbMPr/XKNHSZPKq+tFiUFsQOsUHYp28Lfk1t4bjnMdO8qF5Rn1ouRktgBpilLlbXKKmWxMjcM3RNd4wvehTDU+o8H/aa+/kK+/ww4n0oRUhQL4q8AAwALXP1gLsyl8AAAAABJRU5ErkJggg==" class="color-img" />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHYAAAB1CAYAAACbMxW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExOTJCMDg3OTU1MEJDOEEwMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0RjZGMTcyRERGM0UxMUUzODlENzkyOUUyRDQ1QTJEQSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0RjZGMTcyQ0RGM0UxMUUzODlENzkyOUUyRDQ1QTJEQSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk4ODVENjMxMkYyMDY4MTE5REQwRDU4RURDQjc0MkNFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTE5MkIwODc5NTUwQkM4QTAwIi8+IDwvcmRmOkRlc2NyaXB0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" class="color-img" />Le fonctionnel dans l'exemple - produit personnalisé, et il est implémenté via AngularJS.
Si vous voulez faire quelque chose comme ça, vous pouvez combiner plusieurs plugins jQuery et des fonctionnalités HTML5.
Choses dont tu as besoin:
- un sélecteur de couleur jQuery - pour choisir la couleur
- Toile HTML5 - Pour afficher les bordures et remplir les zones d'image avec une couleur
- canvas2image - pour enregistrer l'image
Si vous souhaitez en utiliser, cherchez-en un peu jquery colorize image plugin.