图片上传组件更新
parent
97e2089a3a
commit
84c852e983
|
|
@ -0,0 +1,607 @@
|
|||
/**
|
||||
* {上传组件}
|
||||
* @author yutent<yutent.io@gmail.com>
|
||||
* @date 2023/04/28 16:14:10
|
||||
*/
|
||||
|
||||
import { css, html, Component, offset, bind, unbind, styleMap } from 'wkit'
|
||||
import { parseSize } from '../base/fs.js'
|
||||
import '../base/icon.js'
|
||||
|
||||
const EV_OPTION = { once: true }
|
||||
const DOC = document
|
||||
const ROOT = document.documentElement
|
||||
|
||||
function uuid() {
|
||||
return Math.random().toString(16).slice(2)
|
||||
}
|
||||
|
||||
class Uploader extends Component {
|
||||
static props = {
|
||||
value: [],
|
||||
accept: '*/*',
|
||||
maxSize: 0,
|
||||
disabled: false
|
||||
}
|
||||
|
||||
static styles = [
|
||||
css`
|
||||
:host {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
img,
|
||||
a {
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 6px 0;
|
||||
gap: 12px;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
--size: var(--wc-uploader-size, 96px);
|
||||
--border-color: var(--wc-uploader-border-color, var(--color-grey-2));
|
||||
--wc-icon-size: 14px;
|
||||
}
|
||||
|
||||
.error {
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
color: var(--color-red-1);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.limited {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
gap: 4px;
|
||||
border: 1px solid var(--color-grey-2);
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s linear, border-color 0.1s linear,
|
||||
color 0.1s linear;
|
||||
|
||||
--wc-icon-size: 22px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-grey-1);
|
||||
}
|
||||
&:active {
|
||||
background: var(--color-plain-1);
|
||||
}
|
||||
&.in {
|
||||
border: 1px dashed var(--color-orange-1);
|
||||
background: var(--color-drag-background);
|
||||
}
|
||||
}
|
||||
.hidden-input {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: inherit;
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`,
|
||||
css`
|
||||
.file-list {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
padding: 0 8px;
|
||||
line-height: 24px;
|
||||
gap: 6px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
background: none no-repeat center;
|
||||
background-size: contain;
|
||||
transition: background 0.15s linear;
|
||||
|
||||
--wc-icon-size: 20px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-plain-1);
|
||||
|
||||
wc-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
wc-icon {
|
||||
flex-shrink: 0;
|
||||
padding: 3px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
border-radius: 50%;
|
||||
background: rgba(64, 64, 64, 0.75);
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s linear;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
|
||||
// disabled
|
||||
css`
|
||||
:host([disabled]) {
|
||||
opacity: 0.6;
|
||||
|
||||
.upload-button {
|
||||
background: var(--color-disabled-background);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
`,
|
||||
// preview
|
||||
css`
|
||||
.preview {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
object-fit: contain;
|
||||
box-shadow: 0 0 20px #000;
|
||||
}
|
||||
}
|
||||
`,
|
||||
|
||||
//panel
|
||||
css`
|
||||
.edit-panel {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 99;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 800px;
|
||||
height: 556px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
|
||||
transform: translate(-50%, -50%);
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
var(--color-grey-1) 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
var(--color-grey-1) 75%,
|
||||
var(--color-grey-1)
|
||||
),
|
||||
linear-gradient(
|
||||
45deg,
|
||||
var(--color-grey-1) 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
var(--color-grey-1) 75%,
|
||||
var(--color-grey-1)
|
||||
);
|
||||
background-size: 16px 16px;
|
||||
background-position: 0 0, 8px 8px;
|
||||
box-shadow: 0 0 0 1px var(--color-grey-2);
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.crop-area {
|
||||
position: absolute;
|
||||
cursor: grab;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
width: calc(100% + 2px);
|
||||
height: calc(100% + 2px);
|
||||
border: 2px dashed var(--color-blue-1);
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-blue-1);
|
||||
cursor: move;
|
||||
|
||||
&:nth-child(1) {
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
right: -4px;
|
||||
top: -4px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
left: -4px;
|
||||
bottom: -4px;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.statusbar {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
width: 112px;
|
||||
|
||||
.crop {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
background: var(--color-plain-1);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin-top: 8px;
|
||||
padding: 3px 8px;
|
||||
border: 1px solid var(--color-plain-2);
|
||||
}
|
||||
legend {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-top: 16px;
|
||||
|
||||
span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
border: 1px solid var(--color-grey-1);
|
||||
border-radius: 4px;
|
||||
background: var(--color-plain-1);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
`
|
||||
]
|
||||
|
||||
#files = []
|
||||
#timer
|
||||
|
||||
#workspace = {
|
||||
w: 640,
|
||||
h: 480
|
||||
}
|
||||
// 原图信息
|
||||
#origin = {
|
||||
w: 670,
|
||||
h: 429
|
||||
}
|
||||
#cropData = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 300,
|
||||
h: 300
|
||||
}
|
||||
#ratio = 0
|
||||
|
||||
#toast(msg) {
|
||||
this.$refs.err.textContent = msg
|
||||
clearTimeout(this.#timer)
|
||||
this.#timer = setTimeout(() => {
|
||||
this.$refs.err.textContent = ''
|
||||
}, 5000)
|
||||
}
|
||||
|
||||
#fileChange(ev) {
|
||||
let files = [...ev.target.files]
|
||||
|
||||
ev.target.value = ''
|
||||
|
||||
this.#fetchUpload(files)
|
||||
}
|
||||
|
||||
#fetchUpload(files) {
|
||||
let { limit, maxSize } = this
|
||||
let len = files.length
|
||||
|
||||
if (maxSize > 0) {
|
||||
files = files.filter(it => it.size <= maxSize)
|
||||
if (files.length < len) {
|
||||
len = files.length
|
||||
this.#toast(`部分文件被忽略, 单文件最大允许 ${parseSize(maxSize)}`)
|
||||
}
|
||||
}
|
||||
|
||||
if (limit > 0) {
|
||||
files = files.slice(0, limit - this.#files.length)
|
||||
if (files.length < len) {
|
||||
this.#toast(`部分文件被忽略, 最多选择 ${limit} 个文件`)
|
||||
}
|
||||
}
|
||||
|
||||
if (files.length) {
|
||||
files = files.map(file => ({ file, id: uuid(), url: '', stat: 0 }))
|
||||
|
||||
this.#files = this.#files.concat(files)
|
||||
|
||||
this.$emit('upload', {
|
||||
files,
|
||||
send: args => {
|
||||
for (let it of args) {
|
||||
it.stat = 1
|
||||
}
|
||||
this.value = this.#files.map(it => it.url)
|
||||
}
|
||||
})
|
||||
this.$requestUpdate()
|
||||
}
|
||||
}
|
||||
|
||||
#remove(ev, it, id) {
|
||||
for (let i in this.#files) {
|
||||
if (it === this.#files[i]) {
|
||||
this.#files.splice(i, 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
this.$requestUpdate()
|
||||
}
|
||||
|
||||
#preview(ev, item) {
|
||||
this.$refs.view.firstElementChild.src =
|
||||
item.url || URL.createObjectURL(item.file)
|
||||
this.$refs.view.style.display = 'flex'
|
||||
}
|
||||
|
||||
#closePreview(ev) {
|
||||
this.$refs.view.style.display = ''
|
||||
}
|
||||
|
||||
#handleDrag(ev) {
|
||||
let elem = ev.currentTarget
|
||||
let outer = elem.parentNode
|
||||
let { top: _top, left: _left } = offset(outer)
|
||||
let { top, left } = offset(elem)
|
||||
let { clientHeight: hh, clientWidth: ww } = outer
|
||||
let { w, h } = this.#cropData
|
||||
|
||||
let ax = ev.x - left
|
||||
let ay = ev.y - top
|
||||
|
||||
ww -= w
|
||||
hh -= h
|
||||
|
||||
let callback = bind(DOC, 'mousemove', ({ x, y }) => {
|
||||
x -= _left + ax
|
||||
y -= _top + ay
|
||||
x = x < 0 ? 0 : x > ww ? ww : x
|
||||
y = y < 0 ? 0 : y > hh ? hh : y
|
||||
this.#cropData.x = x
|
||||
this.#cropData.y = y
|
||||
elem.style.cssText = `left:${x}px;top:${y}px;width:${w}px;height:${h}px;`
|
||||
})
|
||||
bind(DOC, 'mouseup', _ => unbind(DOC, 'mousemove', callback), EV_OPTION)
|
||||
}
|
||||
|
||||
#changeCropRatio(ev) {
|
||||
if (ev.target === ev.currentTarget) {
|
||||
return
|
||||
}
|
||||
let ratio = +ev.target.dataset.ratio
|
||||
let { w: ww, h: hh } = this.#workspace
|
||||
let { w, h } = this.#origin
|
||||
let { x, y } = this.#cropData
|
||||
|
||||
this.#ratio = ratio
|
||||
|
||||
if (ratio > 0) {
|
||||
let min = Math.min(w, h)
|
||||
if (ratio < 1) {
|
||||
} else if (ratio === 1) {
|
||||
w = min
|
||||
h = min
|
||||
this.#cropData.w = w
|
||||
this.#cropData.h = h
|
||||
} else {
|
||||
}
|
||||
|
||||
this.$refs.crop.style.cssText = `left:${x}px;top:${y}px;width:${w}px;height:${h}px;`
|
||||
}
|
||||
}
|
||||
|
||||
mounted() {}
|
||||
|
||||
render() {
|
||||
let { disabled } = this
|
||||
let limited = this.#files.length > 0
|
||||
let { w, h, x, y } = this.#cropData
|
||||
let cropStyle = styleMap({
|
||||
width: w + 'px',
|
||||
height: h + 'px',
|
||||
left: x + 'px',
|
||||
top: y + 'px'
|
||||
})
|
||||
|
||||
console.log(cropStyle)
|
||||
|
||||
return html`
|
||||
<main class="container">
|
||||
<header class="action-area ${limited ? 'limited' : ''}">
|
||||
<div ref="button" class="upload-button" @drop.prevent>
|
||||
<wc-icon name="upload"></wc-icon>
|
||||
<span>选择图片</span>
|
||||
<input
|
||||
class="hidden-input"
|
||||
title
|
||||
type="file"
|
||||
accept="image/*"
|
||||
disabled=${disabled || limited}
|
||||
@change=${this.#fileChange}
|
||||
/>
|
||||
</div>
|
||||
<mark ref="err" class="error"></mark>
|
||||
</header>
|
||||
|
||||
<footer
|
||||
class="file-list"
|
||||
style=${styleMap({ display: this.#files.length ? '' : 'none' })}
|
||||
>
|
||||
${this.#files.map(
|
||||
it => html`
|
||||
<section
|
||||
class="item"
|
||||
style=${styleMap({
|
||||
backgroundImage: `url(${it.url})`
|
||||
})}
|
||||
>
|
||||
<wc-icon
|
||||
name=${it.stat === 0 ? 'loading' : 'search'}
|
||||
@click=${ev => this.#preview(ev, it)}
|
||||
></wc-icon>
|
||||
|
||||
<wc-icon
|
||||
class="del"
|
||||
name="trash"
|
||||
data-id=${it.id}
|
||||
@click=${ev => this.#remove(ev, it, it.id)}
|
||||
></wc-icon>
|
||||
</section>
|
||||
`
|
||||
)}
|
||||
</footer>
|
||||
</main>
|
||||
<div class="preview" ref="view" @click.self=${this.#closePreview}>
|
||||
<img />
|
||||
</div>
|
||||
<div class="edit-panel">
|
||||
<div class="workspace">
|
||||
<img src="//static.reduzixun.com/r-time/common/2cc153c8018.webp" />
|
||||
<div
|
||||
ref="crop"
|
||||
class="crop-area"
|
||||
style=${cropStyle}
|
||||
@mousedown.prevent=${this.#handleDrag}
|
||||
>
|
||||
<i data-id="1"></i>
|
||||
<i data-id="2"></i>
|
||||
<i data-id="3"></i>
|
||||
<i data-id="4"></i>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="statusbar">
|
||||
<div class="crop" @click=${this.#changeCropRatio}>
|
||||
<span data-ratio="1">1:1</span>
|
||||
<span data-ratio="1.3333">4:3</span>
|
||||
<span data-ratio="0.75">3:4</span>
|
||||
<span data-ratio="1.7778">16:9</span>
|
||||
<span data-ratio="0.5625">9:16</span>
|
||||
<span data-ratio="0">任意比例</span>
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend>原尺寸</legend>
|
||||
<span>666x666</span>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>原体积</legend>
|
||||
<span>2.33MB</span>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>现尺寸</legend>
|
||||
<span>666x666</span>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>现体积</legend>
|
||||
<span>800KB</span>
|
||||
</fieldset>
|
||||
</aside>
|
||||
<footer class="toolbar">
|
||||
<span>旋转90度</span>
|
||||
<span>左右翻转</span>
|
||||
<span>上下翻转</span>
|
||||
<span>去色</span>
|
||||
<span>高斯模糊</span>
|
||||
<span>增加水印</span>
|
||||
</footer>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
Uploader.reg('image-uploader')
|
||||
|
|
@ -12,3 +12,4 @@ import './star.js'
|
|||
import './switch.js'
|
||||
import './textarea.js'
|
||||
import './uploader.js'
|
||||
import './image-uploader.js'
|
||||
|
|
|
|||
|
|
@ -171,8 +171,6 @@ class Uploader extends Component {
|
|||
gap: 6px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
background: none no-repeat center;
|
||||
background-size: contain;
|
||||
|
||||
--wc-icon-size: 20px;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue