將保存的圖像數據重繪爲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運行它（這將與:，%2F有/取代%3A等把它放回一個語法正確的數據-URL），然後將結果字符串分配給一個新的Image（）元素。然後，您應該可以將此圖像繪製到畫布上。