当前位置：首页 > news >正文

图片加字，用我最爽

news 2026/5/12 12:53:02

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

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, offsetYfunction add () {let e = d.createElement('p')e.style.cssText = ta_css.valuee.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.leftoffsetY = ev.clientY - rect.topev.preventDefault()})e.addEventListener('dblclick', ev =>{ ev.target.style.display = 'none' })d.body.appendChild(e)
}d.addEventListener('mousemove', e =>{if (!draggingEle) returnlet scrollX = window.pageXOffset || d.documentElement.scrollLeft,scrollY = window.pageYOffset || d.documentElement.scrollToplet x = e.clientX - offsetX + scrollX,y = e.clientY - offsetY + scrollYdraggingEle.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>