使用 JavaScript 将图像转换为数据 URI
javascriptobject oriented programmingprogramming
JavaScript 有一个将图像 URL 或本地 PC 图像转换为 base64 字符串的约定。此字符串可以包含各种符号和字母。这里解释了如何制作画布元素、将图像加载到其中以及如何使用 toDataURL() 显示字符串表示。为了获取 base64 字符串表示，我们还将使用文件读取器选项。
在这种情况下，将创建一个画布元素并指定其尺寸。将存储字符串表示的 dataURL。我们将从在线来源添加随机图像并确保对象避免安全问题。'Anonymous' 作为 crossOrigin。最后，我们的回调函数将 dataURL 传递给 toDataURL 函数，以通知窗口相应图像的 base64 字符串已准备好进行预览。
示例
此示例演示如何在 JavaScript 中将图像转换为 Base64 数据 URL −
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Get URL i</title> </head> <body> <img src="https://images.unsplash.com/photo-1606115915090-be18fea23ec7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80" id="myImg"> <script> function toDataURL(src, callback){ var image = new Image(); image.crossOrigin = 'Anonymous'; image.onload = function(){ var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.height = this.naturalHeight; canvas.width = this.naturalWidth; context.drawImage(this, 0, 0); var dataURL = canvas.toDataURL('image/jpeg'); callback(dataURL); }; image.src = src; } toDataURL('https://images.unsplash.com/photo-1606115915090-be18fea23ec7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80', function(dataURL){ alert(dataURL); }) </script> </body> </html>
