编辑PNG图像，例如更改特定区域并填充颜色。
我想仅更改图像中选定区域的颜色。例如，第一个用户选择一种颜色，然后选择一张图片，之后他可以使用所选颜色更改图像的特定区域颜色。
之后他也可以保存该图片。是否可能？就像彩色公司网站使用这种工具一样。
更改图片的特定区域并填充颜色。
10
- user3198563
3
4展示你所尝试的内容... - Yash Parekh
@YashParekh 目前我正在使用 CSS 更改图像颜色。 - user3198563
好的，除此之外你还尝试过什么？请至少使用谷歌并查看一些相关文章。像这样。 - user7637745
4个回答
9
编辑：可以从画布中获取图像数据并更改其像素。您还可以搜索绘制线条、圆形等算法。但是思路仍然相同（获取画布图像，编辑它，然后保存它）。
由于您正在使用AngularJS，因此可以创建一个指令，将颜色作为输入并将该颜色绘制在图像的特定区域上。然后，您可以使用canvas.toDataURL()或canvas2image()方法将画布解析为所需格式的图像。
请查看MDN文档以了解此方法，链接如下：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
我编写了一个小代码片段，只是为了给您提供一个想法。我认为选色器功能是您可以轻松实现并提供给画布指令的一步。希望这可以帮助到您！
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" />- Tiago Conceiçao
9
1嗨，我想改变一张图片的颜色，不想绘制。 - user3198563
想法仍然是一样的。我已经对代码进行了一些更改，以改变图像颜色。希望这有所帮助！ - Tiago Conceiçao
谢谢您的回复... 您能否让第一个用户选择一种颜色，然后他可以选择图像的任何区域，并将所选颜色放置在那里。区域指的是家庭内部图像。 - user3198563
你提供了两个链接，但对我来说都无法使用。请检查一下这个链接。 - user3198563
请查看此网址：https://www.sherwin-williams.com/visualizer#/active - user3198563
显示剩余4条评论
4
演示：
完整页面：https://angularjs-rj88cu.stackblitz.io/
代码：https://stackblitz.com/edit/angularjs-rj88cu
说明：
编辑器是一个 svg，包含背景图像作为 <image> 和区域作为 <path>，均从 editor.imageUrl 和 editor.areas 创建。
下载时，
- 背景图像在画布上绘制
- SVG（不包含
<image>）转换为数据URL，然后在画布上绘制 - 画布转换为数据URL以便下载
为什么一开始没有使用canvas 代替 svg？
因为在canvas中实现鼠标交互很难，而在内联svg中则更容易，因为它们像DOM元素一样工作（悬停伪类、单击事件等）
此外，我假设您需要angularjs，因为您已经标记了它（即使您没有在问题中提到）
还有许多不良做法，如editor不是组件和样式input [type = color]的阴影DOM（您可以使用一些颜色选择器插件代替）
PS：如果需要更改，请告诉我
- Devansh J
6
嗨，谢谢你的回复。你能否在这里描述完整的代码？如果您查看sherwin-williams.com/visualizer#/active此网址，则会非常有帮助。需要类似这样的东西。 - user3198563
- 代码相当自解释，如果您有不理解的部分可以问我。
- 我已经按照第一个链接制作了类似的内容，如果您需要其他额外的东西，请具体说明，我会帮助您解决。
- 您认为我的答案与其他答案相比目前是最好的吗？
与其他答案相比，您的回答很好。首先，我必须从颜色选择器中选择颜色，在第二步中，我必须选择图片的任何区域。然后，所选区域将自动填充所选颜色。 - user3198563
并且您能使用完整的墙壁图像吗？ - user3198563
我很快会更新颜色变化机制...你所说的“完整的墙壁图像”是什么意思？ - Devansh J
0
这个例子中的功能是自定义产品，它是通过AngularJS实现的。
如果你想做类似的事情，可以结合几个jQuery插件和HTML5特性。
你需要以下东西：
- 一些jQuery颜色选择器 - 用于选择颜色
- HTML5画布 - 用于显示边框并填充图像区域的颜色
- canvas2image - 用于保存图像
如果你想使用一些现成的东西，只需寻找一些jquery colorize image插件即可。
- zen
2
一个HTML颜色选择器就足够了。您只需使用
<input type="color">并使用input.value来获取十六进制代码。 - mathmaniac88@awesomeguy 你好，谢谢你的回复。我已经做了这件事情，但还不够。 - user3198563
-1
只需将此函数复制并粘贴到自定义助手文件或类中即可。 您只需要设置适当的图像分辨率参数即可获得结果。
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;
}
- Viral Jadav
1
2你的回答应该包含解释，而不仅是代码。 - Peter Wilson
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接