基于django micro搭建网站实现加水印功能

用django_micro搭建的,给图片加文字水印的前端+后端功能开发;

大体功能是:输入水印的文字,选择要加水印的图片,最后生成加好水印的图片。

可在一页中显示多个加好水印的图片,且可点击显示或隐藏图片的缩略图。实现效果如下:

代码如下

from django_micro import route, run, configure
from django.http import HttpRequest, HttpResponse
from dominate.document import document
import dominate.tags as dom
from wand.drawing import Drawing   # 加水印用
from wand.image import Image  # 加水印用
import base64  # 图片转字符串用

configure({'DEBUG':True})

# 一些元素的cls
CENTERFRAME = "flex flex-col items-center justify-center bg-teal-200 h-screen"
UPLOAD_FORM_ATTRIS ={
  "class":"flex flex-col justify-center",
  "ic-post-to": "/file",
  "ic-target": "#result_item",
  "ic-replace-target": "true",
  "enctype": "multipart/form-data"
}
CARD1 = "flex flex-col bg-green-400 shadow-xl p-1 rounded-lg w-80 h-auto"
TEXT_INPUT = "shadow border rounded m-1 p-1 text-base text-center font-thin"
CARD2 = "flex flex-col bg-white shadow-xl p-2 rounded-lg w-80 h-80"
DASHED_BOX = "flex flex-col items-center justify-center border-dashed border-2 border-gray-200 h-full"
UPLOAD_ICON = "fas fa-file-upload text-gray-300 font-medium text-6xl"
UPLOAD_BUTTON = "flex justify-center bg-green-400 px-3 py-2 mt-4 text-white rounded shadow"
RESULT_CONTAINER = "flex flex-col bg-white items-center"
RESULT_ITEM = "flex flex-col justify-center bg-white p-2 border-t border-gray-200 w-64"
TOGGLE_TEXT_ATTRIS = {   # 这个常量后来没用
  "ic-action":"slideToggle",
  # "ic-target":"#toggle_img", # 以ID定位,只能选择第一个元素
  "ic-target":"figure"   # 以元素类型定位,会对所有同类元素进行操作
}

# 为了写head部分的引入方便,写个link_函数;下面script_函数类似
def link_(lk):
  return dom.link(rel="stylesheet",type="text/css",href=lk)

def script_(s):
  return dom.script(src=s)

def page():
  doc = document()
  with doc.head:
    link_("https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css") # tailwind
    link_("https://extra-uru1z3cxu.now.sh/css/extra.css") # 额外写的扩展库
    link_("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css") # 为了使用font-awesome的图标
    script_("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js") # jquery
    script_("http://intercoolerjs.org/release/intercooler-1.2.2.js")  # intercooler
  with doc.body:
    with dom.div(cls=CENTERFRAME) as CenterFrame:
      with dom.form(UPLOAD_FORM_ATTRIS) as UploadForm:
        # 输入水印文字区
        with dom.div(cls=CARD1) as Card1:
          dom.p("Write down your mark here",cls="text-base font-thin text-white" )
          dom.input(cls=TEXT_INPUT,id="wm_text",type="text",name="mark_text",placeholder="your watermark text")
        # 上传图片区
        with dom.div(cls=CARD2) as Card2:
          with dom.div(cls=DASHED_BOX):
            dom.i(cls=UPLOAD_ICON,onclick='''$('#fileupload').click()''')
            dom.p("Find File", id="show_info", cls="text-gray-500 mt-4")
            dom.button("Upload", cls=UPLOAD_BUTTON)
            dom.input(cls="hidden", type="file", id="fileupload",name="ori_img",
                 onchange='''$('#show_info').text(this.value.split("\\\\").pop(-1))''')

      # 生成水印图片区
      with dom.div(cls=RESULT_CONTAINER) as ResultContainer:
        dom.span(id="result_item")

  return doc.render()

def item(result_file_path):
  filename = result_file_path.split('/',1)[-1].split('.')[0]
  print('filename:',filename)
  # 处理图片,转成字符串
  with open(result_file_path, "rb") as imageFile:
    img_str = base64.b64encode(imageFile.read())

  with dom.div(cls=RESULT_ITEM) as ResultItem:
    with dom.a( {
      "ic-action":"slideToggle",
      "ic-target":f"#{filename}"
    }) as ToggleText:
      dom.p(filename, cls="text-sm font-thin text-center text-gray-800")
    with dom.figure(cls="hidden",id=filename): # id中不能带'.'(点)
      dom.img(title="data src",alt="",
          src = "data:image/jpeg;base64," + str(img_str,'utf-8') ) # 转str时要加'utf-8',否则不能去掉b'

  return dom.span(id="result_item").render() + ResultItem.render()

@route('')
def index(request: HttpRequest):
  return HttpResponse(page())

