Vue module, which is used to convert html content into mosaic.

Last update: Jul 21, 2022

vue-mosaic

Vue模块,用于在应用程序中对元素进行打码。该项目的一些值得注意的目标包括:

  • 重量轻、易于使用
  • 处理任何图像类型
  • 支持Vue 3.0

Tips

请使用最新版本0.0.9, 请勿使用更低版本,低版本为不稳定测试版

请使用最新版本0.0.9, 请勿使用更低版本,低版本为不稳定测试版

请使用最新版本0.0.9, 请勿使用更低版本,低版本为不稳定测试版

Table of Contents

Demo

Demo

Requirements

vue 3.X

Installation

$ npm install @kidoki/vue-mosaic
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import mosaic from '@kidoki/vue-mosaic'

createApp(App).use(store).use(router).use(mosaic).mount('#app')

文字打码

仅填入文字 则默认为普通马赛克

这是一段文字">
<vm-pure text="这是一段文字" />


<vm-pure>这是一段文字vm-pure>

属性说明:

属性名 说明 备注
text 填入一段文字
color 马赛克颜色 不填写颜色则为普通马赛克
onoff 是否进行打码 默认值是 true
width 控制打码后的长度 默认为文字长度,不写单位则默认单位为 px
height 控制打码后的高度 不写单位则默认单位为 px
line-height 控制文字的行高 不写单位则默认单位为 px
radius 设置打码后圆角弧度 预设值:no \ small \ largeround
可填写数值:不写单位则默认单位为 px

radius 属性:组件内提供了以下几种预设圆角样式,以供选择

当然也可以不使用预设样式,属性支持填写具体数值,不写单位则默认单位px

no small large round
0px 2px 4px 20px

图片打码

基本使用:

">
<vm-img>
      <img src="/images/imei.webp">
vm-img>

进阶使用:(控制马赛克样式)

">
<vm-img :option="option" >
      <img src="../../assets/images/imei.webp" />
vm-img>
setup(){
	const option = ref([
		{ resolution: 24 },
		{ shape: 'circle', resolution: 24, size: 24, offset: 24, alpha: 1 }
	])
    return { option }
}

可以使用option参数数组来控制输出的马赛克效果。参数数组中每一个集合都是一个对象,代表了某种马赛克输出效果。

在上面的例子中,第一组参数{ resolution : 24 }控制脚本每24像素就画一个大的正方形像素,然后为每一个正方形像素的中心填充一个精确的颜色值。

第二组参数使用了所有的可用参数:{ shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 }。和第一组参数一样,它的分辨率是24px,像素的形状是圆形,每一个圆形的大小是16像素,每一个圆形的右边都有12像素的偏移量,最后这个圆形的透明度被设置为50%。

参数名 说明
resolution 被渲染像素之间的距离。必须设定
shape 像素的形状。可选值:squarecirclediamond,默认值:square。可选。
size 渲染像素的大小。可选。默认值为resolution
offset 像素之间的偏移值。可选,默认值为0.可以只设置一个值,这时为对角偏移。也可以设置为一个数组或对象:[ 15, 5 ]{ x: 15, y: 5 }
alpha 渲染像素的透明度,可选,默认值为1。
maskColor 实时修改马赛克样式时为了防止图片暴露,会有一层加载色。该属性用于修改加载色的颜色,默认颜色为#fff

属性说明:

属性名 说明 备注
onoff 是否进行打码 默认值是 true
pattern 马赛克图案选择
不填写则为普通马赛克
可选值参照下图

pattern除了普通的马赛克样式,组件内提供了10种带图案的马赛克样式,以后持续更新

">
<vm-img pattern="m1" >
      <img src="./images/imei.webp"/>
vm-img>

ja8OOI.jpg

几句吐槽:最初的设想是通过 来使用我的插件。不过期间遇到两个问题:

  • vue-cli编译时使用require()来解析相对路经。当我们从A组件发送url到B组件,相对路经会被原样输出。即使将相对路经写进require(),require必须使用静态的字符串,不能使用变量,**因为require是编译时执行的,而非运行时执行!**最终导致想法不得实现。
  • 只有同源图片可以使用马赛克效果,根据 HTML5 规范,浏览器在解析getImageData()方法时会阻止获取跨浏览器的图片。
  • flag:近期会想办法解决 (:зゝ∠)

懒加载

组件支持使用 vue-lazyload 来进行图片懒加载。

$ npm i vue-lazyload -S
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import mosaic from '@kidoki/vue-mosaic'
import VueLazyload from 'vue-lazyload'

createApp(App).use(store).use(router).use(mosaic).use(VueLazyload).mount('#app')
">
<vm-img>
       <img v-lazy=" `./images/imei.webp` " >
vm-img>

Authors && Contributors

License

