将保存的图像数据重绘为HTML 5画布

Question

我正在学习HTML5。我想在画布中创建/绘制一些形状并将其保存在MySQL数据库中并在画布本身中恢复它。

我关注this tutorial

并将数据保存在数据库中。我在我的数据库专栏

中得到了这个

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

在我的一个页面中，我只需要在画布中渲染已保存的图像...... 有人请建议吗？

Answer 1

图像的src属性可以是data-url - base64编码的二进制图像数据。函数canvas.toDataURL();将画布的内容转换为这样的数据URL。您发布的教程中的代码然后通过encodeURIComponent函数运行它以使其成为ajax友好格式。

稍后从数据库中检索该字符串时，需要通过decodeURIComponent运行它（这将%3A替换为:，%2F替换为/等等on将其转换回语法正确的data-url），然后将结果字符串分配给新的Image（）元素。然后，您应该能够将此图像绘制到画布上。