@route('file')
def filehandler(request:HttpRequest):
  ori_img = request.FILES.get('ori_img')
  mark_text = request.POST.get('mark_text') # 得用request.POST,因为form提交是用POST方式
  print('mark_text:',mark_text)
  result_file_path = 'output/Toggle_'+ori_img.name  # 打水印后的文件保存路径

  with Image(file=ori_img) as img:
    # 先保存原始图片
    img.save(filename='userupload/' + ori_img.name)
    # 画图,把字画在原图上
    with Drawing() as ctx:
      ctx.font_family = 'Times New Roman, Nimbus Roman No9'
      # ctx.font_size = 50
      ctx.font_size = int(img.height) * 0.1
      ctx.text_kerning = 20 # 字间距
      ctx.fill_color = 'grey'
      # ctx.opacity = 0.9  # 不透明性
      img.annotate(mark_text, ctx, left=int(img.width) * 0.1, baseline=int(img.height) * 0.45)
    img.save(filename=result_file_path)

  return HttpResponse(item(result_file_path))

app = run()

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Python django搭建layui提交表单,表格,图标的实例

    利用layui制作与众不同的感谢表单,表格 layui极大的提高了前端开发效率,它极具个性的样式等等都非常吸引人,接下来我将为大家展示如何利用Python的django框架与layui制作极富个性的表单与数据表格 注:忽略创建项目,配置文件,若这部分内容不太明白,参考教你使用Django搭建一个基金模拟交易系统,里面会教你从项目创建到最终运行的完整流程. 第一步:在templates目录下新建一个index.html文件(文件内容根据自己的业务需求在layui官网复制即可),同时改变其布局只需将

  • 详解使用django-mama-cas快速搭建CAS服务的实现

    当公司有多条产品线,或者有多个不同的应用的时候,每次都做登录是个非常烦人的事情.(原谅我没有从SSO的角度看这个问题..对我来说能偷懒少写点东西最实在).为什么需要每次都做个登录?做登录就意味着我的系统还得要有用户.角色.菜单管理,天啊!RBAC又来了(摊手). 当我新做一个应用的时候,我最希望的就是这些东西都是现有的,接入一下就可以用了,一方面来说省事,另外一方面来说,也节省测试的时间.从服务的角度来看,认证这种动作也应该被划分到一个具体的服务里面去. 为什么没有用Jasig 无论是OSC还是

  • python+Django+pycharm+mysql 搭建首个web项目详解

    本文实例讲述了python+Django+pycharm+mysql 搭建首个web项目.分享给大家供大家参考,具体如下: 前面的文章记录了环境搭建的过程,本节记录首个web项目调试 首先检查安装的模块,输入dos命令 pip list, 会显示已安装的模块,看是否有Django,PyMySQL模块 C:\Users\Administrator\PycharmProjects>pip list DEPRECATION: The default format will switch to colu

  • nginx+uwsgi+django环境搭建的方法步骤

    环境搭建 1.安装uwsgi.nginx和django apt install nginx pip install uwsgi pip install django 2.测试uwsgi和nginx的连接 PS:下面的例子采用的是 unix socket 的链接发送 创文件foobar.py def application(env, start_response): start_response('200 OK', [('Content-Type','text/html')]) return [b

  • python框架Django实战商城项目之工程搭建过程图文详解

    项目说明 该电商项目类似于京东商城,主要模块有验证.用户.第三方登录.首页广告.商品.购物车.订单.支付以及后台管理系统.项目开发模式采用前后端不分离的模式,为了提高搜索引擎排名,页面整体刷新采用jinja2模板引擎实现,局部刷新采用vue.js实现. 项目运行机制如下: 项目搭建 工程创建 项目使用码云进行源代码版本控制,在码云创建好后直接克隆到本地即可,然后在项目根目录下执行virtualenv venv创建虚拟环境,source venv/bin/activat激活虚拟环境后,安装djan

  • python3.6+django2.0+mysql搭建网站过程详解

    之前用过python2.7版本,改用3.6版本发现很多语法发生了变化. 在templates里新建一个html文件,命名为index.html作为要测试的界面, 新建一个应用,Tools->Run manage.py Task 输入startapp+应用名称 然后对urls进行配置,配置如下: from django.conf.urls import url from . import views urlpatterns = [ url(r'^index/', views.index), ] 在

  • 使用Django搭建网站实现商品分页功能

    装好Django,写好index.html后,可以展示网页了.但是这只是静态页面,没有关联数据库,也不能分页展示商品信息.本节连接mongodb数据库(事先已准备好数据),从中取出几十条商品信息,每页展示4个商品信息,并具有翻页功能,做好的页面效果大致如下: 开始代码: 1.在settings.py(项目名称目录下)中,增加2段代码,分别是static文件夹位置和连接mongodb的代码: STATIC_URL = '/static/' STATICFILES_DIRS = (os.path.j

  • 使用Django搭建一个基金模拟交易系统教程

    亲手教你如何搭建一个基金模拟系统(基于Django框架) 第一步:创建项目.APP以及静态文件存储文件夹 django-admin startproject Chongyang django-admin startapp Stock # Chongyang文件夹里面操作 在chongyang项目创建statics和templates两个文件夹 第二步:配置Setting.py文件 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib

  • 基于django micro搭建网站实现加水印功能

    用django_micro搭建的,给图片加文字水印的前端+后端功能开发: 大体功能是:输入水印的文字,选择要加水印的图片,最后生成加好水印的图片. 可在一页中显示多个加好水印的图片,且可点击显示或隐藏图片的缩略图.实现效果如下: 代码如下 from django_micro import route, run, configure from django.http import HttpRequest, HttpResponse from dominate.document import doc

  • PHP实现图片加水印功能

    这里分享下php给图片加水印的几个自定义函数 给图片加水印首先需要开启GD库. 用到的php函数是imagecopymerge () 和 imagecopy () imagecopymerge 函数可以支持两个图像叠加时,设置叠加的透明度 imagecopy 函数则不支持叠加透明. 基本概念就啰嗦到这,下边是几个函数的讲解 在图像上打上LOGO水印. logo透明的png图像,logo.png , 使用imagecopymerge函数,可以实现打上透明度为30%的水印图标 (可是当我的图片是jp

  • Django框架搭建的简易图书信息网站案例

    本文实例讲述了Django框架搭建的简易图书信息网站.分享给大家供大家参考,具体如下: 创建Django项目,将数据库改为mysql,修改项目的urls.py文件 创建一个新应用,在应用里创建urls.py文件. 在应用的models.py里建表 from django.db import models # Create your models here. #一类 class BookInfo(models.Model): btitle=models.CharField(max_length=2

  • python设计微型小说网站(基于Django+Bootstrap框架)

    一.项目背景: 为了回顾关于django的文件上传和分页功能,打算写一个微型的小说网站练练手.花了一个下午的时间,写了个小项目,发现其中其实遇到了许多问题,不过大部分通过debug之后就解决了,其他部分通过阅读了Pagination插件以及Bootstrap-FileInput插件的官方文档. 二.详细设计: 省去小说网站的用户模块的功能,小说网站主要的功能就是上传文件,在线阅读小说.针对这两个功能, 主要用到dajngo内置的Pagination模块,以及选择一个上传文件插件即可.因为用的是B

  • Spring Boot实现图片上传/加水印一把梭操作实例代码

    概述 很多网站的图片为了版权考虑都加有水印,尤其是那些图片类网站.自己正好最近和图片打交道比较多,因此就探索了一番基于 Spring Boot这把利器来实现从 图片上传 → 图片加水印 的一把梭操作! 本文内容脑图如下: 本文内容脑图 搭建 Spring Boot基础工程 过程不再赘述了,这里给出 pom中的关键依赖: <dependencies> <dependency> <groupId>org.springframework.boot</groupId>

  • Python之Web框架Django项目搭建全过程

    Python之Web框架Django项目搭建全过程 IDE说明: Win7系统 Python:3.5 Django:1.10 Pymysql:0.7.10 Mysql:5.5 注:可通过pip freeze查看已安装库版本信息. Django 是由 Python 开发的一个免费的开源网站框架,可以用于快速搭建高性能,优雅的网站! Django 特点 强大的数据库功能 用python的类继承,几行代码就可以拥有一个丰富,动态的数据库操作接口(API),如果需要你也能执行SQL语句. 自带的强大的后

  • 基于Django contrib Comments 评论模块(详解)

    老版本的Django中自带一个评论框架.但是从1.6版本后,该框架独立出去了,也就是本文的评论插件. 这个插件可给models附加评论,因此常被用于为博客文章.图片.书籍章节或其它任何东西添加评论. 一.快速入门 快速使用步骤: 安装包:pip install django-contrib-comments 在django的settings中的INSTALLED_APPS处添加'django.contrib.sites'进行app注册,并设置SITE_ID值. 在django的settings中

  • 基于vue-cli vue-router搭建底部导航栏移动前端项目

    vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:www.zhoupeng520.cn/index.html 项目中主要用了Flex布局,以及viewport相关知识,已达到适应各终端屏幕的目的 3.项目主要目录 4主要代码如下  (1)App.vue <template> <div id="app"> <router-view c

  • 2行Python实现给图片加水印效果

    目录 前言 filestools库介绍 一行代码给图片加水印 总结 前言 版权相当重要,对于某张图片,可能是你精心制作的思维导图,或者你精心设计的某个logo.你可能花费好多时间来弄,最后却被别人直接搬运过去使用,好气哦! 基于此,本文我就带着大家学学如何给你的图片加水印,仅需要2行Python代码,任何人都可以学会. filestools库介绍 今天给大家介绍的Python库,叫做filestools,由小小明开发,直接使用如下命令,安装后使用. pip install filestools

随机推荐