Django 实现将图片转为Base64,然后使用json传输

最近使用Django来进行图像的传输,由于要求需要使用Json格式进行请求,所以我们尝试了二进制编码放在json里,发现bytes格式不能打入json,于是转为了base64

将图片转为json

图片转为json有2中方法,一个是二进制后再转,一个是转为矩阵以后再转。

import base64
import cv2

#通过opencv转base64
img_im= cv2.imread("D://32.png")
aa=base64.b64encode(cv2.imencode('.jpg',img_im)[1]).decode()
print(len(aa)) #17292

#通过bytes再转base64
bb=base64.b64encode(open("D://32.png", 'rb').read())
print(len(bb)) #43848

最后采用了Opencv的方式,主要发现opencv的base64编码比第二种短一半,所以用了第一种。

客户端请求发送数据格式

客户端请求服务器的base64,目前我这里发现2中,通过Postman测试。

第一种 ‘form/data':

#客户端:
image1= cv2.imread("D://32.png")
aa=base64.b64encode(cv2.imencode('.jpg',image1)[1]).decode()
r = requests.post(url, data={"image": image1})
print(r.content.decode("utf-8"))

#服务端:
def image_base64(request):
 result = request.POST.get("image")
 img_byte = base64.b64decode(result)
 img_np_arr = np.fromstring(img_byte, np.uint8)
 image = cv2.imdecode(img_np_arr, cv2.IMREAD_COLOR)
 #image 已经转为矩阵了

第二种 ‘application/json':

#客户端:
image1= cv2.imread("D://32.png")
aa=base64.b64encode(cv2.imencode('.jpg',image1)[1]).decode()
r = requests.post(url, json={"image": image1})
print(r.content.decode("utf-8"))

#服务端:
def local_ocr_base64(request):
  # result = request.POST.get("image")
  data = request.body
  data_json=simplejson.loads(data) #data是str格式的,需要转为json
  result=data_json["image"]
  img_byte = base64.b64decode(result)
  img_np_arr = np.fromstring(img_byte, np.uint8)
  image = cv2.imdecode(img_np_arr, cv2.IMREAD_COLOR)

补充知识:Django将多个图片保存成一个URL串返回给前端

说明

Django有ImageField字段,是封装好的,使用很方便,但是一个ImageField字段只能保存一张图片的URL,我现在是想将多张图片保存在一个字段里,然后URL和URL之间用一个自定义的分隔符连接起来,这样不用为了图片再设计一个字表。

自定义上传图片

设置settings.py文件,添加如下语句

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
IMAGE_ROOT = os.path.join(MEDIA_ROOT, 'images/')
WEB_HOST_MEDIA_URL = os.path.join('http://127.0.0.1:8000', MEDIA_URL[1:], 'images/')

MEDIA_ROOT代表的是用户上传后的文件一般保存的地方,一般在放在项目目录下,例如BASE_DIR就是取得项目绝对地址。而MEDIA_URL是指URL访问时的URL。例如,

BASE_DIR: /Users/incisor/VSCodeProjects/python/Notes

那么

MEDIA_ROOT:/Users/incisor/VSCodeProjects/python/Notes/media

假设media目录下有一张图片2019.jpg,那么

MEDIA_URL: http://127.0.0.1:8000/media/

然后再通过http://127.0.0.1:8000/media/2019.jpg这个URL是可以直接访问这个图片的。

IMAGE_ROOT是我自定义的一个字段,因为我想以后可能会上传视频,或者其他一些文件,想区分开,所以我在media目录下再建了一个目录images,那么

IMAGE_ROOT: /Users/incisor/VSCodeProjects/python/Notes/media/images

WEB_HOST_MEDIA_URL是拼接URL时使用,因为我接下来要自己拼接多个图的URL,MEDIA_URL[1:]的原因时如果不去掉第一个/,那WEB_HOST_MEDIA_URL会是/media/images/,这显然不是我们想要的,所以需要把第一个/去掉。

views.py文件

前端传过来不定数量的图片,可能0张,最多9张,每个图片都做base64编码再传过来,POST请求里有个参数imgs,是一个数组,保存base64编码。

base64编码如下图所示,这只是一部分:

