change particular area of an image and fill color in that area

前端未结

关注

 4  1188

星月不相逢

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

相关标签:

4条回答

陌清茗

2020-12-30 11:04

Edit: 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.org/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.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" />

0 讨论(0)

一向

2020-12-30 11:11
Demo:

Full page: https://angularjs-rj88cu.stackblitz.io/

Code: https://stackblitz.com/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,
1. Background image is drawn on a canvas
2. SVG (without <image>) is converted to dataUrl and then drawn on canvas
3. 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 component and styling input[type=color]'s Shadow DOM (you can use some colorpicker plugin instead)

PS: Tell me if something needs to be changed
0 讨论(0)
发布评论:

提交评论
- 加载中...
野性不改

2020-12-30 11:24
The functional in the example - custom product, and it's implemented through AngularJS.

If you want to do something like this, you may combine 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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

余生分开走

2020-12-30 11:26

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;
    }

0 讨论(0)

change particular area of an image and fill color in that area

Demo:

Explanation: