Canvas - Images and Image Data - Episode 4

[@hk20092009able]

I am cleanly understanding. Something I had thought is very difficult, you are my hero

[@flwi]

Nice, you just showed how I could solve my problem. Made my day! Thanks for your great tutorial!

[@TenthFir]

Simple and to the point. Love it ..

[@havefun5519]

Good video, nice voice and speed. Thanks

[@jimbo2849]

Only current working KZbin tutorial! Ty

[@kyunghwankim1269]

Very nice tutorial! Thank you 👍

[@MotiviqueStudio]

Great video. I'm curious if in addition to these effects you can simply draw on top of the image? For instance, if you import the image of a coloring book.

[@SteveGriffith-Prof3ssorSt3v3]

Sure. That would be just another layer on the canvas.

[@IDMarketer]

Hi sir, thank you so much for the tutorial, the datatoUrl (the variable img) it should be saved as array right?

[@SteveGriffith-Prof3ssorSt3v3]

The return value from canvas.toDataURL( ) is a string. The string can be used as a src value for any image element. It's called a data url because it starts with "data:" instead of "http:" or "https:"

[@kukusikibabasikitv]

Thanks a lot! Great lesson 🐱

[@waleedsharif618]

Could you make a tutorial of canvas(reactjs) where is zoom in and zoom out functionality, for example in canvas there is a photo and on that photo there is two buttons one for zoom in and one for zoom out

[@SteveGriffith-Prof3ssorSt3v3]

Please post any tutorial requests in the comments here - kzbin.info/www/bejne/gnTIq5SuZ9qBacU

[@aleki_x]

Heyy Steve! Have a way to make a filter and "remove" only ONE color in the image? Like, I want to put a draw and remove the background. Can I did it using canvas?

[@SteveGriffith-Prof3ssorSt3v3]

You can loop through the Canvas image data and you will have access to the value for each of the Red, Green, and Blue channels. You can set one of those values to zero and then set the data back to the Canvas.

[@aleki_x]

@@SteveGriffith-Prof3ssorSt3v3 do you have any tutorial about it to show me? Or another site/channel. I'll love it! And thank for your answer, love your channel : )

[@SteveGriffith-Prof3ssorSt3v3]

All my Canvas videos are in this playlist - kzbin.info/www/bejne/q5mUhJqgZ6ynbZI

[@biswamohandwari780]

Can you please make a video on the Selection API in Js

[@SteveGriffith-Prof3ssorSt3v3]

Please post any tutorial requests in the comments here - kzbin.info/www/bejne/gnTIq5SuZ9qBacU

[@omkargaidhani287]

Thanks Can you share how to show tiff images in angular as Chrome browser doesn't support,

[@SteveGriffith-Prof3ssorSt3v3]

Browsers do not support tiff images. Only svg, png, jpg, gif, and to a lesser extend webp.

[@youzarsef6184]

Hello Sir, Your Videos are very good and usefull, but i have a request , if you make a video of (How to Take Screenshot of a Div) with pure Javascript no library use), it will be so nice of you, I am waiting for your kind reply. Thanks

[@SteveGriffith-Prof3ssorSt3v3]

Please add any tutorial requests in the comments here - kzbin.info/www/bejne/gnTIq5SuZ9qBacU

[@ironmanlifts]

Thanks, I love your videos very informative. Do you think it's a possible, practical, or a good idea to save canvas in localStorage / chrome storage ? Maybe using json stringify parse. For example an extension that displays certain images depending on xzy criteria ? Assuming the extension is unlimited storage and not many images are going to be stored. I know I can create a folder called images , i was just wondering if it was possible or a good idea to save canvas in storage.

[@SteveGriffith-Prof3ssorSt3v3]

You can extract images as base 64 from the canvas and save them in localstorage but you need to keep in mind a few things. Users can delete the contents of localstorage. Base64 images are much bigger than their binary versions. You are limited, depending on the browser, to about 20MB typically per domain. So, think 2 to 5 images depending on the size

[@ironmanlifts]

Steve Griffith Thanks I appreciate it. Love your videos I watch them and recommend them all the time.

[@eric7758]

Thanks so much is there away i can do blur on certain areas/ parts in the image?

[@SteveGriffith-Prof3ssorSt3v3]

If you can do the math, we have access to the 4 color channels on every pixel. You can loop through the pixels calculating the colour changes and updating the image. Other than that, You can apply a CSS blur filter to the whole canvas element.

[@eric7758]

@@SteveGriffith-Prof3ssorSt3v3 Thanks will try that out

[@SteveGriffith-Prof3ssorSt3v3]

@@eric7758 Here is my video on the CSS filters - kzbin.info/www/bejne/nJ62eYF_qbR1psk

