`
guolang2116
  • 浏览: 72306 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

data:image 用法

阅读更多
data:,<文本数据>
data:text/plain,<文本数据>
data:text/html,<HTML代码>
data:text/html;base64,<base64编码的HTML代码>
data:text/css,<CSS代码>
data:text/css;base64,<base64编码的CSS代码>
data:text/javascript,<Javascript代码>
data:text/javascript;base64,<base64编码的Javascript代码>
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

将图片转化成字节码:http://www.vgot.net/test/image2base64.php?
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
</head>
<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">

</style>
</head>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAmCAIAAAA5lk5KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAALVSURBVFhH7ZVNTxNBGMf5FEYSEqEvBGi7W9oS0NIuBJpgjJ8CohYDjSFeBDEmxOhJD34FTn4MPZB4ENwiL6UJcoKE0Cptd3d2XnxmdijlQplDy8H+80s7nd2d3z4zu9Muipy2wRrSEbcU6RTpiFuKdIp0xC1FOkWkmDkOQ4jaNm9Tl0NsxogSVIxIEVzOKKWYMQc6rxcDrlVj2HWtyo/vG7v5rcKuuWNuKpE3t/a288X89p5pbnz7enR0iJuKiWNj22KUHOzkZ6YmxkcTmYnxh0ZaiYxhzBgTjyenHhmT08nxz58+OnatbgWkU0SKXWSjWhXEhV/mkK83EvSPaeFkJKLEmBZ5oGnJUHgk2B/s7l5beQVLVrcC0ilyscYwJwTWhhwV98GaiseMRCytaUrcj0RSup6JJaaiMb2v793KMiPNxJZVxS48Cri4ux3q603qejIUSumaGsPDIDbCcBN6LBB4v/qa4UsrIJ0ity3mU00xNArmVnxwIDM6mgqFktGwEsZIHBZoOpFIR/Vo0P/h7SrDljf+heUyUmwjCyEb1nj/5+ZAT0/cH0j4fPGBgBJav1+Hp3JoUOu957t7Z+3NMmOobgWkU0SK+UtMCXPR7+LBUm7x+dMni/PZF8/UeJnL5bLZpYWF7Ozs/Nzcl/V1Rpq9x/wldhH/JPjwoFApl6p/ytZZSYmz42OgWirVyuXSycnf09PmYt7Lty2+eXGgej4BrhoYdirCd1/4BBBClUp9fK5oSMNUez4XQdFQOuxlcKUSuFYDK2z40OBt6GxaMfjADQ1vzp1qBRreoZvDK66XK+4A3FdOaMiFmBJZJVQMpRMsq1cC4yvlYkysZq+TN9X8mJhnaMNNeIduDl9m4QMxKOGn9z97eUJDpNiunEOJ/JgnpgR6CEZKgNI5P+fratvwWHnT7o3vIZ0ity1uD9Ip0hG3FOkU6ZLfbU9H3Lb8b2LG/gHJ7rtHDSqxiwAAAABJRU5ErkJggg=="/>
<img src="data:image/png;base64,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"/>
</body>
</html>
</body>
</html>
 
分享到:
评论

相关推荐

    浏览器中的data类型的Url格式 data:image/png,data:image/jpeg!

    5. `data:image/*;base64,base64编码的图像数据`:用于插入图像,其中*代表图像类型如gif、png、jpeg等。图像数据需先用Base64编码。 Base64是一种用于将二进制数据转换为ASCII字符的编码方式,使得这些数据可以在...

    canvas保存为data:image扩展功能的实现

    HTML5的Canvas API提供了`toDataURL()`方法,这个方法可以将Canvas的内容转换为一个data URL,其格式通常是"data:image/png;base64,"后面跟着Base64编码的图像数据。这种数据URL可以直接插入到`&lt;img&gt;`标签的`src`...

    python将图片转base64,实现前端显示

    例如:&lt;img src="data:image/png;base64,这里是base64的编码"/&gt;。 3. 文件大小与编码长度:需要注意的是,Base64编码后的字符串长度大约是原始二进制数据长度的1.33倍。因为Base64编码使用ASCII字符集,所以每三个...

    探究dataURI中使用SVG正确姿势

    在JavaScript中,我们可以使用Blob对象和URL.createObjectURL方法将SVG转换为dataURI,这对于动态生成SVG或在运行时修改SVG非常有用。以下是一个简单的示例: ```javascript let svgString = '...

    datavec-data-image-1.0.0-M1.1-API文档-中文版.zip

    赠送jar包:datavec-data-image-1.0.0-M1.1.jar;...使用方法:解压翻译后的API文档,用浏览器打开“index.html”文件,即可纵览文档内容。 人性化翻译,文档中的代码和结构保持不变,注释和说明精准翻译,请放心使用。

    datavec-data-image-1.0.0-M1.1-API文档-中英对照版.zip

    使用方法:解压翻译后的API文档,用浏览器打开“index.html”文件,即可纵览文档内容。 人性化翻译,文档中的代码和结构保持不变,注释和说明精准翻译,请放心使用。 双语对照,边学技术、边学英语。

    加载图像并将跟踪的轮廓作为imagesvgxmlURL编码数据导出

    2. 轮廓检测:要跟踪图像的轮廓,我们需要使用图像处理库,例如`potrace`或`getImageData`与`putImageData`方法。首先,将图像转换为灰度,然后应用阈值算法以区分前景和背景。接着,使用边缘检测算法(如Canny边缘...

    用ASP.NET实现对Image数据的存取

    string SQL = "SELECT img_title, img_data, img_type FROM imagetable WHERE img_id=@img_id"; SqlCommand cmd = new SqlCommand(SQL, objConn); // 创建并添加参数 SqlParameter param = new SqlParameter("@img_...

    SaveImage_c#mysql数据库上传图片_more11h_MYSQL_savelmage_SAVe:IMAGe_

    string sql = "INSERT INTO images (image_data) VALUES (@imageData)"; MySqlCommand command = new MySqlCommand(sql, connection); command.Parameters.AddWithValue("@imageData", imageData); command....

    apicloud头像裁切模块

    端调用方法: xlCrop({params},callback(ret,err)) params: from:”gallery”||”camera”; savePath:默认为cach/... saveName:支持三种格式保存(.jpg,.png,.jpeg) backBase64:bool类型 callback(ret,err): ret:...

    react-image-data-capture

    import ImageCapture from 'react-data-image-capture' ; function MyImageCaptureComponent ( ) { const [ imgSrc , setImgSrc ] = useState ( null ) ; const [ imgFile , setImgFile ] = useState ( null ) ; ...

    react-native-image-picker 的使用方法demo

    React Native 是一个强大的框架,它允许开发者使用JavaScript和React语法构建原生移动应用程序。`react-native-image-picker...通过深入理解这个库的使用方法,你可以为你的应用添加丰富的媒体交互功能,提升用户体验。

    ImagePreview

    通过`FileReader`的`readAsDataURL()`方法,可以将图片文件读取为Data URL,然后插入到`&lt;img&gt;`标签的`src`属性中,实现图片预览。 3. **Input类型="file"** 在HTML中,`&lt;input type="file"&gt;`元素用于让用户选择...

    java如何将图片类型的数据存入mysql 数据库

    这种方法通常更高效且易于扩展。 通过以上步骤,你可以将图片数据存储到MySQL数据库中,并根据需要进行查询和展示。这个过程涵盖了文件I/O、数据库连接、二进制数据处理以及SQL操作等多个Java和数据库相关的知识点...

    webp格式一键转小图片,拖入即转成功,保留原文件名称,扩展名可选(jpg,png),路径可选(默认原路径)非常方便,一次一个

    使用方法超简单,把您的webp文件直接拖入到LOGO的位置,松开即转。 文件大小:204kb 纯绿色软件。 C#语言开发,有时间加入图片转webp格式,和网络地址直接转换等功能,目前够用了。 更多小工具关注我!谢谢

    自动将byte []绑定到asp:Image

    这通常通过`MemoryStream`完成,将字节数组传递给`MemoryStream`的构造函数,然后使用`Image.FromStream`方法创建`Image`实例。 2. 数据转换: 字节数据通常来自数据库或文件系统。例如,你可以从SQL Server的...

    Data URI浅析

    例如,`data:image/png`表示该Data URI包含PNG格式的图像数据。 ##### 可选参数 可选参数用于进一步定义Data URI的行为或特性。主要包括以下两种: - **字符集**:指定Data URI中的字符编码。默认情况下,Data URI...

    php base64字符串图片jpeg文本文件转换为jpeg图片

    // 去掉数据前缀"data:image/jpeg;base64,",只保留Base64编码部分 $base64_string = strpos($base64_string, ',') === false ? $base64_string : substr($base64_string, strpos($base64_string, ',') + 1); //...

    read_image_data

    本文将详细讲解“read_image_data”程序,它是一个基于Visual C++ 6.0(简称VC6.0)和OpenCV库的应用,用于读取并显示图像的像素数据。 首先,让我们了解一下OpenCV。OpenCV(开源计算机视觉库)是一个强大的跨平台...

Global site tag (gtag.js) - Google Analytics