When I was hanging out at csdn yesterday, I saw.
Html:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> remove mm clothes </title>
<Style type = "text/css">
Html, body {margin: 0; padding: 0; text-align: center; background-color: black}
Div {color: white ;}
# Canvas {
Border: solid 1px # CCC;
Margin-bottom: 10px;
}
</Style>
<Script src = "draw. js"> </script>
</Head>
<Body>
<P style = "color: yellow"> click it to try the following results. </p>
<Div> <canvas id = "canvas" width = "480" height = "320"> sorry, it's time to change the browser <a href = "http://firefox.com.cn/download/"> click to download firefox </a> </canvas> </div>
</Body>
</Html>
The effect of css code implementation: enables the canvas element to be displayed in the center, and the surrounding area is "turn off the light", highlighting the image.
Draw. js
Var ready, canvas, context;
Var load;
Var BRUSH_SIZE = 18; // BRUSH_SIZE indicates the size of the paint brush and "eraser" represented by the mouse.
Var img = new Image ();
Var cimg = new Image ();
Window. onload = function (){
If (! Document. getElementById ("canvas"). getContext) {// If the browser does not support canvas, return
Return;
}
Canvas = document. getElementById ("canvas"); // obtain the canvas Element.
Context = canvas. getContext ('2d '); // obtain the canvas
Loading ();
Pics = ['images/a1.jpg ', 'images/a2.jpg']; // Image array. PICs [0] indicates the current image, and pics [1] indicates the image after replacement.
Load = 0; // variable indicating the number of times two images are loaded
Cimg. onload = IMG. onload = function (){
If (++ load = 2) {// indicates that the two images are fully loaded.
Initcoverimage ();
}
}
Cimg. onerror = IMG. onerror = function () {// an error occurs during image loading.
Context. clearrect (0, 0, canvas. Width, canvas. Height );
Context. font = '12px sans-serif'; // display the font format
Context. fillstyle = '#00ff00 ';
Context. textalign = 'center ';
Context. filltext ('Load images failure! ', Canvas. width> 1, canvas. Height-50); // The typical right shift operation of canvas> 1, divided by 2
}
// After setting all the above events, set the image's SRC
Cimg. src = pics [0];
IMG. src = pics [1];
}
Function loading () {// set and display
Context. clearRect (0, 0, canvas. width, canvas. height); // clear the canvas window
Context. fillText ('loading... ', canvas. width> 1, canvas. height-50); // if the image acquisition is slow, the Loading...
}
Function initCoverImage () {// draw the current image
Canvas. width = cimg. width; // adjust the size of the canvas to conform to the actual image.
Canvas. height = cimg. height;
Context. drawImage (cimg, 0, 0, canvas. width, canvas. height );
BindEvents (); // bind an event
}
Function bindEvents (){
Canvas. ontouchstart = canvas. onmousedown = function (e) {ready = true ;}; // click it
Canvas. ontouchend = canvas. ontouchcancel = canvas. onmouseup = canvas. onmouseout = (function (e) {ready = false ;}); // The mouse is not pressed
Canvas. ontouchmove = canvas. onmousemove = updateCanvas; // move the cursor
}
Function updateCanvas (e ){
If (! Ready) {// The mouse is not pressed
Return;
}
VaR r = canvas. getboundingclientrect (); // obtain the coordinates of the current canvas Region
VaR vx = E. clientx-R. Left; // horizontal distance
VaR Vy = E. clienty-R. Top; // vertical distance
VaR BS = brush_size;
VaR BSR = Bs/2;
If (VX <BSR | Vy <BSR) {// If the canvas edge is too close, "wipe" is invalid.
Return;
}
Context. rect (VX-BSR, Vy-BSR, BS, BS); // otherwise, you can define the current area to be replaced with the same area of the next image.
Context. drawimage (IMG, VX-BSR, Vy-BSR, BS, BS, VX-BSR, Vy-BSR, BS, BS); // replace
}
The preceding figure uses drawimage to overwrite the image to complete the clothing removal process. You can also use the iplimage image matrix to replace it. The principle is the same.
You can try this on your own.
(Because we cannot figure out those mm images, we can use our photos to demonstrate the effect ^-^)
Images/a1.jpg
Images/a2.jpg
Final effect:
Reprinted Please note: http://www.cnblogs.com/blue-lg/archive/2011/12/30/2307649.html
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
