Usage
Precondition
Install @awesome-image/image More
Install
Vue/Nuxt
Install filter
@awesome-image/filter-crt for example. More
yarn add @awesome-image/filter-crt
yarn add @awesome-image/filter-crt
yarn add @nuxtjs/composition-api
Global
main.js
import FilterCrt from '@awesome-image/filter-crt'
Vue.use(FilterCrt)
main.js
import FilterCrt from '@awesome-image/filter-crt'
createApp().use(FilterCrt)
./plugins/as-image-filter.js
// add ./plugins/as-image-filter.js
import FilterCrt from '@awesome-image/filter-crt'
Vue.use(FilterCrt)
nuxt.config.js
// add plugin path to nuxt.config.js
{
plugins: [
'~~/plugins/as-image-filter.js'
]
}
Local
<script>
import AsImage from '@awesome-image/image'
import '@awesome-image/image/dist/style.css'
import AsFilterCrt from '@awesome-image/filter-crt'
export default {
components: {
AsImage,
AsFilterCrt
}
}
</script>
Browser
Add @awesome-image/image
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api/dist/vue-composition-api.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.12.1/lib/index.iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@awesome-image/image/dist/vue2/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@awesome-image/filter-crt/dist/vue2/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.12.4/lib/index.iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@awesome-image/image/dist/vue3/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@awesome-image/filter-crt/dist/vue3/index.umd.js"></script>
Usage
- Usage
filter componentasAsImage's filter slot - Passing a scope variable
imagetofilter component
Example
<template>
<AsImage
class="demoimage"
:width="1080"
:height="722"
:src="'/mount.jpg'"
>
<template #webglfilter="{ image }">
<div>
<as-filter-crt :image="image"></as-filter-crt>
</div>
</template>
</AsImage>
</template>
Online
Loading CodeSandbox...