[@stickguy9109]

Can you explain how to know if all images(and other assets) finished loading and then execute a function

[@SteveGriffith-Prof3ssorSt3v3]

Any file that you load into the browser has a built-in load event that you can use to trigger a function. If you have an array of assets to load you can just wait until all of them load by counting each as it loads.

[@stickguy9109]

@@SteveGriffith-Prof3ssorSt3v3 Thanks for your attentionbut I already tried this and it shows ```assets[i].addEventListener``` is not a function. And i have urls to images in the assets array.

[@SteveGriffith-Prof3ssorSt3v3]

@@stickguy9109 The listeners have to be added to the HTML elements, not to URLs. URLs are just strings. Strings can't have listeners.

[@stickguy9109]

@@SteveGriffith-Prof3ssorSt3v3 Thank you I will try asking Stackoverflow

[@SteveGriffith-Prof3ssorSt3v3]

@@stickguy9109 I have a playlist on events that explains how event listeners work, including the load listener.

[@alexdin1565]

can do the same with videos?

[@SteveGriffith-Prof3ssorSt3v3]

Like this? - kzbin.info/www/bejne/lWO2p3Sbpcd2ick

[@pondokkoding5023]

how about picture in picture overlay?

[@SteveGriffith-Prof3ssorSt3v3]

That is a feature of the video element

[@shahanahmed9444]

the image drawn on the canvas is blurry compared to the original photo.. any ideas why?

[@SteveGriffith-Prof3ssorSt3v3]

Different pixel dimensions.

[@supriyashah3863]

I'm trying to draw image of array using angular... I didn't find any way to draw multiple canvas dynamically in angular

[@SteveGriffith-Prof3ssorSt3v3]

I haven't used Angular in years.

[@Snoo29293]

When I try to use getImageData() on a canvas with an image I get a security error, because of CORS, even though I do not use an image from another domain, I have the image downloaded in my file.

[@SteveGriffith-Prof3ssorSt3v3]

The origin of the html file that contains the Canvas must be exactly the same as the image. Protocol, domain, and port all must match.

[@Snoo29293]

@@SteveGriffith-Prof3ssorSt3v3 how can I make them match?

[@SteveGriffith-Prof3ssorSt3v3]

@@Snoo29293 they just have to come from the same origin. Whatever is in the location bar of the browser needs to be the same as the image origin

[@Snoo29293]

@Sam Marsh I used a live server, if you use a local server then you get the error.

[@Snoo29293]

@Sam Marsh also, if you are taking an image from another place such as google drive or Dropbox set image.crossorigin to "anonymous". To get a live server you can simple download live server extension in visual studio code.

[@dazikenhd364]

Hi, How do i draw an image onto the canvas from a folder within my source folder in the most basic way? Ive tried other solutions but they didn't work. Any solutions? This is my code: function drawChessBoard(canvas) { const c = document.getElementById("board"); const ctx = c.getContext("2d"); var piece = new Image(); piece.src = './wrook.png'; ctx.drawImage(piece, 60, 60, 60, 60); }

[@SteveGriffith-Prof3ssorSt3v3]

The video shows the most basic way to load images. When you load an image though you need to wait for the image load event before you can call the drawImage method.

[@dazikenhd364]

@@SteveGriffith-Prof3ssorSt3v3 I was following your code, its fine now. Silly me made a simple error mistake that I didn't spot... :D

[@buzzer79]

hi, by the way you cant update the imgData.data because its read only. so just pass the imgData into the ctx.putImageData(imgData, 0, 0); like this and it will work

[@SteveGriffith-Prof3ssorSt3v3]

yes. putImageData is how you update the data array.

[@nehashubh2702]

Can you help me sir

[@SteveGriffith-Prof3ssorSt3v3]

Maybe if you ask a question.

[@nehashubh2702]

@@SteveGriffith-Prof3ssorSt3v3 sir can you give me code of Facebook frame

[@boristherin4104]

thx, trying to deal with getImageData to scroll any images without adding a twin one for the loop btw, if anyone may want to download that image (with button or auto) : let link = document.createElement('a'); link.href = canvas.toDataURL(); link.download = 'download.jpg'; // or ur own filename link.click(); link.delete();

[@Felipekimst]

I get a cors problem here

[@SteveGriffith-Prof3ssorSt3v3]

CORS applies any time you load something from a different domain. If you load an image from a different domain, without the access-control-allow-origin header from the server then the browser will not let you use the image on a canvas.

[@Felipekimst]

@@SteveGriffith-Prof3ssorSt3v3 it isnt possible to do it on file:// right?

[@SteveGriffith-Prof3ssorSt3v3]

@@Felipekimst no. Fetch will not load from file:///