Tài liệu Lập trình iphone chuyên nghiệp part 11 pdf
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (482.41 KB, 9 trang )
Chapter 6: Advanced Programming Topics: Canvas and Video
131
Drawing an Image
In addition to lines and other shapes, you can also draw an image onto your canvas by using the
drawImage()
method. The image can reference either an external image or another canvas element on
the page. There are actually three ways in which you can call this method. The first variant simply draws
an image at the specified coordinates using the size of the image:
context.drawImage(image, x, y)
The second method enables you to specify the dimensions of the image with the
w
and
h
arguments:
context.drawImage(image, x, y, width, height)
To do a basic image draw, define the
Image
object and assign an
src
. Next, you want to draw the image,
but only after you are certain the image is fully loaded. Therefore, the
drawImage()
method is placed
inside of the image’s
onload
handler:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“ /><html xmlns=” /><head>
<title>Draw Image</title>
<meta name=”viewport” content=”width=320; initial-scale=1.0; maximum-scale=1.0;
user-scalable=0;”>
<script type=”application/x-javascript”>
function drawImg(){
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);
var img = new Image();
img.src = ‘images/beach.jpg’;
img.onload = function() {
context.drawImage( img, 0, 0 );
}
}
</script>
</head>
<body onload=”drawImg()”>
<canvas id=”myCanvas” width=”300” height=”300” style=”position:absolute; left:0px;
top:0px; z-index:1”/>
</body>
</html>
Figure 6-4 shows the image displayed inside of the canvas. Keep in mind that this is not an HTML
img
element, but the external image file drawn onto the context of the canvas.
c06.indd 131c06.indd 131 12/7/07 2:48:23 PM12/7/07 2:48:23 PM
Chapter 6: Advanced Programming Topics: Canvas and Video
132
Figure 6-4: Drawing an image onto the canvas
Additionally, there is a final
drawImage()
option that is slightly more complex:
context.drawImage(image, sourcex, sourcey, sourceWidth, sourceHeight, destx, desty,
destWidth, destHeight)
In this variant, the method draws a subsection of the image specified by the source rectangle (
sourcex,
sourcey, sourceWidth, sourceHeight
) onto a destination rectangle specified by the final arguments
(
destx, desty, destWidth, destHeight
). For example, suppose you just wanted to display the
rock thrower in Figure 6-4 rather than the entire picture. Using this expanded syntax of
drawImage()
,
you want to extract a 79 × 131px rectangle from the original picture starting at the coordinate
(151, 63). You then paint the same sized rectangle at coordinate (10, 10) on the canvas. Here is the
updated code:
function drawImg(){
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);
var img = new Image();
c06.indd 132c06.indd 132 12/7/07 2:48:23 PM12/7/07 2:48:23 PM
Chapter 6: Advanced Programming Topics: Canvas and Video
133
img.src = ‘images/beach.jpg’;
img.onload = function() {
context.drawImage( img, 151, 63, 79, 131, 10, 10, 79, 131 );
}
}
Figure 6-5 shows the result.
Figure 6-5: Painting a portion of an image
You can also use a data: URI encoded image (see Chapter 10 for more details on data: URI encoding) to
eliminate the need for an external image file altogether for canvas painting. For example, start with an
online image encoder, such as the one available at
www.scalora.org/projects/uriencoder
. Using
this tool, you encode the image, as shown in Figure 6-6 .
c06.indd 133c06.indd 133 12/7/07 2:48:23 PM12/7/07 2:48:23 PM
Chapter 6: Advanced Programming Topics: Canvas and Video
134
Figure 6-6: Encoding an image
The outputted encoded string can then be integrated into the script code as the image object’s source
(much of the encoded text for this example has been removed for space reasons):
function drawImg(){
var img_src = ‘data:image/jpeg;base64,’ +
‘/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAMAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQA’ +
‘CQYGBgcGCQcHCQ0IBwgNDwsJCQsPEQ4ODw4OERENDg4ODg0RERQUFhQUERoaHBwaGiYmJiYmKysrKysr’ +
‘KysrKwEJCAgJCgkMCgoMDwwODA8TDg4ODhMVDg4PDg4VGhMRERERExoXGhYWFhoXHR0aGh0dJCQjJCQr’ +
‘KysrKysrKysr/8AAEQgA4AEsAwEiAAIRAQMRAf/EAJ8AAAEFAQEBAAAAAAAAAAAAAAIBAwQFBgAHCAEA’ +
‘AwEBAQAAAAAAAAAAAAAAAAECAwQFEAABAwIEAwUFBQcEAQUAAAABAAIDEQQhMRIFQVETYXGBIgaRoTIj’ +
‘FLFCUnIzwdFiQyQ0B+GCkhWy0lODNRcRAAICAQMCBAUDBAMAAAAAAAABEQIhMRIDQVFhcYEikaGxEwTB’ +
‘MkLw4VIj0WKC/9oADAMBAAIRAxEAPwDyO2t5TdRAvJbqHFaWRkETzCMzia8VSMEocxw+HVg5WgIke0vq’ +
‘ZKLmtk6Ke0tYmgRNAypglK6MUiaOQXEKCgSkSlImIRWcA+U3uVaFaQj5be5AMKi6iVcgQKSiJIgBKLkq’ +
‘5ACLkq5ACLkq5ACJEq5ACJKJVyABXFKkQAiQhKUiAEKSiIpKIAAhCQjSEIAAoSEZQlAgaLqJaJQEDGbg’ +
‘VhcOYTO0A9N/IHBPXf6Du5DtbKQuPBxr7kpyOMD9x+i/8pWQ/m+P7VsLr+3k/KVj/wCZ4p9GLsT/APp9’ +
‘OmIIzR8p0jsHErPNY1jQxowbgpW5TOudxkfm2LyN7zi5R8u5IlvIJAPYhPvRHNDkfsTEXnpO1tXXcu4X’ +
‘rOpY7TC67ljOT3g6YYj+Z5CsLL1B6lvPUcTTdyPmmma18IPyg2vnb08tLW1Xendsu7v08+K2idI7cdwg’ +
‘hl0jAQwMMz9R4CrhmrqT07centnvNyaz6neJ2O1Ob8NvHJ+oWfiIriV2cfHfZV1lJe+zX0+BwcvLx77q’ +
‘0Ws/9dE/r4Z1M5u8zX7zaQwnRbwuj6IpgOrKZtQH+9Qt7AG87g0ClLmYAf8AyOVptdp1vU9iJcI7SOG4’ +
‘m1cGQRNld/4qpguDcbg64lo8zPkmdq/FR0gPtWPIpTnG6+PRf3N+PDUZ28cv/wBP+wF8a3cnGhDa9rQG’ +
‘n7FHfknnwyCBk7h5JXODXE4ktpqw8V13Z3VqY23MToTK3qMDsKtOFfaFg02248fidCaSSnw+AwE5FHJK’ +
‘8MYKuOPIADMk8AOKft7a7EzIxZOnlkAfHG5j6uacjpbQlpVlJuh28fTRWVtb3rD/AFB6OsUFCI/nl3eV’ +
‘VeNRNnCXgTbkcxVbm/H5kaBn09jNcwQNuomPZFLdPJDWudiGRsqCa0zPsUKW7nlFCQxnFjAGtFewLZv9’ +
‘Y3EOxWt4yxtRNPM+Jw0DSTG0fM0tpj5lRyerdzeySLo2jYpfijFtHT3hbcleNKqXI9JhV7mPFfls7N8S’ +
‘w4l27YfQoySSTmTxS0XONXF1AKmtAKDwCTCq5TqDM0jm6SQRliATQDTnRABRKEqG2wwhF3euK5AAkJT7’ +
‘lyRACJOK4lCD5jjkgQYxNEkhp5R4pNWkVGaCpOJzKcBIuCRKkOaBirqmlOGdF1SuwSGenAp+U/IPco4K’ +
‘duHhls9xya0krZHP0Kbc7k9Nlow4yCslPw8vFdZQgDLioUTnTSumdm817hwVrbUHgsnlnVVbak6BoACl’ +
c06.indd 134c06.indd 134 12/7/07 2:48:23 PM12/7/07 2:48:23 PM
Chapter 6: Advanced Programming Topics: Canvas and Video
135
‘tywUWM44J8O9ipCZz60VLvc/Tt3mvBWssoaM1nN3c65kZA3OV7WD/caIYkZ6/wBpvdvbFJcN8l03qxyD’ +
‘I6vNpPaFDIBHby5r1q9261vLF1jcN1RaQ0c2loo1ze0LzDddtn2y8fazCtMWP4PacnBJCsoK84Yc8ihJ’ +
‘4HNE7t45psk6gDmEyGeibFul7snoqO7tdIDhcyOLhUdR0sUMOHZ5lVbDvO4Xd/fyXtw+461lOJNZqMhS’ +
‘jchSvBO31yGf4422AHGa5fXuY6R32kLP7XeiyuxM8F0T2vilAz0SN0mnaM12X5HW3Cpaqq1b7ZOKnErU’ +
‘57bU7O9kn1wzf7fBt9pDPudwDNdbna6YoWsLi2GFjWSup/E6lexQrR8M/pq93G7gbd3AdNBFduYGOdEG’ +
‘lzHUAwAJIw7lQWPq7dba4MshbdQuPmhkGAYRpc2NwoWVbhhgrrbmnfrXc4LS5kc6b6ZvSdGyJsMQkNWM’ +
‘axxaaCuQFfFaU5aXxTWLe3u9ZMr8N+NbrvE19yelU4jwKpkcMVtbXWirLG0bcVPGaSWRsbSPzmvc1X+3’ +
‘emYtw2fZru9A0NdNeX9w8+YxF3Uax1eD8yqrcd22yz3C92qe1N3tzGQWvy39N4NsDVzTjm5xVZuXqndL’ +
‘xs9tFK6322UgMtGkUaxrQxrNVK0o3FZ7+Ljb3e6Ft2r/ACX6YNdnNyJbfZL3bn/jZaefuZ6BZ+p9svLG’ +
‘43Nhi+rtnTR2keHUERLWMcWA6tJzPYsp61sWTGHeLZ8cwlAivei7W1k1ARjn5gciskCpdhul/t7nus5j’ +
‘D1BpkAALXDhVrgRUcCov+WuSuy9YT6rv3gvj/D+1ffx2yuj0jtJO3d4isLHbqaZbQPM7eIllDZHA9orp’ +
‘8FUpQ/W8ulJLnnU5+bqnEnE41SEAU0mtQCcKUPJc17bnPTReSwdVK7axq8tvxeWcVyTilUFnLly5AHJC’ +
‘lJQlAjkhPtSoCUwEJQB2LkvFNu8rimhMPVq8EtUDCKdiJApCqhOaXguSKOCVCi4I6h0P/9k=’;
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);
var img = new Image();
img.src = img_src;
img.onload = function() {
context.drawImage( img, 10, 10 );
}
}
Figure 6-7 shows the rendered image.
Figure 6-7: Encoded image
c06.indd 135c06.indd 135 12/7/07 2:48:24 PM12/7/07 2:48:24 PM
