Question

编辑Png图像为E.g更改特定区域并填充该区域的颜色。

我想更改仅选定图像区域的颜色。就像第一个用户选择一种颜色一样，然后他选择一个图像，之后他可以用所选颜色改变图像颜色的特定区域。

之后他可以保存那个图像是否可能？像Color公司网站使用这种东西。

如下面的网址https://www.sherwin-williams.com/visualizer#/active

Answer 1

编辑：可以从画布获取图像数据并更改其像素。您还可以搜索绘制线条，圆形等的算法。但是ideia仍然是相同的（获取画布图像，编辑它，然后保存它）。

由于您使用的是AngularJS，因此可以创建一个指令，将颜色作为输入，并在图像的特定区域绘制颜色。然后，您可以使用canvas.toDataURL()或canvas2image()方法将画布解析为具有所需格式的图像。

在此检查此方法的MDN文档https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLCanvasElement/toDataURL

我制作了一个小代码片段，只是为了给你一个意识形态。我认为颜色选择器功能是一个可以轻松实现并作为canvas指令输入的步骤。我希望有所帮助！

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+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+3CU87QAAEslJREFUeNrsXVtsnFcRXtuJE+dmx7m4cdLEatMQJyFtpFyl0FQViBbRFx5CVQEFNULwQrkU1D5xkahQC0GgvrQKoCJKH6qClAceqsBDS00rGgKJILGdFKdtmjiO49Su7V177TDfshMmk5nz/+u04lDOkX7t+t9/Lz7fP7fvzMypu3z5ciGND96oiwnYpUuXXnNuenq6sGbNmsKCBQsKb7/9dmH+/PmFhQsXFhoaGgqTk5OV4+LFi4Wbb765oVwuf7itre3j7e3tO5cvX34bXbts9uzZTfU06urq/v0PVx+npqbKExMTwyMjI2doHO3r6/vjsWPH/kAv9QwMDBToLZXr8Pk8R/hOek/wf8DvTcBeJ7Dj4+N4vbm1tfVTW7Zs+fyKFSu202tzAQoAZHD4Eedw8P/Mz/FZBDRukJHjx4+/9OKLL/7q1KlTB+ncqLw+Afs+A4vnNBpbWlru3bhx48P0euecOXMqAOIAAPJRSysG/994xHfgEa/jPe+++27hCI0XXnhhf09Pz7N0fgrnE7DvI7AAkNTs1g0bNjx6yy23fKypqaky4bNmzSqQ2r0KUAaVj6v+cfqbAeUDf/M5fAap6cKhQ4d+d/DgwUfGxsaO4rsTsO8xsJDUN954o7Bu3bov79q16/tkSxdj8gEmHyxVElSpglmt8nkptRJYHFDNGLhhTpw4ceHpp5/+xsmTJ3+pb5AE7HUCO3fu3NlkSx/fvXv3g4sWLaoA2NjYWDkw+RJUBlHbVmkv5ZBSywADWH7ETQMH7cknn/zO4cOHv6vVegI2Yyxbtuyac5hYcojmbN++/cDWrVs/M2/evMpEA1CoRgaVVbAEUQMr1bCW3BC45G1XPqtYLBYOHDjwY3Kuvu6Bm4A1RtUpugoAAq5h586dP7v99tvvhzpmQFlScbDq1TbVsq/Wc0slW+DierK1haeeeup7XV1d37b+h1jmMypgAZZWjwTq43ffffdDAJUBZUmVKljaUwtgC1gPFO1ISXAx4FQ99thjD3R3d/88VmDrY2JLyI5eOQBWR0fHZ/fs2fMQ1C/bU6jhkE21pJdjWU+aZdzLj/Lz+Tm+F6O5ubmwb9++H1G4dWuszFNUwPJEQzoIzI477rhj/+LFi6+STla9GlQJrJZUyzuWQFqvWTcKfz8keO3atS179+79CV3XyKEWjgSsMYaHhyvH6OhoobOz89GbbrppKU+YVr0hCbTA8uxr6D0WwAwuqEa68fZs27btfmgS+AfaR0jAVgcTDEuWLLljx44dnwb5wHbVU8Fa5eYFTGsJVtch1S7Bxev4bXfddde3SLssYqlNwBoDtoti1IZdu3Y9smrVqnoJqgTWU7eWZHrhjifB+ibQQPNz5pc3bNiwdt26dfcNDg5WnKoErDGg3khad2zatOmjknyQrJJklrz4NQS4lE5Lsr0bQWoI+f34bXfeeecXKQafTc5UAtYa4GHJKbm/ra2t3qIKLVA9laylUNpHHSZZwFsgW04apJYk9rb169dvg6OXgDUGhTfN5DB9wrKrEgwJqgeuVJmSqcKBcEqSHN5N4alnrZopxq7bvHnzPTAlsYxZMQFLk72TbOsqKVWYvCx2ybOTuJZvDpZ+VsFMV/JiPcgHJv4lyeBJsAS3ymd/BIsUCVh7EWAnFtEZCIsyBNh5nCW+IVg6WWr5/QAPYEL9l0qlysGME79uLRp4wJK0fqi1tXU5XXI+AatGe3v7FqYLtR3V3nCWumRQETJJcHGeSRBIKgBlKQaIvN5qASozL7TGoM9vpZi2IwFrhzudLFWWF2oxTdZguwowASzHw+yIMXASaOaEcTDhb4ErpVke9Fn1xWKxLaliYyyoUjcWKeDFltbEy7Va6SzJxQKAw5/DBL+0tdrOhsh98dsWJWDtRYAGz9u1nut1VR3WMLhaC8j3SMdK2nNeXfKA1LYd15J/MDsBa6vQOm91Jk+cKYHVoZHnRVs2XILqSavDXk2kONbmiqdCS2q1rtyEALUkzgLPk1pHVY8nYG0VN5WVAREKPeS1Uur0cwmOTmLzwPOG/GyS+mIC1hjTgYShWpbnqp91xSmSaaYSDJn+Ig/rJpB/e6/HpIqjsrGkOkuWerXADZ3j0AWgsrcrSX++hmNZPjgFxnKcvNBH+QilBKwtsaN5JzGkpllaOXzBI3vKElgGnkMcCay0nZKFCqj06eQ8+faqaJEBHrh5bJ9OSAupYB2/6s8L2XsaZXp/klhnlEIOi45ZLYm28oMt50hm/MuMxJDqldcYv7NMrycb66jiiZBkZsWw1o2gs/p5aNWrDx3qhCoIGFj2ERKw1wI7piWiFhWsJVdKIj/na/R5D9Qa8oTLZMOTxFqDnJzRUKgTOqdfl4BoFWpl/FvxbV6TUL22TOeSxFqDVON4yBMOechZ5IFca7WcKw1uiH1ie6sllkY0wNZHBmzJogu9MCOPqrbspwYyJKGebTWALpPGSeGOaaTojpfxol7Y1mBmOU7WEXB+gikxWTcPPHpynsoJWJt5mpQqLq+HHPKOPUn1QM/rNBmvIwafTsAao6WlpcgVbVlsU55EcavPhAdujR6w9fuKdGNGA2xsBMVYln2zgPZUqAWc5R2HVHJehou+t1grO/Z/AyxTilZmRB7pyQLQimMtYLNSYZzfPh5TrXFs67ETIerQcqa8Rfc8zpQOdWqVVH1TSmYrASvGxMREMSusyEtQ6Fg1ZGOvQ8NoG5tUsTWwbJfHK7akNRSHahZKU4a1sk5W2ESgRmVjo5LYYrE46jlInmccKqjK6xVrwLIAcjz2BKw3SqVSZjKYBbKlAkOMkbVAMBOVLCWfPqMYSyugGL3ict4J1RLLNTRaNWtJtexvLbZW8sTSyaNzUXnFUQFLzlMJk+Zl+lvgcnK3N/EMrgTdinHzOkreY2NjYzEB64xz586N9/X1oV1BpSwj1AyE84Z13OvxwXnICY+o4M/WqrZas1PJmerv748q3IkuS7G3t3d6fHy8vrOzs3DDDTegLVCwsNmzvR4fzJMfIij052jChIu70IIPHVm7u7sL58+fH49pLqMCltRZmSZtYmBgYO7Q0FChtbW1sHLlysKKFSvAI1c6oHKmoTysRG+LhJBOVtZarEV84KYAmGiYeebMmcLZs2crzzFiShaPDlgakzTBk6SGK13C33nnncrR09NT6aGEHg9oB4BHqGtIM3dty6N2tTR7zpjMOUbvRPSewo2GA78H5wAyrsV3V3OYk8QGBtJLJljtscoDyLBjaLlz4cKFK4BxuaQscAbQeM4V7LLrDFfTySQ3ThTnynaAhrY+ABCA4m98t0w/5d/Eqr16kySJzZDYklarmEwABqnlDqgMNlQjDgCAlu/cJQ2SjWu4oYhsLa+lEu/HI/YYgGrFge5wXADNjbmsEEqMJLGBkGISUU+IQuSGIQwubC9LHoMMyYNkA2iAzFXtsqKdyzpwPa6DlOLAc5zTHm5WrWyS2GxVPOk5MHp3DosKlI4O1CukkK9jYGUPChzSeWKp1g6VZZtVSBSVxMa2bAdVPKFBs/oYhvo7ZVGAedJldAiVI4mumIAN2FhLFUuJtRpZ5sl3YmcpVAJyPZkUSRWHbey0Z2O9TqQMgN65w1qLZVqRVXEekiKLYqyOqZiSxaMDtko0THg21mphwF6zxS97RIUE1ioDmQHni5qjcgLWGVWPtZRHYrN6EXvqVtpZDaolkXnyn6p+wWQCNgxs0QJWEgN6ZUfXruqqdWth3bK3luOUJ7+4Sqokic3wjMc1OeF1j7Gk1dtLx6q2s5LZZpIHlSQ23yRdU5gVaugVSlO1wJXqVRc+64X4nDdixcbGJrGxtSpwqbnQtmYh58lzkvSjDnfy7s9TPUqxSWxscWwQ2KzdJfUKjRWnWo8WixXKmTK+ezKp4hpUsWdD9VpsqHYnVEbp5UOFnCdHRcPGJucpZK+k86RVsE6J0bFuiHWymouEGKlQRoUhuQD2cgI2h1fspZlm7c5Rq1fs0YkWkF5/CnjFMSWyxUgpVmpg9CRrCjFvT4q84Y62ryG160hyVOUd0TlP1Ykey5N2annAHjkhJVL3dbIAdkKakKdcjE3zxVbRXrn7vcnNUwxt1eF49GGtxEQgZh6LDdhoueI89ToZKv2a5zq0yVrh8fKU84ZoCdirVV5JT2De3sVWmKLtq7XYbrW9zWpSnVRx7aNUS4WdxQZ54Fpsk+URezFsgLocv95a2w+0xCKJDMDy9iqeOtTnLSA1oB5X7BVmZVXrSYcPjcdSuBMS1VJFC483NjZO01HPy3Kh2ldPdWrbapV6WMR/XslTUp+AzQp3qqoYLWIbefLkvnMh+tDyinWJR1alQEgVa6kVGmM8pqLn6GxstdVskTd9YEA4Qx+PnJXvSZGnNvUyXR4K0ZJQXetj0aBJYtWoZt6DnpvSeU1cR8NlGjypulO45RBxnY3OO9at42Vdrb4xrN4YIv84AZvH1GLe5STyBoRwqHgzXqYYeUdJJIajLAPgc8kGSzde196yl0Fh0YseMSGcsWICNsPGSonVrBQXX8l9YCVHK6XXynPSAGoq0fK0pRftgR1b6mmUzBMmCWkm2uZJD1ZmUnBYJB0jCa4FjtWdTa/t5mCb5E2RgA2NJUuWVObb27/Gq3/V23bzBoSyHkfuyc7vkzaW1fYMW8dHB2yMzBPErFhLA0u9tuqxSVbDr+vpgCquTxIbGtVJh+NUzLNXnUVKhJpzaeapFnADieNTCdgc4U7VcSp5Klg7PLU0lrYWBvL2eQq8Xk7A5iAoUJgFis6SRBln6nKNrBbx/F6LfbKYrFp+dozOU2x7AvDukUXLm80CLlQO6Unwe9AFNaninBJrOiMecN6SnJVN6El5DfbU3PosAZulPv7TPq+UFepokiHUs8naUbKW1vEZf1ecvQRsjeFDaANCryTSk8Q8++x43rq19ls9JrH7SAI2MMDvVpmja2yspgtlAbMurAplU2i77JVQ5pXgqgc/nYDNoBR5RwyPUpQHr65kEfqeWs8KbSygDWYKv3UqARsY6NlUnbSi5dVae8GGGKdQ1oUG2JLsUAsgcS4Bm9crRn99S23KfWB5EUBu8Ku34tYSZ7FYM2THdOOupIpDA13Rqip5GMtzliq2MvmtBfZQr6ZQX+IstslgtiCxlxOwgYHevwCHQD2NlrY6+QzkBRwsbm0Lmyyl2NuSW0qqVbSVQRkGbTH8AW7jl4B1Rm9vbwWY+fPnH+vo6CjNQWdLoYoBKrIhGFgGtMpWXbMGa0neTMH02Cz6zqGYOotHSSnCbgK0YrHYOzg4+Fc5+dwIk6WWn/N5bk9rgevRiJazlINp0prkdSTZ8ZEkNhBmEGATb7311m9Xr169Q7aU5dwmWc3OC+YMqld7kxfcEKAWYdLf3/8nABpb+mlsu3hcmbyBgYHnyJl6mEKgFlZ13J9YNsrk83ivrkwPAeyp6TySzhqBbrJzp0+f7uK+xglYZ3ALeIyxsbHX+/r6nt+8efMDDAynuLBqlmEOq2bPxmbt9myBKbWCtasl/b5fv/nmm0MwH8l5CoxLly5d9ffx48f3r1mzZi8J7ULZroDzl4TqdhfMs8Ka0EqPBlUSI8PDw5dOnDjxhHczJedJBf/yGBoa+seRI0ceZRvK6pYdLQaYk8izmCarm5sHsNdphr8foI6Ojv5Ts18J2AzHhEHp6enZf+rUqd9LG8sAcywLYPFoVa3rVj+hxl+6Ck9LKn8nOXZ/7u7ufrwQ8agvRD5oQicOHz784Pnz5/sxyfBAkfEP7xh2VUpiKP/JaqSpu6p6N5gElbTI2VdffXUf/T0c87zNKvwPDALy7729vZ8jyXyutbV1EYDlKjw4XBwK8eTrehsPXM1FW7Sk7ANFN9NoV1fXF8hbPxr7nNXFRHN6IQMIKOyY1dTUdA95yb9obm5eImt6oIaZuAjtIcuetQbfKwuRQJOmKL788sv7zpw580yeWDwBmxPYG2+8kZmpPZ2dnc8sW7ZsJTtRel+cvEnhXr9F6RDhs0ZGRi688sorXzp79uzzeUmWBGxOYFevXn2F9Kexae3atU+0t7fvkbU72n56nWOydvHgv/EZBOZLr7322lcpFPtLLexZArZGYDGqGx410blvkor+Gtgpb4fKrO1FZZjCthTvGxsbu0ge+U8prPkhqfnRWmnRBOwMgIVnDBCwHRo5MqSZO79CTtV9CxYsWCT7VlikhG42oqvTyUEaoXDmNydPnvzB4ODgiZny3QnYGQILQLC9Gfaha2trg+O0kVTzvXTukwsXLtxI185mdspLXGNgSSInyY4e7e/vP0SgPjs8PPw3WX2XgP0vAAsaEhsIo5IdW48SwPMp5l1PYO8mgG+dN2/eOnK4ltJ7m0jKG+goIwuSgLtI7+klEI/QYxe97xgBW+n+Am+blwETsGlENf4lwACcltN9NVv9jAAAAABJRU5ErkJggg==" />
		
		<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" />

