[英]How to display a blob with JavaScript
I got a script which takes several images from my MySQL database, which are stored as blobs. 我有一个脚本,该脚本从MySQL数据库中获取多个图像,这些图像存储为Blob。 This script is accessed from a JavaScript / Ajax request.
可从JavaScript / Ajax请求访问此脚本。
So for now i display the blob in a div. 所以现在我在div中显示blob。 But how can i convert the blob to an image in JavaScript?
但是,如何在JavaScript中将Blob转换为图像?
First, you could expose the image data as resources on the server-side then instantiate an image node in your client-side with the src
set the appropriate URL. 首先,您可以在服务器端将图像数据公开为资源,然后使用
src
设置适当的URL实例化客户端中的图像节点。
<img src="mydomain/images/my-resource.png" />
The resource mydomain/images/my-resource.png
does not need to be a static resource on the server; 资源
mydomain/images/my-resource.png
不必是服务器上的静态资源。 the URL just needs to return the image data in an HTTP response. URL只需要在HTTP响应中返回图像数据。
Second, if you have the blob in base64 on the client-side already, use a data-url
. 其次,如果您已经在客户端的base64中拥有blob,请使用
data-url
。 Format ( from Wikipedia ): 格式( 来自Wikipedia ):
data:[<MIME-type>][;charset=<encoding>][;base64],<data>
Example ( from Wikpedia ): 示例( 来自Wikpedia ):
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
If you actually have raw binary data on the client-side then the btoa function may be of use when constructing said data-url
. 如果您实际上在客户端具有原始二进制数据,则在构造所述
data-url
时可能会使用btoa函数 。
Finally, you could also use the HTML5 File API, performing an XMLHttpRequest , configured with a responseType of either 'blob'
, or 'arraybuffer'
. 最后,您还可以使用HTML5 File API,执行XMLHttpRequest ,将其配置为responseType为
'blob'
或'arraybuffer'
。 You can then instantiate an in-memory URL for the object, and assign this to the src
of an Image
DOM node. 然后,您可以实例化对象的内存中URL ,并将其分配给
Image
DOM节点的src
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.