There are 11 ways to combine images in HTML5. You just need to set them to context. globalCompositeOperation. I have made a small example here to prove the results of various image combinations.
The HTML code is very simple. There are two controls. One is the drop-down list, which allows users to select the combination method. Once the user makes the selection, the js function draw (id) is executed ), in this way, the canvas of the second control draws a picture based on the combination method selected by the user. The second control is a canvas used to display the drawing content.
1. <! DOCTYPE html>
2. 3. <meta charset = "UTF-8">
4. <title> HTML5 Combine Shape DEMO </title>
5. <script type = "text/javascript" src = "js/drawCombinedShape. js"> </script>
6. 7.
8. <body> </body>
9. 10.
11. <! -- Create a drop-down list to allow users to select a combination of images -->
12. <! -- Once a user makes a choice, the onchange processing function is triggered, so the js function is called to draw a picture on the canvas component. -->
13. <select id = "selectCombineMethod" onchange = "draw ('canvas ')">
14. <option> source-atop </option>
15. <option> source-in </option>
16. <option> source-out </option>
17. <option> source-over </option>
18. <option> destination-atop </option>
19. <option> destination-in </option>
20. <option> destination-out </option>
21. <option> destination-over </option>
22. <option> lighter </option>
23. <option> copy </option>
24. <option> xor </option>
25. </select>
26. <br>
27.
28. <! -- Specify a canvas element for Displaying results -->
29. <canvas id = "canvas" width = "1000" height = "1000"/>
30. <br>
The js function is responsible for responding to the onchange event in the drop-down list and drawing on the canvas. It first draws the original image (distination, which is a blue square here) and then obtains the combination method selected by the user, then draw a new image (source, which is a red circle) based on this method ):
1 ./**
2. * This file is confidential by Charles. Wang
3. * Copyright belongs to Charles. wang
4. * You can make contact with Charles. Wang (charles_wang888@126.com)
5 .*/
6.
7.
8. function draw (id ){
9.
10. // obtain the selected Image Combination options:
11. var selectComponent = document. getElementById ("selectCombineMethod ");
12. // retrieve the index selected by the user
13. var selectedIndex = selectComponent. selectedIndex;
14. // obtain the value selected by the user, that is, the selected image combination policy.
15. var selectedCombinedStrategy = selectComponent. options [selectedIndex]. value;
16.
17. // get the canvas object on the page
18. var canvas = document. getElementById (id );
19. if (canvas = null)
20. return false;
21.
22. var context = canvas. getContext ('2d ');
23. // draw the original image, blue square
24. context. fillStyle = "blue ";
25. context. fillRect (40, 40, 60, 60 );
26.
27. // set the selected Image Combination Method to context.
28. context. globalCompositeOperation = selectedCombinedStrategy;
29.
30. // draw a new image, which is a red circle
31. // at this time, context will decide how to draw the two images based on the combination policy of the image.
32. context. beginPath ();
33. context. fillStyle = "red ";
34. context. arc (40 + 60, 40 + 60, 30, 0, Math. PI * 2, false );
35. context. fill ();
36.
37.
38.
39.
40 .}
The experiment displays different results based on your user selection:
Here, the source is a red circle (new image), and The distination is a blue square (old image)
• Source-atop = new and old images + old ones (! (New and old ))
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
