{"ID":0,"Name":"Как получить base64 картинки в javascript","Content":"\u003cp\u003eBase64 - довольно полезная в некоторых ситуациях штука, которая обычно используется когда надо представить бинарные данные в текстовом виде для хранение или переноса. Так, например, если вы хотите сделать одиночный html файл с картинками, вполне можно использовать base64 в src картинки. \u003c/p\u003e\r\n\u003cp\u003eВот как, например, эта картинка (inspect element):\u003c/p\u003e\r\n\u003cdiv class=\"cb\"\u003e\u003c/div\u003e \r\n\u003cimg src=\"data:image/png;base64,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\" alt=\"base64 example\"\u003e\r\n\u003cdiv class=\"cb\"\u003e\u003c/div\u003e \r\n\r\n\u003cp\u003eКак получить base64 img картинки в javascript:\u003c/p\u003e\r\n\u003cpre name=\"code\" class=\"javascript\"\u003e\r\nfunction getBase64Image(img) {\r\n    // создаем канвас элемент\r\n    var canvas = document.createElement(\"canvas\");\r\n    canvas.width = img.width;\r\n    canvas.height = img.height;\r\n\r\n    // Копируем изображение на канвас\r\n    var ctx = canvas.getContext(\"2d\");\r\n    ctx.drawImage(img, 0, 0);\r\n\r\n    // Получаем data-URL отформатированную строку\r\n    // Firefox поддерживает PNG и JPEG. \r\n    var dataURL = canvas.toDataURL(\"image/png\");\r\n\r\n    return dataURL.replace(/^data:image\\/(png|jpg);base64,/, \"\");\r\n}\r\n\r\nfunction getBase64ImageById(id){\r\n   return getBase64Image(document.getElementById(id));\r\n}\r\n\u003c/pre\u003e","Tag":"javascript","Url":"/art/61/base64-javascript.aspx","ShortDescription":"","Alias":"","Visible":0,"Title":" Как получить base64 картинки в javascript","Key":"","Description":" "}