由于web开发需要,需要在用户在web界面从本地选择文件(图像),选择完成之后,在html5界面中显示(预览),下面介绍如何用JavaScript来实现

1、前端html代码

使用bootstrap前端框架

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>图片预览测试</title>
  </head>
  <body>

    <div class="container mt-3">
      <div class="container">
        <form>
          <div class="form-group">
            <label for="exampleFormControlFile1" style="font-size: 30px;">请选择图片</label>
            <div class="row">
                <div class="col-6">
                    <!-- 用户完成选择文件,就会触发js中fileSelected()的函数代码,从而实现图像预览 -->
                  <input type="file"  id="exampleFormControlFile" name="file" style="width: 200px;" onchange="fileSelected()">
                  <button type="button" class="btn btn-primary" id="button-submit">确认</button>
                </div>
                <div class="col-6">          
                </div>
            </div>
          </div>
        </form>
      </div>
      <div class="container">
        <div class="row">
            <!-- 需要预览的图片显示区 -->
            <div class="col-8"><img id="preview" width="600" ></div>
            <div class="col-4">
            </div>
        </div>
      </div>
    </div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

2、JS代码

这个js代码放在body中

<script>
      function fileSelected(){
          // 这个地方通过id号获取输入文件对象
        var oFile = document.getElementById('exampleFormControlFile').files[0];
          // 通过id号获取预览的图像显示区
        var oImage = document.getElementById('preview');
        // prepare HTML5 FileReader
        var oReader = new FileReader();
        oReader.onload = function(e){
            oImage.src = e.target.result;
            oImage.onload = function (){
              // do no thing
            };
          };
        // read selected file as DataURL
        oReader.readAsDataURL(oFile);
      }
</script>

3、测试

效果


0
Posted in 学习, 研究, 问题解决

Tesserocr-4.0及以上,编译完成之后,只支持命令行的形式进行OCR识别,下面介绍如何用python3调用tesserocr-4.0及以上的API接口,实现自己的应用程序

1、安装环境

前一篇文章,我们介绍了如何编译与运行tesserocr-4.0及以上程序,文章链接:CentOS 8 / RHEL 8 源码编译安装Tesseract-OCR 4.0及以上

我们的python运行在上面的环境之上的,我们建议在我们的用户目录下安装anaconda环境,如果你的Linux没有anaconda环境,可以参考我的博客链接:Linux下安装基于Python3.7的Anaconda环境

安装基于tesserocr-4.0及以上接口程序tesserocr模块,安装命令如下:

pip install tesserocr

2、测试程序

测试程序1:

# coding:utf-8
import tesserocr

print(tesserocr.tesseract_version())
print(tesserocr.get_languages())

# 从文件中读取文件,并识别成text文件, 语言为中文简体 LSTM模型 
output = tesserocr.file_to_text('test.jpg', lang='chi_sim', oem=1)
output = bytes(output, encoding = "utf8")

with open('output.txt', 'wb') as f:
    f.write(output)

测试程序2(同时识别多张):

from tesserocr import PyTessBaseAPI

images = ['test.jpg', 'test1.jpg']

with PyTessBaseAPI(lang='chi_sim') as api:
    for img in images:
        api.SetImageFile(img)
        print(api.GetUTF8Text())
        print(api.AllWordConfidences())
0
Posted in 努力扣代码, 学习

有时我们在发布网站时,我们会发现浏览器找不到网站图标,正确的图标如下图所示,下面介绍如何用Django引入网站图标

1、制作网站图标

首先你可以制作自己个性化的图片,或者在百度图片上找到自己喜欢的图片,然后在下面的网站转换成特定格式的图标文件(.ico文件),网站链接:https://www.bitbug.net/

2、Django配置

第一步,将下载的图标文件上传到Django工程中static目录下:

第二步,在你的模板html文件中的head之间加入下面的代码

 <!-- favicon.ico  -->
<link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" />

第三步,在你的urls.py文件中,加入下面的路由函数

from django.contrib import admin
from django.urls import path, re_path
from django.views.generic import RedirectView

urlpatterns = [
            path('admin/', admin.site.urls),
            re_path(r'^favicon\.ico$',RedirectView.as_view(url=r'static/images/favicon.ico')),   # 网站图标路由
]

3、测试

在浏览器中输入自己的网址,效果如下:

0
Posted in 学习, 科技, 问题解决

