Edit Png Image For E.g change particular area and fill color in that area.
I want to change the color of an image only selected area. Like the first user selects a color then he chooses an image after that he can change the particular area of image color with the selected color.
After that he can save that image too Is it possible?? like Color pany website uses this kind of thing.
like below URL
Edit Png Image For E.g change particular area and fill color in that area.
I want to change the color of an image only selected area. Like the first user selects a color then he chooses an image after that he can change the particular area of image color with the selected color.
After that he can save that image too Is it possible?? like Color pany website uses this kind of thing.
like below URL https://www.sherwin-williams./visualizer#/active
Share Improve this question edited Jun 6, 2018 at 10:15 Partha 4024 silver badges15 bronze badges asked Jun 6, 2018 at 8:57 user3198563user3198563 4553 silver badges13 bronze badges 3- 4 Show what you've tried... – Yash Parekh Commented Jun 8, 2018 at 11:26
- @YashParekh as of now i am changing image color with css. – user3198563 Commented Jun 11, 2018 at 3:57
- Okay, what else have you tried besides that? Please, at least use google and check out some articles about it. Like this. – user7637745 Commented Jun 15, 2018 at 8:29
4 Answers
Reset to default 9 +25Edit: Its Possible to get the image data from a canvas and change its pixels. You could also search for algorithms for drawing lines, circles and etc. But the ideia is still the same (Get a canvas image, Edit it, then save it).
Since you are using AngularJS, you can create a directive that gets the color as input and plots that color on a specific area of the image. Then you can use the canvas.toDataURL() or canvas2image() method to parse the canvas into an image with the desired format.
Check the MDN docs for this method here https://developer.mozilla/pt-BR/docs/Web/API/HTMLCanvasElement/toDataURL
I have made a small code snippet just to give you an ideia. I think that the color picker feature is a step that you can easely implement and deliver as input to your canvas directive. I hope that helps!
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./ajax/libs/jquery/3.3.1/jquery.slim.js"></script>
<script src="https://cdnjs.cloudflare./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+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+lYUU5QAAErJJREFUeNrsXetPXNcRXx7hbZuAMRgTjGxMQuxgxw2xSV05clLFqqpW6gf/AUn+qUj5kr+gqpUPSWS1URrjOAoijd3wslP8IBjWGAfM8thXZ2526DDMnHsX8uGQniNdLbt79+5yfndevzMzp6JYLKbC+PWNap9+zMGDB7e9VigUUkePHk01NTWlfvzxx1RjY2Nq3759qaqqqlQ2m42OJ0+epI4fP16Zy+UOtbe393Z2dnYdOnSoA85teA5GZWVlBYzoevSYz+cLGxsb68vLy0szMzNz09PT92/duvUfeGshnU6n4DPReXh9uvnxO+Ezzv8Bf68Po8IniS0X2NXVVXy/rqWlpf/VV189c/jw4SPwXjWCggASOPSIr+FB/zP9jdcCoPEGWR8bG7v/xRdffHf37t0JeG2Dn7+XgK3ei2oGJxqks6qtre3UyZMnLwDwbbW1tRGAeCAA/FFKK12DHhEMPA+uV9vR0XFicHDwxOjo6Oxnn312Y3Jy8jZ8roDX2ktjz0ksAghqtvPll19+68SJE8fr6+sjAKurq1OgdbcASqDSseUfh+d4bfz/6cDn9BpeA9R06tq1a1NXr169lslk5vC7gyr+hYFFFXz//v1UX1/f4NDQ0CWwpfU4+QgmHfhcgspVMKlVep1LLQcWD1TNkUqDG2Z8fDzz0UcffXrnzp1/yRskALtLYOvq6qrAlv7+woUL5/fv3x8BWFNTEx04+RxUAlHaVm4vpWqXkovA0iPeNOigffDBB5+PjIx8LtV6ADZmgI3b9hpOLDpEr7/++p9ee+21gYaGhmiiEVBUjQQqqWAOogSWq2EpuS5wwZ5H11pbW0t9+OGHN8C5+tQCNzhPykAvV9pBAK4S7Okfz549O4D2FEFFQElS8SDVK22qZl+lerZUMr2P4OIjggtaI/Xuu+8Owd8bw8PD//CZA/AKWO6Y0CSfP3/+bVC/ZwhUzZ6SpHLw4oCVN5D8LEmeBBc1xnvvvXdxYWHh6cTExKivwFb69GNQIuhAsHp6ek5fvHjxDZxMsqcIqsumatJLsawlzTzupUd545DnjePAgQOp999//53m5uaOAGwSg8+kBcBsfvPNN995/vnnN1UuTa6MUSWwUlI175gDaUm5vFHo+1GCe3t7665cuXIZzquiUAuPoIqVsbS0tPn36dOn3zp27FgDTRgHVwNVU73Wo/Uad6j4eeSE8fOQaoQbr+fbb789c/v27RG0+0FijUEEQ2tra8+5c+dOoV0lR8lSwVLlahKoSaTUEqSuXaqdSy6+j7/t8uXLvwXtUktSG4BVBtouiFErh4aGftfV1VXBQeXAWupWk0Ir3LEkWN4EEmj6m/hl8Nhb+vr6XgFnKmKqArDKQPUG0nrk1KlTxzj5wL1gzixZ8asLcC6dmmRbNwLXEPz78bddunTpNxCDV4EzFWysFe6AU3Kmvb29QgttOKguFaxJoaQZeUhl2Vd+DXqfwKV4F0MgkNiOl156qTOdTj8IEqsMCG/qwGE6odlVbl8lwJq95SqTM1V4YDjFSQ55k1hSa3nVjY2NFQMDAy+iKQkSqwyYbDCtXfu5B4yTF8cuWXYSz6Wbg6Sfe7hoI2mxHiWPiH/OKFn2moNb4rO7cZEiAKsvAnThIjoBoVGGtC4a5yzRDUHSSVJLny+t6Ubqf319PTpIvXLVK2lDC1iQ1oMtLS2NcMpKAFaMzs7ODiL25bqq9Ibj1CWBiiETBxdfJxIEJRUBJSlGEInW1ADlmRdSY8D16wcHB5sDsHq400ZSpXmhGtOkDbKrCCYCS/EwOWIEHAcan6MqxgMl2ZJW6UjRAdeqWFtbawqqWBlNTU013IN1AWplRRCwFC5xZ4kvFiA4dB3ybrmtlXbWtZLDflttAFZfBKiwvF3tb7muSjcFedEErtQC/DPcseL2nIdCVggkQyfwDyoDsLoKrbDiVM2maq/x1RiLV5ZOlrThHFRLWo24OR/iWJ0rLriW1MpduXEBqkmcBp4ltYaqzgVgdRVXjMuAcIUeMitCZkZIQLQkNgs8a/Brg9QHYLUBE1tM4KA4V27YtTadIp5mysHguU380G4C/tx63ydV7JWNBdWZ09SrBq7rNQpdEFTydjnpT+dQLEsHJa9pjpMV+ggfIReA1SU2m3QSXWqapJXCF3wkT5kDS8BTiMOB5baTs1AOlV4MzpNtr3IaGWCBm8T2EVBSGjUVLONXeT2Xvcf7KU9kc5DYbSPncljiltak/ZSOEXeOeMY/L+1wqV5+jvI74e1CANZQxXmXZMbFsNqNILP6aUjVKw8Z6rgqCOjnk48QgFVsrJSIclSwlFwuifQ3nSNft0AtIym8ADY8SKw2sujlOEId12vyfQ6IVKHS/mpquByTUDq3EMIdY4BqzLo8YZeHHEce8LVWzbmS4LrYJ14pwCU2h+518IpVYPMaXWiFGUlUtWY/JZAuCbVsqwJ0ARROCHdUlxgGjxflwrYEM85x0g6H8+NMiYm7efDng/NUCMDqzFOBq7ikHrLLO7Yk1QI9qdOkvI9quBiAVUZzc/OmmYpjm5Ikikv76gK3TA9Y+30osd4A6xtBkY2zbxrQlgrVgNO8Y5dKTspwwffmymXH/m+AJUpRy4xIIj1xAGpxrAZsXCqM9dt9KoT2bT0276IONWcqrhrA5UzJUKdcSZXAekQV+wXsxsZGLi6sSEpQyFjVZWN3oWGkjQ2qWOXkCoWNJF6xq4+Ei6QgFSwpw3JZJy1sQp7YJxvrlcSura1lLQfJ8oytRflyvGIJWBxAhscegLXG+vp6tpwww5U47mKMtAWCnahkLvlwjZwvrYB89IoLSSdUSizV0EjVLCVVs7/l2FrOE3Mnj69MBWC3O095algZt9Yqa1WtiSdwOehajJvUUbIea2pqcgFYYzx69Cg7PT2N7QqisgxX4y3KG5Zxr8UHJyEnLKKCri1VbalmJ8qZmpub8yrc8S1LMT81NVVcXV2t6O/vT3V0dEQNs1yFzZbttfhgmnwXQSGvIwkTKu7CFnzYkXViYiI1Pz+f82kuvQIW1FkBJi2fTqerFxcXUy0tLakjR46kDh8+jDxy1AGVMg35oSV6ayQEd7Li1mI14gNvCgQTG2bOzMykZmdno79x+JR66h2wOHcwwXlQw1GX8J9++ik6Jicno37F2MwL2wHgI6prlGbq2pZE7UpptpwxnnOcyWSi/lN4o+GBvwdfozZ8+N2lHOZsANbBUSCtSGqPVB6CjHYMW+48fvx4EzAql+QFzgg09V2UXWeomo4nuVGiOFW2I2jY1gcBREDxOX43Tz+l30Sq3be6HS+BRYmVahUnEwFDqUV1jIAR2Kga8UAAnj17Fr2H56Fk4znUUIS3lpdSiZ/HR+y+iqoVj5WVlc0CaGrMpYVQnFIMwNohBYKad1GI1DCEwEXbS5JHIKPkoWQj0AgyVbXzinYq68Dz8TyUUjzwb3xNerhxtbIB2ASq2HJg5O4cGhXIHR1Ur9QDmVoTUFU7r9vhzhNJtXSoNNssQiKvbKxvy3ZbVDFNpNbH0NXfKY4CTJIuI0OoBEl0uQCswyvWVDGXWK2RZZJ8J3KWXCUgu8mkCKrYbWOLlo21OpESALKlnrYWy1vCaxUAu1ho9ypZ3DtgS0SDaWO1FgbkNWv8skVUcGC1MpAdcL6YD10IwBqj5LEmkti4XsSWuuV2VoKqSWSS/CfLmw/AbgU2pwHLiQG5siNrV2XVurawrtlbzXFKkl9cIlWCxMZ4xllJTljdYzRptfbS0arttGS2neRBlSQ2ABszSduq2l0NvVxpqhq4XL3Kwme5EJ/wRiSO2ytgfWtVEJFC1gRa25q5nCfLSZKPMtyJqwsSN453Nta3ONaMB+OICG2FRotTtUeNxXLlTCnfHVRxAqnNugDT1mJdtTuuMkorH8rlPBkqOgAbZ68wjdNSwTIlRsa6LtZJay7iYqRcGRWK5CKwxQBsAq/YSjON252jXK/YohM1IK3+FGhjfdvA0DdKcbO4iU+UpBCT9qRIGu5I++pSu4Yke1Xe4Z3zVJrobJK0U80DtsgJLpGyr5MGsBHSuDzlnG+az7eK9ujutyY3STG0Vodj0YflEhOOmDnrG7DecsVJ94N1ERPybxnaxK3wWHnKe0FivfOKaZJcWYSOz6pF0Ny+aovtWtvbuCbVQRWXP/LlVNhpbJAFrsY2aR6xFcM6qMvsbmttf9USi0lkePfT9iqWOpSva0BKQC2u2CrMiqvW4w4fOGS5EO44BmYXIrA1NTVFOCpoWc5V+2qpTmlbtVIPjfhPKnlC6rMB2JhwB4HFbAQYVXzHR0oHddGHmlcsSzziKgVcqlhKLdMYXhU9e2djS61mI2C5uqQMfXykrHxLiiy1KZfpklCImoTKWp+SNgnhjtO1/DnzPl9qw75lzZXqaKhMgyZVdgrXHCKqs5F5x7J1PK+rlTeG1huD5R+HcCeJ4KbYSgnfgBAdKnyOIBDFSDtKYmI4lmUg+FSyQdKN70tv2cqg0OhFi5hgzlgANs7GVrBQVX/F9YDlHy6VXy3OSAEoqUfO0uRdtgR2ATcA8lSjFgrR53IPlmRQUFnHHiIOrgaN1Z5NruwnYpi2rOwFYx2htbY3mySoitupf5bbdtAEhr8ehfe6s7VlIbe+wdXxgnhIMnMlcOQ0s5dqqxSZpDb920wGVnR8k1jVKk14sxbKxe9VppISrOZdknsoB15E4XkiFRYD4cAftq6yDcbV8L6extLYwkLTPk+P9QpDYBAQFesS0FZqUNh5nynKNuBbx9FmNfdKYrPK0cTHY2DiJLe0emdO82TjgXOWQlgT/Al1Qg8QmlFjVGbGAs5bktGxCS8rLsKfq1mfBxsapj/+1z8vFhTqSZHD1bNJ2lCyndXzM82IAdgfhg2sDQqsk0pLEJPvsWN66tvZL5R0+bcviJbDI75aYo202VtKFvIBZFla5simkXbZKKJNKcMmDLwZgYyhF2hHDohT5QasrcYS+pdbjQhsNaIWZyvlWaecdsNizqTRpOc2r1faCdTFOrqwLCbAm2a4WQOy1XNG39AlfvWK5D6u2DywtAvANfuVW3FLiNBZrh+yYbNwVgHUN7IpWUsnruDynqWItk19bYHf1anL1JY5jmxRmK0hs3MDevwgOgPoUW9rK5DMkL9DBota2aJO5FFtbcnNJ1Yq2YihDpy1Gf4Da+AVgjTE1NRUB09jYON/T05Orra2t5qoYQcVsCAKWAC2xVdvWYDXJ2ymYFpsF37nqU2dxLylFtJsI2tra2gKMR3zyqREmSS39Ta9Te1oNXItG1JylBEyT1CSLmGRHR5BYR5gBgOUfPnw43t3d3cVbylJuE69mpwVzAtWqvUkKrgtQjTCZm5t7iID6ln7q2y4em5OXTqf/Dc7UBQiB6kjVUX9i3iiTXsfPysp0F8CWmk4i6aQR4CZ7du/evQfU1zgAawxqAY8jk8ksTk9Pfz8wMHCWgKEUF1LNPMwh1WzZ2LjdnjUwuVbQdrWE33frwYMHq2g+gvPkGE+fPt3yfGxs7MbRo0dPgtTW8nYFlL/EVLe5YB4X1rhWeiSonBhZWlpaGx8f/9q6mYLzJIJ/fiwuLqZHR0f/STaU1C05WgQwJZHHMU1aNzcLYKvTDH0/grqysrIo2a8AbIxjQqBMTk7euHv37g/cxhLAFMsisPioVa3LVj+uxl+yCk9KKn0nOHYzExMT11Mej8qU5wMmND8yMvLJ/Pz8M5xk9EAx4x+9Y7SrXBJd+U9aI03ZVdW6wTiooEWWb968eRWer/s8b9WpPTAAyPmpqam/gmReaWlpqUVgqQoPHS4KhWjyZb2NBa7kojVakveBgptpY3h4+G/grc/5PmcVPtGcVsiAW6vgjln19fUvgpf85wMHDjTwmh5Uw0RcuPaQJc9agm+VhXCgQVPkrl+/fnVmZua7JLF4ADYhsC+88AIxUz39/f1/aWtr209OlNwXJ2lSuNVvkTtEeK3l5eXMV1999fHs7Oz3SUmWAGxCYLu7uzdJfxiHent7/9DZ2dnDa3ek/bQ6x8Tt4kHP8RoA5r1vvvnmEwjFZsthzwKwZQKLo7Th0XPw2hugooeQnbJ2qIzbXpSHKWRL8XOZTGYVPPKbENYMg5rfKJcWDcDuAFj0jBEE3A4NHJk2UM3nwKl6pampqZb3rdBICdlsRFang4O0DuHM2J07d75cWFh4vFO+O3jFu7gJSoXPaQiFPgan5mtQzacA3L59+/a1Vf08nJsmEbC46AB2dA7GDwDq7aWlpUfE/3q4hv7rBnYzEC8xUCDF8wDI30HKvgSgD7a3t3cDwO0NDQ2t4HA1wDnPgZRXwFHALEgYq6Bun8BnZuHxAXjU8wBs1P0FvW3OMu3JG3+v3pFhuMd/BRgAcDWpk0ueFoMAAAAASUVORK5CYII=" class="color-img" />Demo:
Full page: https://angularjs-rj88cu.stackblitz.io/
Code: https://stackblitz./edit/angularjs-rj88cu
Explanation:
The editor is an svg containing background image as <image> and areas as <path> both are created from editor.imageUrl and editor.areas
For downloading,
- Background image is drawn on a canvas
- SVG (without
<image>) is converted to dataUrl and then drawn on canvas - Canvas is converted to dataUrl for downloading
Why canvas was not used instead of svg in the first place?
Because mouse interaction are difficult to implement in canvas and is much easier in inline svg as the work like DOM elements (hover pseudo class, click events, etc)
Also I assumed you wanted angularjs because you have tagged it (even though you have not mentioned in the question)
Also there are a lot of bad practices in the code like editor not being a ponent and styling input[type=color]'s Shadow DOM (you can use some colorpicker plugin instead)
PS: Tell me if something needs to be changed
The functional in the example - custom product, and it's implemented through AngularJS.
If you want to do something like this, you may bine several jQuery plugins and HTML5 features.
Things you need:
- some jQuery color picker - for choose color
- HTML5 canvas - for show borders and fill image areas with a color
- canvas2image - to save image
If you want to use some out of the box, just look for some jquery colorize image plugin.
Just copy and paste this function in custom helper file or your class. You just need to set parameter for proper image resolution result.
function resize($source_image, $destination, $tn_w, $tn_h, $quality = 100, $wmsource = false) {
$info = getimagesize($source_image);
$imgtype = image_type_to_mime_type($info[2]);
#assuming the mime type is correct
switch ($imgtype) {
case 'image/jpeg':
$source = imagecreatefromjpeg($source_image);
break;
case 'image/jpg':
$source = imagecreatefromjpeg($source_image);
break;
case 'image/gif':
$source = imagecreatefromgif($source_image);
break;
case 'image/png':
$source = imagecreatefrompng($source_image);
break;
default:
die('Invalid image type.');
}
#Figure out the dimensions of the image and the dimensions of the desired thumbnail
$src_w = imagesx($source);
$src_h = imagesy($source);
#Do some math to figure out which way we'll need to crop the image
#to get it proportional to the new size, then crop or adjust as needed
$x_ratio = $tn_w / $src_w;
$y_ratio = $tn_h / $src_h;
if (($src_w <= $tn_w) && ($src_h <= $tn_h)) {
$new_w = $src_w;
$new_h = $src_h;
} elseif (($x_ratio * $src_h) < $tn_h) {
$new_h = ceil($x_ratio * $src_h);
$new_w = $tn_w;
} else {
$new_w = ceil($y_ratio * $src_w);
$new_h = $tn_h;
}
$newpic = imagecreatetruecolor(round($new_w), round($new_h));
imagecopyresampled($newpic, $source, 0, 0, 0, 0, $new_w, $new_h, $src_w, $src_h);
$final = imagecreatetruecolor($tn_w, $tn_h);
$backgroundColor = imagecolorallocate($final, 248,248,248);
imagefill($final, 0, 0, $backgroundColor);
//imagecopyresampled($final, $newpic, 0, 0, ($x_mid - ($tn_w / 2)), ($y_mid - ($tn_h / 2)), $tn_w, $tn_h, $tn_w, $tn_h);
imagecopy($final, $newpic, (($tn_w - $new_w)/ 2), (($tn_h - $new_h) / 2), 0, 0, $new_w, $new_h);
#if we need to add a watermark
if ($wmsource) {
#find out what type of image the watermark is
$info = getimagesize($wmsource);
$imgtype = image_type_to_mime_type($info[2]);
#assuming the mime type is correct
switch ($imgtype) {
case 'image/jpeg':
$watermark = imagecreatefromjpeg($wmsource);
break;
case 'image/gif':
$watermark = imagecreatefromgif($wmsource);
break;
case 'image/png':
$watermark = imagecreatefrompng($wmsource);
break;
default:
die('Invalid watermark type.');
}
#if we're adding a watermark, figure out the size of the watermark
#and then place the watermark image on the bottom right of the image
$wm_w = imagesx($watermark);
$wm_h = imagesy($watermark);
imagecopy($final, $watermark, $tn_w - $wm_w, $tn_h - $wm_h, 0, 0, $tn_w, $tn_h);
}
if (imagejpeg($final, $destination, $quality)) {
return true;
}
return false;
}