npmpackage.info

Gathering detailed insights and metrics for svelte-image-compare

Other packages similar to svelte-image-compare

svelte-compare-image

3.0.0

A Svelte component to compare two images with a slider to reveal one over the other

svelte-compare-image-slider

0.1.15

A simple interactive component for comparing two images

svelte-image-comparison

0.0.6

Svelte component to compare image or canvas elements.

svelte-image-compare

Simple Svelte component to compare two images using slider.

1.1.1

HTML

3.23 kB

11,328 2.6

Installations

npm install svelte-image-compare

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

12.4.0

NPM Version

6.9.0 Score

Supply Chain

91.3

Quality

75.2

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

1

Total

1

Closed

0

Issues

Open

2

Total

2

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 1 contributors

Languages

HTML

JavaScript

HTML (85.03%)

JavaScript (14.97%)

Developer

PaulMaly

Download Statistics

Total Downloads

11,328

Last Day

Last Week

Last Month

178

Last Year

2,360

GitHub Statistics

23 Stars

5 Commits

6 Forks

3 Watching

1 Branches

1 Contributors

Bundle Size

8.16 kB

Minified

3.23 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

1.1.1

Package Id

svelte-image-compare@1.1.1

Unpacked Size

45.09 kB

Size

9.19 kB

File Count

NPM Version

6.9.0

Node Version

12.4.0

Total Downloads

Cumulative downloads

Total Downloads

11,328

Last day

-33.3%

Compared to previous day

Last week

-55.1%

Compared to previous week

Last month

17.9%

178

Compared to previous month

Last year

-12.1%

2,360

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

eslint eslint-plugin-svelte3 rollup rollup-plugin-node-resolve rollup-plugin-svelte svelte

Versions

Image comparison slider for Svelte 3

Simple Svelte component to compare two images using slider.

preview

Features

Simple
Responsive (fit to the parent width)
Size difference between two images handled correctly. Element size determined by following two factors:
- width of the parent
- right image's aspect ratio

Install

1npm i svelte-image-compare --save

1yarn add svelte-image-compare

CDN: UNPKG | jsDelivr (available as window.ImageCompare)

Usage

1<ImageCompare 
2    before="//placehold.it/600x200/E8117F/FFFFFF"
3    after="//placehold.it/600x200/CCCCCC/FFFFFF"
4    contain={true}
5>
6	<span slot="before">BEFORE</span>
7	<span slot="after">AFTER</span>
8</ImageCompare>
9
10<script>
11    import ImageCompare from './ImageCompare.svelte';
12</script>

If you are not using using es6, instead of importing add

1<script src="/path/to/svelte-image-compare/index.js"></script>

just before closing body tag.

API

Props

Name	Type	Description	Required	Default
`before`	`String`	Path to the image image before change	Yes	`empty string`
`after`	`String`	Path to the image image after change	Yes	`empty string`
`offset`	`Number`	How far from the left the slider should be on load (between 0 and 1)	No	`0.5`
`contain`	`Boolean`	Determines if images are stretched to fill parent element. Can be used with help of CSS `object-fit: cover` to create full page image comparison	No	`false`
`overlay`	`Boolean`	Show overlay upon images	No	`true`
`hideOnSlide`	`Boolean`	Hide overlay & labels on sliding	No	`true`

Slots

before - element to be placed on top of before image (basically a label)
after - element to be placed on top of after image (basically a label)

License

MIT © PaulMaly

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Maintained

Determines if the project is "actively maintained".

0

SAST

Determines if the project uses static code analysis.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

License

Determines if the project has defined a license.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

Score

2.6

/10

Last Scanned on 2025-01-06

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More