HTML5(五) Picture and Text
HTML5(五) Picture and Text

1. image object
Image is for a picture, we have many ways to get a image object.
a. document.images array
b. document.getElementsByTagName or document.getElementById 
c. create a new Image object, and set a picture URL
   var img = new Image();
   img.src = 'my_image.png';
d. data:url
encode all the picture data via BASE64 to /9j/4QDfRXhpZgAASUkqAAgAAAAFABIBAwABAAAAAQAAADEBAgAVAAAASgAAADIBAgAUAAAAXw
and put them all in the html

2. drawing object
drawImage(image,x,y)
(x,y) is the left top point of the picture, it decides the postion

my example of the small picture, test5.html:
<canvas id="canvas1" width="250" height="300" style="background-color:black">
    you are out!
</canvas><br/>
<input type="button" value="show the girl" onclick="Show();" />
<input type="button" value="hide" onclick="Clear();" />

<script type="text/javascript">
    //picture data Base64 encode
    IMG_SRC='data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAA......'//省略40字节
    //small
    IMG_SRC_SMALL='data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAAFABIBAwABAAAAAQAAADEBAgAVAAAASgAAADIBAgAUAAAAXwAAABMCAwABAAAAAQAAAGmHBAABAAAAcwAAAAAAAABBQ0QgU3lzdGVtcyDK/cLrs8nP8QAyMDEwOjEwOjA0IDE1OjM5OjU3AAUAAJAHAAQAAAAwMjIwkJICAAQAAAAyODEAAqAEAAEAAAAXAAAAA6AEAAEAAAAeAAAABaAEAAEAAAC1AAAAAAAAAAIAAQACAAQAAABSOTgAAgAHAAQAAAAwMTAwAAAAAAAAAAD//gAqSW50ZWwoUikgSlBFRyBMaWJyYXJ5LCB2ZXJzaW9uIDEsNSw0LDM2AP/AABEIAB4AFwMBIQACEQEDEQH/2wCEAAMCAgICAQMCAgIDAwMDBAcEBAQEBAkGBgUHCgkLCwoJCgoMDREODAwQDAoKDxQPEBESExMTCw4VFhUSFhESExIBBAUFBgUGDQcHDRsSDxIbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbG//EAIgAAAIDAQAAAAAAAAAAAAAAAAUGBwgJBBAAAQMDAgQBCgcBAAAAAAAAAQIDBAUGEQcSAAghMRMJFRYiQVRhcZGUFBcyUVWB0eEBAQEBAQAAAAAAAAAAAAAAAAYHBQQRAAEEAQAHCAMAAAAAAAAAAAEAAgMRBBITMVFhcYEFISIkMjNB8LHR4f/aAAwDAQACEQMRAD8AtfYlwW1qbYUkTNE4k2lUxDbVClQ58eYanDypKnkltYLbfjoeSUEk5T6w6jgNp7YGoz/MnXo1w2LaVJsJhC0UZMWoOGoNOJWnHiIUpQUhaSpQIxjABA7cc2LK+OYn6Vo5Fy4mqkcaGwbj+vhSTWNPLaZjeNNfpqADtxIl4P8AScDpwH9CrI97oX3H/eErc6au4noEUdhQ34gL4lVCrKh5N/nfmNWRIq9wW1eVCefg0qZODrkaW2vOCdoCkFRO4pCVbVZG5ScKbbEvOu8y/KzqDOra49Oq9Iq8avR/Msh4luGWdjrKXF+uQnIWc9Tk+zGJ7nSPjx3vb6qNc6P5pL5vZNbv6otqlFp8CMtlL0ybtIy2uSp109sqGTn58CPwkH+Eqf0X/vAeHtrOcyy4dUd1pGwJz5/zXa3ymWvcEugh5yLV5C5sx57wHQXUJUhtsfrUnc25lI6AAE9s8C/J8sah2TpTfGqFQsBNctmt0dwiSZhaciNoCwtsJ2HcHAUnuQPDPbPFBvyhdVn6UmkBLzupJV3XpT4lPkLDzfjIebjMpaG9SlbN6s46429vkeE/8wnv2e+3XxP8bBLo7KLFhtaQ6rW9pPq/XKZbWoVjIrMGjvprqmHlbW3HglSMkJPrdCcg4Cvb8TerWpkKwOUG4G7NoEeKmLT10+JF8JLccLWnYjKU9AhO7sAc9uKA0yNiJJSeRzaHAXzWW9VtqsrqjTPnCOXlxkokK2kJXs6dMDoSrrn4444/Q2r+/RvqvjKbjaLQEf0Sv//Z';


    function Show(){
        ctx = document.getElementById("canvas1").getContext("2d");
        img=new Image();
        img.onload=function(){
            ctx.drawImage(img,0,0);
        }
        img.src=IMG_SRC_SMALL;  
    }

    function Clear(){
        ctx = document.getElementById("canvas1").getContext("2d");
        ctx.clearRect(0,0,250,300);
    } 
</script>

3. enlarge and make it small
drawImage(image,x,y,width,height)

my test page is test5-1.html:
<canvas id="canvas2" width="250" height="300" style="background-color:black">
    you are out
</canvas>