Django是一个由Python写成的Web应用框架。Django的主要目的是简便、快速的开发数据库驱动的网站。下面我们来介绍如何利用Django上传本地文件到服务器,并且保存到Mysql数据库

1、使用数据库

保存文件到数据库,需要Django操作数据库,如果你没有用过Django操作数据库,请移步我的博客教程:Django如何使用Mysql数据库

2、前端代码

在templates目录下创建一个test.html文件,并且向其加入下面的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>文件上传</title>
    <!-- Meta Tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta name="keywords" content="" />
 </head>   
    <body>
        <form action="/upload" method="POST" enctype="multipart/form-data">   
            {% csrf_token %}
            <input type="file" name="file" >
            <input type="submit" name="submit" value="上传">
        </form>
    {% if img_obj %}
        <img src="{{ img_obj.img.url }}">
    {% endif %}
    </body>

</html>

3、后端配置

在settings.py中增加下面的配置,这个配置主要用于图片和媒体文件保存的目录和路由,也就是说,你访问http://ip/media/xxx/xxx.jpg  就能直接访问到MEDIA_ROOT目录下对应子目录的文件,数据库图片也是默认保存在MEDIA_ROOT及其子目录下

# 设置MEDIA
MEDIA_URL='/media/'
MEDIA_ROOT=os.path.join(BASE_DIR,'media')

注意:在你的工程目录下需要手动新建一个media目录,该目录和tempaltes同级

设置路由,目的是实现其访问对应关系,在urls.py中添加配置,并且处理文件上传的视图函数

# coding:utf-8
from django.contrib import admin
from django.conf import settings
from django.views.static import serve
from django.urls import path
from django.urls import re_path

from . import view

urlpatterns = [
    path('admin/', admin.site.urls),
    path('upload', view.upload_handle),  # 处理文件POST请求
    path('test/', view.test), # 上传文件界面
    re_path(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}), # 实现路由对应关系
]

在模型文件配置数据库,即在models.py中配置如下代码:

from django.db import models

# Create your models here.
class Image(models.Model):
    # 上传的图片将保存在/media/img 的目录下 这样我们才可以通过http://ip/media/xxx.jpg 访问我们的图片
    img = models.ImageField(upload_to="img/" , verbose_name="图片")

更新数据库:

python manage.py makemigrations
python manage.py migrate

4、后端代码处理

在view.py中添加下面的处理视图函数:

from django.shortcuts import render
from app.models import Image  # 这里的app名,根据自己的名字而定

def upload_handle(request):
    # 判断是否是有效的POST请求
    if request.method == 'POST' and request.POST:
        # 获取文件对象
        file = request.FILES.get('file', None)
        if file is None:
            raise NameError("提交表单为空")
        # 创建一个表,这里表中只有一个字段
        img = Image.objects.create(img=file)
        # 返回响应,把图片在html中显示
        return render(request, 'test.html', {
            "img_obj" : img
        })

def test(request):
    return render(request, 'test.html', {})

5、测试

程序运行:

python manage.py  runserver 0.0.0.0:8000

在浏览器中访问:http://ip:8000/test/



服务器上传路径:

0
Posted in 学习

Django是一个非常强大的基于Python的Web框架,我们可以用Django处理带参数的url

1、带参数的URL

http请求的带参数的url,URL参数是追加到URL上的一个名称/值对,通常以?符号开始,如果有多个参数,用&符号隔开,案列如下:

http(s)://www.ivdone.top/article/?page=2&p=288

2、Django如何处理带参数的URL

首先在urls.py中添加路由

# coding:utf-8
from django.contrib import admin
from django.urls import path
from django.urls import re_path

from . import view

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', view.index),
    re_path('^article/$', view.article), # 添加参数url的路由
]

然后在view.py的视图函数中获取参数url中的参数值

# coding:utf-8
import os
from django.http import HttpResponse

def article(request):
    # 判断请求类型,带参数的url请求一般是GET请求
    if request.method == "GET" and request.GET:
        # 根据参数的键获得参数的值
        page = request.GET.get('page', None)
        p = request.GET.get('p', None)
        if page is None or p is None:
            return HttpResponse("can't get the value")
        # 返回结果
        result = "the page is " + page + " the p is " + p
        return HttpResponse(result)
    else:
        return HttpResponse("error")

运行程序

# 0.0.0.0代表任意ip可以访问,8000为监听端口
python manage.py runserver 0.0.0.0:8000

3、测试

在浏览器中输入:http://ip:8000/article/?p=3&page=2

0
Posted in 学习, 软件工程