前面的data:image/png;base64, 除了后缀会不同,其他的是固定的,所以我会先从这里取得后缀png,再做编码转换。

import base64
import os
import re
from datetime import date, datetime
from rest_framework import status
from rest_framework.decorators import api_view
from rest_framework.response import Response

from Notes.settings import IMAGE_ROOT, WEB_HOST_MEDIA_URL

@api_view(['POST',])
def images(request):
  urls = ''
  dir_name = date.today().__str__().replace('-', '_', 2) # 2019_06_21
  dirs = os.path.join(IMAGE_ROOT, dir_name) # 将日期作为目录名
  if not os.path.isdir(dirs):
    os.makedirs(dirs) # 判断目录是否存在,不存在则创建
  for img in request.data['imgs']:
    strs = img.split(',')
    suffix = re.findall(r'/(\w+?);', strs[0])[0] # 取得文件后缀
    # 拼接服务器上的文件名
    # datetime.now()取得当前时间,精确到了微秒,一般来说是唯一的了,因为目录是日期,所以文件名就去掉日期,最后会是一串数字
    img_name = re.sub(r':|\.', '', datetime.now().__str__().split(' ')[1]) + '.' + suffix
    img_path = os.path.join(dirs, img_name)
    with open(img_path, 'wb') as out:
      out.write(base64.b64decode(strs[1])) # base64解码,再写入文件
      out.flush()
      urls += os.path.join(WEB_HOST_MEDIA_URL, dir_name, img_name) + '[/--sp--/]' # 拼接URL,URL与URL之间用[/--sp--/]隔开
  result = {}
  result['status'] = status.HTTP_200_OK
  result['message'] = '图片上传成功'
  result['urls'] = urls[:len(urls) - len('[/--sp--/]')] # 去掉末尾的[/--sp--/]
  return Response(data=result)

3、urls.py文件

from django.contrib import admin
from django.urls import path
from django.conf.urls.static import static # 需要添加这句,包含静态资源之类的
from note import views
from . import settings

urlpatterns = [
  path('notes/images/', views.images),
  path('admin/', admin.site.urls),
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) # 这句不设置的话,不能通过URL直接访问到图片

4、启动服务,python3 manage.py runserver

5、POST请求,然后返回对应的JSON数据

{
  "status": 200,
  "message": "图片上传成功",
  "urls": "http://127.0.0.1:8000/media/images/2019_06_21/073249204253.png[/--sp--/]http://127.0.0.1:8000/media/images/2019_06_21/073249854323.png"
}

这样在数据库方面,就可以直接用一个varchar类型来存储多张图了,前端收到URL串,再按照定好的分隔符[/–sp–/]切开后,就可以显示了。

