Skip to content

Instantly share code, notes, and snippets.

@MoeRayo
Created September 25, 2023 19:35
Show Gist options
  • Save MoeRayo/c041e35a92e1e6047ec3d006a468e5f1 to your computer and use it in GitHub Desktop.
Save MoeRayo/c041e35a92e1e6047ec3d006a468e5f1 to your computer and use it in GitHub Desktop.
Mechanism that allows users to add the transformation option values
<template>
<div class="flex flex-column flex-row-ns pa3 calisto bg-black-05">
<div class="w-50-ns w-100 ph3">
<!-- upload image -->
...
</div>
<section class="w-40-l w-50-m w-100 ph3 tl">
<h2>Transform Image</h2>
<form class="ba b--black bw2 bg-white br2 mw6 center pv2 ph4 shadow-5 f6">
<div>
<label for="height" class="dib mb2 mr2 black-70 f5 w-30"
>Height</label
>
<input
type="number"
name="height"
id="height"
class="dib mb3 br2 pa2 ba bw1 b--black"
v-model="height" />
</div>
<div>
<label class="dib mb2 mr2 black-70 f5 w-30" for="width">Width</label>
<input
type="number"
name="width"
id="width"
class="dib mb3 br2 pa2 ba bw1 b--black"
v-model="width" />
</div>
<div>
<label class="dib mb2 mr2 black-70 f5 w-30" for="sharpen"
>Sharpen</label
>
<input
type="number"
name="sharpen"
id="sharpen"
class="dib mb3 br2 pa2 ba bw1 b--black"
v-model="sharpen"
min="1"
max="10" />
</div>
<div>
<label class="dib mb2 mr2 black-70 f5 w-30" for="blur">Blur</label>
<input
type="number"
name="blur"
id="blur"
class="dib mb3 br2 pa2 ba bw1 b--black"
v-model="blur"
min="1"
max="250" />
</div>
<button
class="center db pv2 ph3 mb3 tracked bg-black ba br3 white hover-black hover-bg-black-30 bg-animate pointer f7">
Download
</button>
</form>
</section>
</div>
</template>
<script>
export default {
data() {
return {
height: 100,
sharpen: 0,
blur: 0,
width: 100,
};
},
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment