图片加字，用我最爽

image

添加后的文字可用鼠标拖拽——没这个就成了最不爽了。

HTML+JavaScript:

<html><head><meta charset="UTF-8">
<title>图片加字，用我最爽</title>
<style>
body {
 display: flex; /* 设置为弹性布局容器 */
 justify-content: center; /* 主轴（默认水平）居中 */
 align-items: center; /* 交叉轴（默认竖直）居中 */
}
* { font: 12pt sans-serif; }
img { pointer-events: none; user-select: none; }
button { width: 6em; padding: 8px; font-size: 13pt; }
#file { display: none; }
textarea { line-height: 150%; }
/* p和div都是独占一行的块元素。p的margin-top/bottom默认不为0 */
.draggable {
 position: absolute; margin: 0; padding: 0;
 user-select: none; cursor: move;
}
.draggable:active { cursor: none; }
</style></head><body>
<!--在未设置CSS定位和z-index属性的默认情况下，后出现在源码中的元素覆盖先出现的元素-->
<img>
<div style="position:absolute; left:16px; top:16px">
 <p>
  <input type="file" id="file" accept="image/*">
  <button onclick="file.click()">打开图片</button>
 </p>
 <p><textarea id="ta_css" spellcheck="false" rows=8 cols=25>left:600px; top:100px;&#13;&#10;color: red;&#13;&#10;font: 16pt sans;&#13;&#10;</textarea></p>
 <p><textarea id="ta_str" spellcheck="false" rows=3 cols=25 placeholder="图片加字，用我最爽"></textarea></p>
 <p><button onclick='add()'>添加文字</button></p>
 <p style="font-size:90%; color:#666">双击鼠标左键隐藏文字</p>
</div>
<script>
let d = document, draggingEle, offsetX, offsetY

function add () {
  let e = d.createElement('p')
  e.style.cssText = ta_css.value
  e.textContent = ta_str.value ? ta_str.value : '去马如飞酒力微醒时已暮赏花归'
  e.classList.add('draggable')
  e.addEventListener('mousedown', ev =>{
    let rect = (draggingEle = ev.target).getBoundingClientRect()
    offsetX = ev.clientX - rect.left
    offsetY = ev.clientY - rect.top
    ev.preventDefault()
  })
  e.addEventListener('dblclick', ev =>{ ev.target.style.display = 'none' })
  d.body.appendChild(e)
}

d.addEventListener('mousemove', e =>{
  if (!draggingEle) return
  let scrollX = window.pageXOffset || d.documentElement.scrollLeft,
      scrollY = window.pageYOffset || d.documentElement.scrollTop
  let x = e.clientX - offsetX + scrollX,
      y = e.clientY - offsetY + scrollY
  draggingEle.style.left = x + 'px'
  draggingEle.style.top = y + 'px'
})

d.addEventListener('mouseup', () =>{ draggingEle = undefined })

// 防止拖拽时选中文本
d.addEventListener('selectstart', e =>{ if (draggingEle) e.preventDefault() })

file.addEventListener('change', f =>{
  let reader = new FileReader()
  reader.onload = e =>{ d.querySelectorAll('img')[0].src = e.target.result }
  if (f.target.files.length) reader.readAsDataURL(f.target.files[0])
})
</script></body></html>
View Code

Python PIL缩放旋转：

from PIL import Image as Img
from os import path
import sys

if len(sys.argv) < 3: exit()
name = sys.argv[1]
try: img = Img.open(name)
except FileNotFoundError as e: print(e); exit()
for a in sys.argv[2:]:
  i = a.find('%')
  if i != -1:
    w,h = img.size
    scale = float(sys.argv[2][:i]) / 100
    size = (int(w * scale), int(h * scale))
    img = img.resize(size, Img.LANCZOS)
    w,h = img.size
  else: img = img.rotate(int(a))

root,ext = path.splitext(name)
img.save(root + '-'.join(sys.argv[2:]) + ext, compress_level=9)
View Code

〔qcrop裁减〕

posted @ 2025-11-09 14:47  华容道专家  阅读(1)  评论(0)    收藏  举报