# vue-picture-master

> > medium-like picture by default, canvas power if you need

Latest version **0.0.2** (published 2019-05-31) · 0 weekly downloads

## Install

```sh
npm install vue-picture-master
pnpm add vue-picture-master
yarn add vue-picture-master
bun add vue-picture-master
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2019-05-31 |
| First published | 2019-05-31 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 984.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | marco-gatto-boffo |

## Links

- npm: https://www.npmjs.com/package/vue-picture-master
- npm.io page: https://npm.io/package/vue-picture-master

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [core-js](https://npm.io/package/core-js.md) ^2.6.5

## Recent versions

- 0.0.2 (latest) — 2019-05-31

## README

# vue-picture-master

> medium-like picture by default, canvas power if you need

## Install

### npm

```sh
npm i vue-picture-master
```

### Vue

```js
import { PictureMaster, helpers } from 'vue-picture-master'

export default {
  components: {
    PictureMaster
  }
}
```

## Usage

### template

```html
<template>
  <PictureMaster
    :placeholder="placeholder"
    :cuts="cuts"
    :base-image="baseImage"
    :height-ratio="0.75"
    :custom-canvas="false"
    :animated="true"
    :blurred="true"
    :force-loading-delay="750"
    @load="onLoad" />
</template>
```

### props

```js
// very little placeholder (width: 40px, height: 30px most likely)
const placeholder = {
  src: 'https://placekitten.com/40/30',
  alt: 'kitten-placeholder'
}

// complete sources array, we get it from helpers
const cuts = helpers.builder(({ src, width }) => `https://placekitten.com/${width}/${Math.round(width * 0.75)}`)
  ({
    types: [
      'image/webp',
      'image/jpeg'
    ]
  })

// the tiniest image you want to display
const baseImage = {
  srcset: 'https://placekitten.com/400/300 1x, https://placekitten.com/800/600 2x,',
  alt: 'alt text'
}

// height ratio compared to width (height / width), we get it from helpers
const heightRatio = helpers.heightRatio(width)(height)

// default false, true if you want to have a clean <canvas></canvas> instead of the tiny placeholder
const customCanvas = false

// default true, set to false if you don't want the default transition time
const animated = true

// default true, set to false if you don't want the default medium-like blur-out animation
const blurred = true

// default 750ms, if something goes wrong with the plugin (iPhone 6), this forces the image load after some time
const forceLoadingDelay = 750
```

### methods

```js
// get the created inner canvas so you can play with it, get it after the component mount
const canvas = component.getCanvas()

// now you can use the canvas, try it with PIXI or THREEJS
```

### events

- `@load="src => {}"`

called when the picture is fully loaded
callbacks with the loaded image src

### helpers

```js
helpers.builder()

// gets the height ratio
const width = 400
const height = 300

helpers.heightRatio(width)(height) // -> 0.75
```

---
_Source: https://npm.io/package/vue-picture-master · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._