以上这篇Django 实现将图片转为Base64,然后使用json传输就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Python实现base64编码的图片保存到本地功能示例

    本文实例讲述了Python实现base64编码的图片保存到本地功能.分享给大家供大家参考,具体如下: # -*- coding:utf-8 -*- #!python3 import os import base64 sss ="""/9j/4AAQSkZJRgABAQEASABIAAD//gAyUHJvY2Vzc2VkIEJ5IGVCYXkgd2l0aCBJbWFnZU1hZ2ljaywgejEuMS4wLiB8fEIy/9sAQwAGBAUGBQQGBgUGBwcGCAoQ

  • django实现将后台model对象转换成json对象并传递给前端jquery

    1.django的model转json对象. 1.1.单个modle转换,返回json对象: sqlOrder = get_object_or_404(SqlOrder,id=request.GET.get("id")) objJson = serialize('json',[sqlOrder])[1:-1] {"model": "sqlapply.sqlorder", "pk": 2, "fields":

  • python将图片文件转换成base64编码的方法

    本文实例讲述了python将图片文件转换成base64编码的方法.分享给大家供大家参考.具体实现方法如下: import base64 f=open(r'c:\jb51.gif','rb') #二进制方式打开图文件 ls_f=base64.b64encode(f.read()) #读取文件内容,转换为base64编码 f.close() 调用方法如下: 复制代码 代码如下: <img src="R0lGODlh1wBOAPcAAAAAAP///7a4u+jq7bG1ucrN0N7g4tLU

  • Django 返回json数据的实现示例

    在一个网站,大量数据的前后端交互,JSON是最好的传递数据方式了. 在Django中,使用JSON传输数据,有两种方式,一种是使用Python的JSON包,一种是使用Django的JsonResponse 方法一:使用Python的JSON包 from django.shortcuts import HttpResponse import json def testjson(request): data={ 'patient_name': '张三', 'age': '25', 'patient_

  • Django 实现将图片转为Base64,然后使用json传输

    最近使用Django来进行图像的传输,由于要求需要使用Json格式进行请求,所以我们尝试了二进制编码放在json里,发现bytes格式不能打入json,于是转为了base64 将图片转为json 图片转为json有2中方法,一个是二进制后再转,一个是转为矩阵以后再转. import base64 import cv2 #通过opencv转base64 img_im= cv2.imread("D://32.png") aa=base64.b64encode(cv2.imencode('.

  • java将图片转为base64返回给前端

    本文实例为大家分享了java将图片转为base64返回给前端的具体代码,供大家参考,具体内容如下 一.controller端代码 @RequestMapping(value = "/captcha") public void imagecode(HttpServletRequest request, HttpServletResponse response) throws Exception { JSONObject object = new JSONObject(); Captcha

  • webpack图片转为base64的实现示例

    下载url-loader yarn add -D url-loader module: { rules: [ { test: /\.(jpeg|jpg|png|svg|gif)$/, use: { loader: 'url-loader', // 默认使用的是es6模块 options: { // 配置 esModule: false, // 使用common.js规范 outputPath: 'images', // 输出的文件目录 name: 'images/[contenthash:4].

  • 利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解

    将图片转为base64的好处 将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页.编辑器中. 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地方. 将图片转换成base64编码的,在web网上一般用于小图片上,不仅可以减少图片的请求数量(集合到js.css代码中),还可以防止因为一些相对路径等问题导致图片404错误. 引言 假设一个应用场景:由于某些特殊原因从服务端请求到图片路径,要求通过该路径获取对应图片的 base64 dataURL

  • C#实现字符串与图片的Base64编码转换操作示例

    本文实例讲述了C#实现字符串与图片的Base64编码转换操作.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; using System.IO; using System.Drawing

  • 解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题

    vue-quill-editor是个较为轻量级富文本框,相较于ueditor,开发更编辑,更加直观,如果大家伙在需求允许的情况下,还是会比较建议使用vue-quill-editor. vue-quill-editor的使用方法在这边就不多说了,大家网上查下,一抓一大把 但是在使用vue-quill-editor有一个致命的问题,vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大,即使图片不大,只要图片较为多,篇幅较长,富

  • js实现把图片的绝对路径转为base64字符串、blob对象再上传

    主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: 使用canvas.toDataURL()方法将图片的绝对路径转换为base64编码. 具体用法: 在这我们引用淘宝服务器上的一张图片举例: var imgSrc = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.j

  • Vue 设置图片不转为base64的方式

    目录 Vue设置图片不转为base64 vue-cli 3 .vue-cli 4  版本 vue-cli 2 版本 Vue项目base64转img 输入框 效果展示 Vue设置图片不转为base64 在使用 Vue.js 框架开发项目时,vue-cli创建的webpack模板默认会将10K以下的图片和字体文件转为base64. 好处:带来了更快的渲染,不会因为页面切换时还有加载图片的延迟感. 坏处:打包后的CSS,JS文件非常大,特别是图片数量多的情况下,这个问题尤为明显. vue-cli 3

  • js 图片转base64的方式(两种)

    方式一:Blob和FileReader 对象 实现原理: 使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = "blob"] 使用FileReader 对象接收blob <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&quo

  • django中的图片验证码功能

    python的验证码库(captcha) 将验证码做成这样: 是不是和各大网页的图片源地址是一样,话不多说,让我们看代码: 我是用django和python中的captcha库做成 的 创建一个captcha_image.py: from captcha.image import ImageCaptcha import random class Captcha_Get(): def __init__(self, CHAR_SET = ['0', '1', '2', '3', '4', '5',

随机推荐