1 00:00:00,300 --> 00:00:05,350 So in this video, I will show you how you can draw something on an image using cameras always. 2 00:00:05,880 --> 00:00:12,150 So here in the previous video, we did this application that you can do anything on the canvas. 3 00:00:12,480 --> 00:00:14,960 Now we want to draw something on an image. 4 00:00:14,970 --> 00:00:18,600 So those may be up to you if you want to save it or something like this. 5 00:00:19,230 --> 00:00:25,560 So before that, I want to tell you that using this in an image, it is very easy because we saw how 6 00:00:25,560 --> 00:00:27,430 we can put an image on a canvas. 7 00:00:27,720 --> 00:00:30,820 Then we saw how we can draw something on the canvas. 8 00:00:31,130 --> 00:00:36,870 Now, only what we have to do is to put the image and we do the same program to draw and we'll draw 9 00:00:36,870 --> 00:00:37,740 on the image. 10 00:00:38,430 --> 00:00:40,120 So here is our program. 11 00:00:40,140 --> 00:00:45,780 Now, what we have to do, we import the image, then will resize it so that it will fit the canvas, 12 00:00:45,790 --> 00:00:46,970 as you remember with me. 13 00:00:47,340 --> 00:00:48,900 Then we will run it. 14 00:00:49,050 --> 00:00:54,390 Before that, I have to import yellow because we need it for the opening and fold resizing. 15 00:00:54,780 --> 00:00:57,240 So for me, I ink or 16 00:00:59,660 --> 00:01:04,560 image the image is what. 17 00:01:05,250 --> 00:01:10,010 So this hour, these glasses that we need here will open the image. 18 00:01:10,020 --> 00:01:21,380 So I recorded, for example, damage the image open and here I have the image here at the same as always. 19 00:01:21,990 --> 00:01:26,380 So I will write only the name upload like this. 20 00:01:26,610 --> 00:01:28,030 So this is our image. 21 00:01:28,050 --> 00:01:29,340 Now I will resize it. 22 00:01:29,610 --> 00:01:35,460 So here we have image, then image the two sides. 23 00:01:35,970 --> 00:01:41,670 Then here the first one, as you remember me, are the new with the new height. 24 00:01:42,570 --> 00:01:48,410 Then we have an image that spontaneous like this. 25 00:01:49,200 --> 00:01:51,630 Now we have the new image with the new size. 26 00:01:51,690 --> 00:01:52,450 What do we have to do? 27 00:01:52,470 --> 00:01:56,610 We will convert it into a ticket image so that we can put it in the canvas. 28 00:01:56,880 --> 00:02:06,630 So here we have image, we put it at the same variable equal that here we have the image for the image. 29 00:02:07,140 --> 00:02:09,040 Then you would put the new image. 30 00:02:09,060 --> 00:02:12,480 So this image is ready to be used for the canvas. 31 00:02:12,840 --> 00:02:19,050 Now, once you have to do is only to do canvas that create. 32 00:02:20,700 --> 00:02:31,320 Creates image, this one, then you have to put the X and Y, which is zero zero, then you put the 33 00:02:31,350 --> 00:02:35,220 image, this one an image like this. 34 00:02:36,680 --> 00:02:38,380 Now we'll see how does it look? 35 00:02:39,560 --> 00:02:45,620 Hughes, as you can see, what we have to watch or we have to change the anchor of this image, so it 36 00:02:45,700 --> 00:02:46,430 is very easy. 37 00:02:46,440 --> 00:02:52,450 Also here we have Ancor Kornblau West like this. 38 00:02:53,950 --> 00:02:59,300 So here we can see that the image is on the whole canvas. 39 00:02:59,320 --> 00:03:05,020 Now, if I want to draw something you can use, as you can see, you can do anything on the canvas because 40 00:03:05,260 --> 00:03:10,240 we are using the same program, because this program means that we will draw on the canvas no matter 41 00:03:10,450 --> 00:03:14,450 if the canvas is only one color or an image or anything you want. 42 00:03:14,680 --> 00:03:18,650 So you can do this stuff and using you can draw or something. 43 00:03:19,030 --> 00:03:23,740 What I am using is because there are you can you can need this stuff. 44 00:03:23,740 --> 00:03:30,310 In two cases, maybe you will need to import an image in canvas or you are creating an application. 45 00:03:30,520 --> 00:03:35,860 Then you will have an image and you want to draw something or I don't know, then you want to save this 46 00:03:35,860 --> 00:03:39,940 image with the draw so you can use this stuff and you can save it also. 47 00:03:40,360 --> 00:03:46,870 Or for example, if you have an image and you want to cry or you want to return or anything from the 48 00:03:46,870 --> 00:03:50,300 image, maybe I want to grab only this card, for example. 49 00:03:50,650 --> 00:03:54,250 So what you can do, you can use the same the same program. 50 00:03:54,260 --> 00:04:02,200 But in this case, you you will do you will add a an array or a matrix or something that will store 51 00:04:02,200 --> 00:04:06,460 all the coordinates of this draw, for example. 52 00:04:06,700 --> 00:04:11,810 So if I will draw, I will return it again here now. 53 00:04:12,340 --> 00:04:14,340 So if I if you need only this card. 54 00:04:14,350 --> 00:04:21,020 So if I will draw here for all over the card, I am not a good thing to do. 55 00:04:21,040 --> 00:04:23,770 So I am only showing you. 56 00:04:23,770 --> 00:04:28,080 So if I want to return only that sketch, for example, I want to grab it from the image. 57 00:04:28,420 --> 00:04:35,170 So what you have to do, you can add a an array or a matrix or something or else here. 58 00:04:35,170 --> 00:04:38,950 In this case these two functions are only for this one, for example. 59 00:04:39,220 --> 00:04:47,620 So when after only if they're after each click, you will store the X and Y of that click here means 60 00:04:47,620 --> 00:04:51,640 that you will store all the X's and the wise for the cards. 61 00:04:51,940 --> 00:04:58,480 After that you can use this X and Y to return the objects over here, for example, the card from the 62 00:04:58,480 --> 00:04:58,880 image. 63 00:04:59,230 --> 00:05:03,310 So these are two only two examples that you will have in your mind. 64 00:05:03,490 --> 00:05:04,530 Maybe we need them. 65 00:05:04,850 --> 00:05:09,850 Otherwise you can use this this feature in anything you want. 66 00:05:09,880 --> 00:05:12,210 So I only show you how you can do it. 67 00:05:12,220 --> 00:05:15,130 Then it's up to you where you can use it. 68 00:05:15,550 --> 00:05:17,740 So I see you in the next video about.