1# Drawing Images (ArkTS) 2 3 4A PixelMap is a data structure used to store and represent images in the memory. It is a set of uncompressed pixels. However, images in formats such as JPEG and PNG are compressed. To draw a JPEG or PNG image on the screen, decode the image into a PixelMap. For details, see [Introduction to Image Kit](../media/image/image-overview.md). 5 6 7Currently, drawing (ArkTS) depends on PixelMap, which can be used to read or write image data and obtain image information. For details about the APIs, see [PixelMap](../reference/apis-image-kit/js-apis-image.md#pixelmap7). 8 9 101. Create a **PixelMap** instance. 11 12 There are multiple APIs for creating a pixel map. The following uses createPixelMapSync() as an example. For details about the creation methods and APIs, see [@ohos.multimedia.image (Image Processing)](../reference/apis-image-kit/js-apis-image.md). 13 14 The createPixelMapSync() function takes two parameters. The first parameter is the buffer of the image pixel data, which is used to initialize the pixels of the PixelMap. The second parameter is the attributes of the created pixel, including the transparency, size, thumbnail value, pixel format, and whether the pixel is editable. 15 16 ```ts 17 // Image width and height 18 let width = 600; 19 let height = 400; 20 // Byte length. Each RGBA_8888 pixel occupies 4 bytes. 21 let bytelength = width * height * 4; 22 const color: ArrayBuffer = new ArrayBuffer(bytelength); 23 let bufferArr = new Uint8Array(color); 24 for (let i = 0; i < bufferArr.length; i += 4) { 25 // Traverse and edit each pixel to form a stripe between red, green, and blue. 26 bufferArr[i] = 0x00; 27 bufferArr[i+1] = 0x00; 28 bufferArr[i+2] = 0x00; 29 bufferArr[i+3] = 0xFF; 30 let n = Math.floor(i / 80) % 3; 31 if (n == 0) { 32 bufferArr[i] = 0xFF; 33 } else if (n == 1) { 34 bufferArr[i+1] = 0xFF; 35 } else { 36 bufferArr[i+2] = 0xFF; 37 } 38 } 39 // Set pixel attributes. 40 let opts: image.InitializationOptions = { editable: true, pixelFormat: image.PixelMapFormat.RGBA_8888, size: { height: height, width: width }} 41 // Create a PixelMap instance. 42 let pixelMap : image.PixelMap = image.createPixelMapSync(color, opts); 43 ``` 44 452. (Optional) Edit the pixels in the pixel map. If you do not need to edit pixels, skip this step. 46 47 There are multiple APIs for editing pixels in a pixel map. The following uses writePixelsSync() as an example. For more methods and interfaces, see [PixelMap](../reference/apis-image-kit/js-apis-image.md#pixelmap7). 48 49 ```ts 50 // Set the width and height of the editing area. 51 let inner_width = 400; 52 let inner_height = 200; 53 // Length of the editing area. Each pixel of RGBA_8888 occupies 4 bytes. 54 let inner_bytelength = inner_width * inner_height * 4; 55 const inner_color: ArrayBuffer = new ArrayBuffer(inner_bytelength); 56 let inner_bufferArr = new Uint8Array(inner_color); 57 for (let i = 0; i < inner_bufferArr.length; i += 4) { 58 // Set the pixels of the editing area to black and white stripes. 59 let n = Math.floor(i / 80) % 2; 60 if (n == 0) { 61 inner_bufferArr[i] = 0x00; 62 inner_bufferArr[i+1] = 0x00; 63 inner_bufferArr[i+2] = 0x00; 64 } else { 65 inner_bufferArr[i] = 0xFF; 66 inner_bufferArr[i+1] = 0xFF; 67 inner_bufferArr[i+2] = 0xFF; 68 } 69 inner_bufferArr[i+3] = 0xFF; 70 } 71 // Set the pixel, width, height, and offset of the editing area. 72 const area: image.PositionArea = { 73 pixels: inner_color, 74 offset: 0, 75 stride: inner_width * 4, 76 region: { size: { height: inner_height, width: inner_width }, x: 100, y: 100 } 77 }; 78 // Edit the PixelMap to form black and white stripes in the middle. 79 pixelMap.writePixelsSync(area); 80 ``` 81 823. Draws a pixel map. 83 84 When drawing a pixel map, you need to draw a PixelMap by using the Canva APIs. The following uses drawImage() as an example. For details about more methods and APIs, see [drawing.Canvas](../reference/apis-arkgraphics2d/js-apis-graphics-drawing.md#canvas). 85 86 The drawImage() function takes four parameters. The first one is the pixel map created in the preceding step, the second one is the x-axis coordinate of the upper left corner of the drawn image, the third one is the y-axis coordinate of the upper left corner, and the fourth one is the sampling option object. By default, the original sampling option object is constructed without any parameter. 87 88 ```ts 89 canvas.drawImage(pixelMap, 300, 300); 90 ``` 91 92 The drawing effect is as follows: 93 94  95