Answer 2

演示：

整页：https://angularjs-rj88cu.stackblitz.io/

代码：https://stackblitz.com/edit/angularjs-rj88cu

说明：

编辑器是一个svg，其中包含<image>和<path>的背景图片为editor.imageUrl和区域为editor.areas

要下载，

背景图像绘制在画布上
SVG（无<image>）将转换为dataUrl，然后在画布上绘制
将画布转换为dataUrl进行下载

为什么首先不使用画布而不是svg？

因为鼠标交互在画布中难以实现，并且在嵌入式svg中更容易实现，就像DOM元素（悬停伪类，单击事件等）之类的工作

我还假设您想要angularjs，因为您已经对其进行了标记（即使您未在问题中提及）

代码中还有许多不良做法，例如编辑器不是组件，也不是设计input[type=color]的Shadow DOM的样式（您可以改用一些colorpicker插件）

PS：告诉我是否需要更改

Answer 3

示例中的功能 - 自定义产品，它是通过AngularJS实现的。

如果你想做这样的事情，你可以结合几个jQuery插件和HTML5功能。

您需要的东西：

一些jQuery颜色选择器 - 用于选择颜色
HTML5画布 - 用于显示边框和用颜色填充图像区域
canvas2image - 保存图片

如果你想使用一些开箱即用，只需寻找一些 jquery colorize image 插件。

Answer 4

只需将此功能复制并粘贴到自定义帮助文件或您的类中即可。您只需设置参数即可获得正确的图像分辨率结果。

函数调整大小（$ 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;
}

更改图像的特定区域并填充该区域的颜色

4 个答案:

演示：

说明：