I am studying HTML5. I want to create / draw some shapes in canvas and save it in MySQL database and restore it in the canvas itself.
I followed this tutorial
And saved the data in database. I got this in my database column
data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiAAAEAUlEQVR4nO3dv48VVRgG4DcRtjEWJBQbOhortYQ%2FASOtyWpCBQkWFtQm1jTGnlBQEV2NCTWVfwCVNiRsZSwwuFRsRAJ7sbjBrLkz98cyO9%2Bc%2BDzJtJv3NPvmzHfO3AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOL7tJLMkr3ue2ZHneZL7NTEBmJLt9BfHps%2BbkjlM8jTJlRHXAcCIhiyPTUtmluQgyb0TXyUAg%2Bp7ZTXreMYumTc5bp7Y6gE4lr5S2N7gb9zPfB4yRtE8Pu5CARhW1z%2F7TcpjXVcyn4UcZpiSmSU5cwI5AdjA0Z3DSZTHJu5lPg8ZcjczS7I35iIAmIYzGfa12KskO6OuAIByjzP8gH6W5GWSJ0lujbcUACrcTPcpsZM6OTZL8mCUlQEwKTuZD%2FCH2rk8S3Ju1BUAMAl7GXZ3cmPc%2BABM0a3M5yEvs%2FlrsKMzlf3M78hcGDc%2BAFNzI8OeBpvFN8IA%2FnfOZT4HUSQAvJUHGeZ2vSIB4F8XMp%2BF7Ge9uYoiAWCpq1EkALyFdYrkWlk6ACZvVZG8TrJblg6AyVunSH4rSwfA5H2Z1UXyd5KzVQEBmLazSV5k9RHgO1UBAZi%2B37P6PslhkttVAQGYtt2sdzlRmQDQ6VrWvwE%2FS%2FJ%2BTUwApux21vvNk2dVAQGYvnXK5GFZOgCacCfLX3PdrYsGQAu%2ByPIdydW6aAC04G6WD9o%2FqosGQAsepr9IHhXmAqARy35Z8XphLgAa8EH6B%2B0HhbkAaMSP6d%2BNfF%2BYC4BGHKR%2FyP5eYS4AGnA9%2FbuRrcJcADTiUbp3IkoEgJU%2BjBIB4Ji20n1S693KUAC0oa9EzleGAqANW%2BkerF%2BuDAVAG%2FpK5KvKUAC0Yz%2BLJfJDaSIAmvFrFkvkl9JEADTjpyyWyJ%2BliQBoxtfpvityqjIUAG24nO7h%2BqXKUAC04Xy6S%2BS7ylAAtOF0kldZLJEXSd4pzAVAI3azWCKHSS5WhgKgDZfS%2FfmTbypDAdCGU0meZ7FEnsQXfQFYw7fpnot8XBkKgDZcTPeAfS%2FJ54W5AGjA6SR%2FpPu476eFuQBoxCdJ%2Fsp%2FC2SnNBEAzdjK%2FLjvz0k%2BK84CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADABv4B7KWsU334yWgAAAAASUVORK5CYII%3D
In one of my page I just need to render the saved image in a canvas... Anyone please advice ?
the src attribute of an image can be a data-url - base64-encoded binary image data. The function canvas.toDataURL(); converts the content of the canvas to such a data URL. The code in the tutorial you posted then runs it through the encodeURIComponent function to get it into an ajax-friendly format.
When you retrieve that string from the database later, you need to run it through decodeURIComponent (this will replace %3A with :, %2F with a / and so on to turn it back into a syntactically correct data-url) and then assign the resulting string to a new Image() element. You should then be able to draw this image to a canvas.