MIT license

GitHub

https://github.com/aiyedoki/vue-mosaic
You might also like...

💳 Adyen Payment Module for Nuxt.js

nuxt-adyen-module Adyen Module for Nuxt.js 📖 Release Notes Setup Add nuxt-adyen-module dependency to your project yarn add nuxt-adyen-module # or npm

Dec 21, 2021

TS-VIS is a Python module for deep learning visualization.

TS-VIS is a Python module for deep learning visualization.

TS-VIS(Tianshu Visualization) is a visualization tool kit of Tianshu AI Platform. , which support visualization of the most popular deep learning frameworks, such as TensorFlow, PyTorch, OneFlow, etc.

Jul 1, 2022

A platform where users can sell and buy new as well as old/used products. Made using Golang, Gorilla Mux, SQLite and Vue.js

A platform where users can sell and buy new as well as old/used products. Made using Golang, Gorilla Mux, SQLite and Vue.js

A platform where users can sell and buy new as well as old/used products. Made using Golang, Gorilla Mux, SQLite and Vue.js

Oct 6, 2021

vue components that can be used in js apps

vue components that can be used in js apps

phila-vue-comps (@phila/vue-comps in npmjs.com) phila-vue-comps is a library of Vue components that can be used in apps which use Vue.js and Vuex. It

Mar 10, 2022

Library of shared components to be re-used in Vue.js

Library of shared components to be re-used in Vue.js Storybook There's a CI/CD integration running using vercel.com @ https://ripe-components-vue-now.

May 20, 2022

A simple Vue-based app that can be used to fill out a Variety List, optionally connects to vglist.

vglist Variety Generator Based on an image that floated around social media, where people would share an image with a list of 100 game series' and fil

May 31, 2022

Updated content available! We learned a lot since we originally wrote this article. We now have this updated for Laravel 8, Vue, and NuxtJS 👉 https://srvrsi.de/book

This repository is no longer active, BUT you can still get access to the latest code We will leave this repostiory in read-only because a lot of Dan's

Apr 28, 2022

OSL is a simple shared list web-application based on Node. Typical uses include shopping lists of course, and any other small todo-list that needs to be used collaboratively.

OSL is a simple shared list web-application based on Node. Typical uses include shopping lists of course, and any other small todo-list that needs to be used collaboratively.

Our Shopping List OSL is a simple shared list application. Typical uses include shopping lists of course, and any other small todo-list that needs to

Jun 14, 2022
A vue application which provides read-only function without authentication or post module
A vue application which provides read-only function without authentication or post module

Elog mobile Elog mobile web pages developed and deployed at CSNS (China Spallation Neutron Source), it is a lightweight web application which provides

Jun 6, 2022
Named Entity Recognition (NER) Annotation tool for SpaCy. Generates Traning Data as a JSON which can be readily used.
Named Entity Recognition (NER) Annotation tool for SpaCy. Generates Traning Data as a JSON which can be readily used.

NER Annotator for Spacy Starting the application Install the dependencies and start the Python Backend server python -m venv env source env/bin/activa

Aug 11, 2022
The front-end is organized into VueJS components, which present information on the screen according to the reactivity triggered by user interactions
The front-end is organized into VueJS components, which present information on the screen according to the reactivity triggered by user interactions

The front-end is organized into VueJS components, which present information on the screen according to the reactivity triggered by user interactions

Jun 8, 2022
convert CSV, TSV to/from JSON.

ExcelJSON ExcelJSON is a tool to convert CSV, TSV to/from JSON. The tool uses Filereader api for reading uploaded files (no server side upload) and mo

Jun 22, 2022
Crypto News allows you to convert cryptocurrencies, view latest news and exchange rates for each ICO – all the data from the world of cryptocurrencies in one place.
Crypto News allows you to convert cryptocurrencies, view latest news and exchange rates for each ICO – all the data from the world of cryptocurrencies in one place.

Crypto News Crypto News allows you to convert cryptocurrencies, view latest news and exchange rates for each ICO – all the data from the world of cryp

May 12, 2022
An elegant way to convert quantities between different units.

convert-units A handy utility for converting between quantities in different units. Installation npm install convert-units --save # beta builds are al

Aug 1, 2022
WordPress module for Vue.js, PWA ready, with full support for Vuex Store, Vue Router, Vue SSR and Nuxt.js.

WordPress module for Vue.js, PWA ready, with full support for Vuex Store, Vue Router, Vue SSR and Nuxt.js.

Apr 9, 2022
The frontend service for developer module of EdgeGallery platform

developer-fe Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Ru

Jan 11, 2022
The frontend service for user management module of EdgeGallery platform.

user_management Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

Jan 5, 2022
The frontend service for appstore module of EdgeGallery platform

appstore-fe Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Run

Jan 10, 2022