DataURL入门,图片储存在数据库字段中

DataURL入门

DataURL概述

所谓DataURL是指"data"类型的Url格式，是在RFC2397中提出的，目的是对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入

Data URL入门

完整的DataURL语法：DataURL= data:mediatype;base64,<Base64编码的数据>。

mediatype：表述传递的数据的MIME类型（text/html，image/png，image/jpg）

简单的说，data类型的Url大致有下面几种形式。

Data URL基本原理

Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用 img 标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-

type。

图片在网页中的使用方法通常是下面这种利用标记的形式：

<img src="data:images/myimage.gif ">

这种方式中， img 标记的属性指定了一个远程服务器上的资源。当网页加载到浏览器中时，浏览器会针对每

个外部资源都向服务器发送一次拉取资源请求，占用网络资源。大多数的浏览器都有一个并发请求数不能超过4个的限制。这意味着，如果一个网页里嵌入了过多的外部资源，这些请求会导致整个页面的加载延迟。而使用Data

URL技术，图片数据以base64字符串格式嵌入到了页面中，与HTML成为一体，它的形式如下：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAAA5CAYAAACMNEHAAAAAGXRFWHRTb2Z0d2FyZ QBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU 6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy 0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyL zIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0 dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3h hcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC 8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5ZDAxYjE4NC04MTFlLTE4NDEtYTUwYi0wMzljN

上面的base64字符串中你看不出任何跟图片相关的东西，但下面，我们将传统的 img 写法和现在的Data URL用法左右对比显示，你就能看出它们是完全一样的效果。但实际上它们是不一样的，它们一个是引用了外部资源，一个是使用了Data URL。

优缺点分析

浏览器支持

几乎所有的现代浏览器都支持Data URL格式，包括火狐浏览器，谷歌浏览器，Safari浏览器，opera浏览器。

IE8也支持，但有部分限制，IE9完全支持。

数据容量

Base64编码的数据体积是原数据的体积4/3，也就是DataURL形式的图片会比二进制格式的图片体积大1/3。

使用场景

DataURL形式的数据不会占用HTTP会话，所以再访问外部资源或当图片是在服务器端用程序动态生成时借用

DataURL是一个不错的选择

Data URL实现图片上传

修改用户实体类，用户数据库表添加图片字段

使用基于Data URL的方式实现用户上传，实质是将前端上传的文件以Base64进行编码并且保存到数据库中。用户controller中添加用户上传方法

用户service中添加上传文件处理的方法

在service中需要对文件进行base64编码，并且保存到数据库中

@RequestMapping(value="/user/upload/{id}")
public Result upload(@PathVariable String id,@RequestParam(name = "file") MultipartFile file) throws Exception {
String image = userService.uploadImage(id, file); return new Result(ResultCode.SUCCESS,image);
}

（2）在系统微服务的 中添加上传处理的方法

public String uploadImage(String id, MultipartFile file) throws Exception {
//根据id查询用户
User user = userDao.findById(id).get();
//对上传文件进行Base64编码
String s = Base64.encode(file.getBytes());
//拼接DataURL数据头
String dataUrl = new String("data:image/jpg;base64,"+s);
user.setStaffPhoto(dataUrl);
//保存图片信息userDao.save(user); return dataUrl;
}

DataURL入门,图片储存在数据库字段中相关推荐

[VB.NET]如何向数据库字段中写入文件？
<script type="text/javascript"> </script> <script type="text/javascrip ...
将sql数据库字段中的NULL都替换为空
NULL与空字符串 '' 是相同的????? 在MySQL中,这两者是完全不同的.NULL是指没有值,而"则表示值是存在的,只不过是个空值.(在Oracle中是相同的) 将sql数据库字段中 ...
mysql单价乘以数量_数据库字段中存储的数据数量乘以不同单价的和的算法示例...
数据库字段中存储的数据数量乘以不同单价的和的算法,适用于记账本程序的计件数据记录,和商品记录等场景. 代码示例如下: //模拟数据库结果集 $arr = array( array( "id& ...
怎样把图片存上mysql数据库表中_怎样把图片存入SQL数据库表中？
展开全部一.先来熟悉一下将要使用的对象方法: 用来获取上一个页面传递过来的数据一62616964757a686964616fe58685e5aeb931333431363030般是使用Reques ...
爬取豆瓣电影储存到数据库MONGDB中以及反反爬虫
1.代码如下: doubanmoive.py # -*- coding: utf-8 -*- import scrapy from douban.items import DoubanItemclas ...
Python存取图片至服务器数据库中
前言由于项目需求,需要将识别的人脸图片存储到服务器的数据库中,经过了解得知目前业界存储图片主要有两种方式: 图片存储在磁盘上,即服务器文件系统中,数据库字段中保存的是图片的路径. 图片以二进制形式直 ...
ThinkPHP自动化为已经上传的图片添加「响应式」水印(数据库字段部分)
版权属于: Postbird - There I am , in the world more exciting! 原文地址: http://www.ptbird.cn/thinkphp-image- ...
MySQL数据库字段超长问题
1. 存在的问题在向MySQL数据库表中插入或更新记录时,有时会出现字段超长的问题,包括但不限于以下场景: 处理上游系统发送的交易信息,将多个字段拼成一个JSON或其他格式的字符串:在增加字段,或数 ...
php mssql image,php5连接mssql2005数据库表中的image字段图片显示
语言是php5 数据库是mssql2005 一个表中的字段[nr]存储图片,类型是image类型的现在想实现 1)判断字段内容nr里的内容是图片,还是html页面,还是pdf文件 2)类型判断没有存 ...

DataURL入门,图片储存在数据库字段中

DataURL入门

DataURL入门,图片储存在数据库字段中相关推荐

最新文章

热门文章