669 lines
16 KiB
JavaScript
669 lines
16 KiB
JavaScript
/**
|
|
* {上传组件}
|
|
* @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
|
|
const WORKSPACE_WIDTH = 640
|
|
const WORKSPACE_HEIGHT = 480
|
|
const WORKSPACE_RATIO = 640 / 480
|
|
|
|
function uuid() {
|
|
return Math.random().toString(16).slice(2)
|
|
}
|
|
|
|
function round(n) {
|
|
n = Math.round(n)
|
|
if (n % 2) {
|
|
n--
|
|
}
|
|
return n
|
|
}
|
|
|
|
class Uploader extends Component {
|
|
static props = {
|
|
value: 'str!https://static.reduzixun.com/r-time/common/2cc153c8018.webp',
|
|
accept: '*/*',
|
|
maxSize: 0,
|
|
disabled: false
|
|
}
|
|
|
|
static styles = [
|
|
css`
|
|
:host {
|
|
display: flex;
|
|
width: 100%;
|
|
font-size: 14px;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
img,
|
|
a {
|
|
-webkit-user-drag: none;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 6px 0;
|
|
gap: 12px;
|
|
|
|
--size: var(--wc-uploader-size, 96px);
|
|
--border-color: var(--wc-uploader-border-color, var(--color-grey-2));
|
|
--wc-icon-size: 14px;
|
|
}
|
|
|
|
.upload-button {
|
|
position: relative;
|
|
display: 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`
|
|
.image-thumb {
|
|
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: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 2;
|
|
display: none;
|
|
width: 800px;
|
|
height: 556px;
|
|
padding: 16px;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
|
|
&.show {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.workspace {
|
|
position: relative;
|
|
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);
|
|
|
|
canvas {
|
|
display: block;
|
|
width: 100%;
|
|
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;
|
|
}
|
|
|
|
.button {
|
|
width: 100%;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
.toolbar {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 28px;
|
|
padding: 0 8px;
|
|
gap: 4px;
|
|
font-size: 12px;
|
|
border: 1px solid var(--color-grey-1);
|
|
border-radius: 4px;
|
|
background: var(--color-plain-1);
|
|
cursor: pointer;
|
|
}
|
|
`
|
|
]
|
|
|
|
#ctx
|
|
#img
|
|
#panelShow = false
|
|
|
|
// 原图信息
|
|
#origin = {
|
|
x: 0,
|
|
y: 0,
|
|
w: 0, // 原图宽度
|
|
h: 0, // 原图高度
|
|
rw: 0, // 渲染宽度
|
|
rh: 0, // 渲染高度
|
|
scale: 1 //缩放比例
|
|
}
|
|
#cropData = {
|
|
x: 0,
|
|
y: 0,
|
|
w: 300,
|
|
h: 300
|
|
}
|
|
#ratio = 1
|
|
|
|
#stat = {
|
|
blur: false,
|
|
scalex: false,
|
|
scaley: false,
|
|
rotate: 0,
|
|
grey: false
|
|
}
|
|
|
|
#fileChange(ev) {
|
|
let file = ev.target.files[0]
|
|
ev.target.value = ''
|
|
|
|
this.#initPanel(URL.createObjectURL(file))
|
|
}
|
|
|
|
#fetchUpload(file) {
|
|
this.$emit('upload', {
|
|
file,
|
|
send: url => {
|
|
this.value = url
|
|
this.#preview()
|
|
}
|
|
})
|
|
}
|
|
|
|
#remove() {
|
|
this.value = ''
|
|
}
|
|
|
|
#preview() {
|
|
this.$refs.view.firstElementChild.src = this.value
|
|
this.$refs.view.style.display = 'flex'
|
|
}
|
|
|
|
#closePreview(ev) {
|
|
this.$refs.view.style.display = ''
|
|
}
|
|
|
|
#cancel() {
|
|
this.#panelShow = false
|
|
this.$requestUpdate()
|
|
}
|
|
|
|
#confirm() {
|
|
this.#export().then(bin => {
|
|
this.#fetchUpload(bin)
|
|
// this.#cancel()
|
|
})
|
|
}
|
|
|
|
#download() {
|
|
this.#export().then(bin => {
|
|
let a = document.createElement('a')
|
|
a.href = URL.createObjectURL(bin)
|
|
a.download = 'image-cropped.png'
|
|
a.click()
|
|
this.#cancel()
|
|
})
|
|
}
|
|
|
|
#export() {
|
|
let { x, y, w, h } = this.#cropData
|
|
let data = this.#ctx.getImageData(x, y, w, h)
|
|
let can = new OffscreenCanvas(w, h)
|
|
let ctx = can.getContext('2d')
|
|
|
|
ctx.putImageData(data, 0, 0)
|
|
return can.convertToBlob({ type: 'image/png', quality: 0.95 })
|
|
}
|
|
|
|
#handleDrag(ev) {
|
|
let elem = ev.currentTarget
|
|
let outer = elem.parentNode
|
|
let { top: _top, left: _left } = offset(outer)
|
|
let { top, left } = offset(elem)
|
|
let { rw, rh } = this.#origin
|
|
let { w, h } = this.#cropData
|
|
|
|
let ax = ev.x - left
|
|
let ay = ev.y - top
|
|
let ww = WORKSPACE_WIDTH
|
|
let hh = WORKSPACE_HEIGHT
|
|
|
|
let _x = (ww - rw) / 2
|
|
let _y = (hh - rh) / 2
|
|
|
|
ww -= w + _x
|
|
hh -= h + _y
|
|
|
|
let callback = bind(DOC, 'mousemove', ({ x, y }) => {
|
|
x -= _left + ax
|
|
y -= _top + ay
|
|
x = x < _x ? _x : x > ww ? ww : x
|
|
y = y < _y ? _y : 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 { rw, rh } = this.#origin
|
|
let { x, y } = this.#cropData
|
|
|
|
this.#ratio = ratio
|
|
|
|
if (ratio > 0) {
|
|
let min = Math.min(rw, rh)
|
|
if (ratio <= 1) {
|
|
rh = min
|
|
rw = round(rh * ratio)
|
|
} else {
|
|
rw = min
|
|
rh = round(rw / ratio)
|
|
}
|
|
|
|
x = (WORKSPACE_WIDTH - rw) / 2
|
|
y = (WORKSPACE_HEIGHT - rh) / 2
|
|
|
|
this.#cropData = { w: rw, h: rh, x, y }
|
|
|
|
this.$refs.crop.style.cssText = `left:${x}px;top:${y}px;width:${rw}px;height:${rh}px;`
|
|
}
|
|
}
|
|
|
|
#rotate() {
|
|
let ctx = this.#ctx
|
|
let { x, y, w, h, rw, rh } = this.#origin
|
|
|
|
// ctx.save()
|
|
ctx.clearRect(0, 0, WORKSPACE_WIDTH, WORKSPACE_HEIGHT)
|
|
ctx.translate(WORKSPACE_WIDTH / 2, WORKSPACE_HEIGHT / 2)
|
|
ctx.rotate((90 * Math.PI) / 180)
|
|
ctx.drawImage(this.#img, x - w / 2, y - h / 2, rw, rh)
|
|
// ctx.restore()
|
|
console.log('<><><><>')
|
|
}
|
|
#scale() {}
|
|
|
|
#filter(type) {
|
|
if (type === 'blur') {
|
|
this.#stat.blur = !this.#stat.blur
|
|
let { x, y, rw, rh } = this.#origin
|
|
this.#ctx.filter = this.#stat.blur ? 'blur(6px)' : 'none'
|
|
// this.#ctx.clearRect(0, 0, WORKSPACE_WIDTH, WORKSPACE_HEIGHT)
|
|
this.#ctx.drawImage(this.#img, x, y, rw, rh)
|
|
}
|
|
}
|
|
|
|
#initPanel(url) {
|
|
let img = new Image()
|
|
|
|
this.#img = img
|
|
this.#ctx.clearRect(0, 0, WORKSPACE_WIDTH, WORKSPACE_HEIGHT)
|
|
|
|
img.onload = _ => {
|
|
let { naturalWidth: w, naturalHeight: h } = img
|
|
let scale = 1
|
|
let ratio = w / h
|
|
let rw, rh
|
|
|
|
if (ratio > WORKSPACE_RATIO) {
|
|
rw = WORKSPACE_WIDTH
|
|
scale = rw / w
|
|
rh = round(scale * h)
|
|
} else if (ratio === WORKSPACE_RATIO) {
|
|
rw = WORKSPACE_HEIGHT
|
|
rh = rw
|
|
scale = rw / w
|
|
} else {
|
|
rh = WORKSPACE_HEIGHT
|
|
scale = rh / h
|
|
rw = round(scale * w)
|
|
}
|
|
let x = (WORKSPACE_WIDTH - rw) / 2
|
|
let y = (WORKSPACE_HEIGHT - rh) / 2
|
|
this.#origin = { x, y, w, h, rw, rh, scale }
|
|
this.#ctx.drawImage(img, x, y, rw, rh)
|
|
this.#changeCropRatio({ target: { dataset: { ratio: 1 } } })
|
|
this.#panelShow = true
|
|
this.$requestUpdate()
|
|
}
|
|
img.src = url
|
|
}
|
|
|
|
mounted() {
|
|
this.#ctx = this.$refs.can.getContext('2d', { willReadFrequently: true })
|
|
fetch(this.value)
|
|
.then(r => r.blob())
|
|
.then(b => {
|
|
this.#initPanel(URL.createObjectURL(b))
|
|
})
|
|
}
|
|
|
|
render() {
|
|
let { disabled } = this
|
|
|
|
return html`
|
|
<main class="container">
|
|
${this.value
|
|
? html`
|
|
<section
|
|
class="image-thumb"
|
|
style=${styleMap({ backgroundImage: `url(${this.value})` })}
|
|
>
|
|
<wc-icon name="search" @click=${this.#preview}></wc-icon>
|
|
<wc-icon name="trash" @click=${this.#remove}></wc-icon>
|
|
</section>
|
|
`
|
|
: html`
|
|
<section 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}
|
|
@change=${this.#fileChange}
|
|
/>
|
|
</section>
|
|
`}
|
|
|
|
<div class="edit-panel ${this.#panelShow ? 'show' : ''}">
|
|
<div class="workspace">
|
|
<canvas ref="can" width="640" height="480"></canvas>
|
|
<div
|
|
ref="crop"
|
|
class="crop-area"
|
|
@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>
|
|
|
|
<span class="button" @click=${this.#cancel}
|
|
><wc-icon name="deny"></wc-icon>取消</span
|
|
>
|
|
<span class="button" @click=${this.#confirm}
|
|
><wc-icon name="upload"></wc-icon>确定</span
|
|
>
|
|
<span class="button" @click=${this.#download}
|
|
><wc-icon name="download"></wc-icon>下载</span
|
|
>
|
|
</aside>
|
|
|
|
<footer class="toolbar">
|
|
<span class="button" @click=${this.#rotate}>旋转90度</span>
|
|
<span class="button" @click=${this.#scale}>左右翻转</span>
|
|
<span class="button" @click=${this.#scale}>上下翻转</span>
|
|
<span class="button" @click=${_ => this.#filter('greyscale')}
|
|
>去色</span
|
|
>
|
|
<span class="button">增加水印</span>
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
|
|
<div class="preview" ref="view" @click.self=${this.#closePreview}>
|
|
<img />
|
|
</div>
|
|
`
|
|
}
|
|
}
|
|
|
|
Uploader.reg('image-uploader')
|
JavaScript
98.9%
CSS
1.1%