React component to blur image backgrounds using canvas.

Javier Bórquez

Last update: Sep 27, 2022

Related tags

Overview

React Blur

React component for creating blurred backgrounds using canvas.

Live demo

Installation

npm install react-blur --save

Usage

var Blur = require('react-blur');

Example

<Blur img='/directory/img.jpg' blurRadius={5} enableStyles>
  The content.
</Blur>

For a complete example see the code in the demo branch.

Props

img: The image path.
blurRadius: Optional. The size of the blur radius.
enableStyles: Optional. Flag to include base styles inline, omit this to easily override.
shouldResize: Optional. If the canvas should re-render on resize? Defaults to true.
resizeInterval: Optional. How fast the canvas should re-render on resize? Defaults to 128ms.

Contributing

Please install yarn and use it to manage dependencies and the lockfile.

Thanks to Quasimodo for the original stack blur algorithm.

Comments

Why not just use dynamic CSS filters?

filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: url(#blur);

http://blog.gospodarets.com/css-filters/?src=http://malyw.github.io https://github.com/Schepp/CSS-Filters-Polyfill http://caniuse.com/#feat=css-filters

opened by gsans 7
Small issues, cleanup, add onLoadFunction prop for hook into the blur loading
Fix gitignore for MAC

Fix undeclared vars

add onLoadFunction prop for hook into the blur loading.

make sure changing src keeps correct blurRadius

Do not reload image if the img src prop is relative (because it won't match this.img.src which is absolute)
opened by iamJoeTaylor 4

Cannot resolve module 'react-addons-pure-render-mixin'

ERROR in ./~/react-blur/dist/blur.js
Module not found: Error: Cannot resolve module 'react-addons-pure-render-mixin' in /Users/../node_modules/react-blur/dist
 @ ./~/react-blur/dist/blur.js 9:22-63

I think your component isn't compatible with new versions of React. Can you update it or guide me to fix it ?

opened by bogas04 3

make styles inline?

Seems crazy to have to include a css file for 3 attributes that could be easily inlined

https://github.com/javierbyte/react-blur/blob/master/src/blur.less

opened by yocontra 2
componentWillReceiveProps should not re-blur image unless props changed
Hi javierbyte,

componentWillReceiveProps(nextProps) { stackBlurImage(this.img, this.canvas, nextProps.blurRadius, this.width, this.height); },

This is quite a waste, as you don't check if the props actually change. Perhaps this should be done in componentWillUpdate - or just check if the props changed?
opened by mull 2
Extra code?

Hi- Might be misreading the code, but it appears that you're always passing blurAlphaChannel->true. Therefore the whole stackBlurCanvasRGB (200+ lines) is never called?

opened by winkler1 2
Bump js-yaml from 3.9.0 to 4.1.0
Bumps js-yaml from 3.9.0 to 4.1.0.

Changelog

Sourced from js-yaml's changelog.

[4.1.0] - 2021-04-15

Added

Types are now exported as yaml.types.XXX.

Every type now has options property with original arguments kept as they were (see yaml.types.int.options as an example).

Changed

Schema.extend() now keeps old type order in case of conflicts (e.g. Schema.extend([ a, b, c ]).extend([ b, a, d ]) is now ordered as abcd instead of cbad).

[4.0.0] - 2021-01-03

Changed

Check migration guide to see details for all breaking changes.

Breaking: "unsafe" tags !!js/function, !!js/regexp, !!js/undefined are moved to js-yaml-js-types package.

Breaking: removed safe* functions. Use load, loadAll, dump instead which are all now safe by default.

yaml.DEFAULT_SAFE_SCHEMA and yaml.DEFAULT_FULL_SCHEMA are removed, use yaml.DEFAULT_SCHEMA instead.

yaml.Schema.create(schema, tags) is removed, use schema.extend(tags) instead.

!!binary now always mapped to Uint8Array on load.

Reduced nesting of /lib folder.

Parse numbers according to YAML 1.2 instead of YAML 1.1 (01234 is now decimal, 0o1234 is octal, 1:23 is parsed as string instead of base60).

dump() no longer quotes :, [, ], (, ) except when necessary, #470, #557.

Line and column in exceptions are now formatted as (X:Y) instead of at line X, column Y (also present in compact format), #332.

Code snippet created in exceptions now contains multiple lines with line numbers.

dump() now serializes undefined as null in collections and removes keys with undefined in mappings, #571.

dump() with skipInvalid=true now serializes invalid items in collections as null.

Custom tags starting with ! are now dumped as !tag instead of !<!tag>, #576.

Custom tags starting with tag:yaml.org,2002: are now shorthanded using !!, #258.

Added

Added .mjs (es modules) support.

Added quotingType and forceQuotes options for dumper to configure string literal style, #290, #529.

Added styles: { '!!null': 'empty' } option for dumper (serializes { foo: null } as "foo: "), #570.

Added replacer option (similar to option in JSON.stringify), #339.

Custom Tag can now handle all tags or multiple tags with the same prefix, #385.

Fixed

Astral characters are no longer encoded by dump(), #587.

"duplicate mapping key" exception now points at the correct column, #452.

Extra commas in flow collections (e.g. [foo,,bar]) now throw an exception instead of producing null, #321.

__proto__ key no longer overrides object prototype, #164.

... (truncated)

Commits

2cef47b 4.1.0 released

810b149 dist rebuild

2b5620e Export built-in types, type override now preserves order

ab31bba doc: clarify lineWidth dump options (#612)

ee74ce4 4.0.0 released

a44bb7c dist rebuild

aee620a Throw an error if block sequence/mapping indent contains a tab

f0f205b Fix parsing of invalid block mappings

e8cf6f6 Fix error with anchor not being assigned to an empty node

a583097 Shorthand tags with !! whenever possible

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Bump js-yaml from 3.9.0 to 3.14.1
Bumps js-yaml from 3.9.0 to 3.14.1.

Changelog

Sourced from js-yaml's changelog.

[3.14.1] - 2020-12-07

Security

Fix possible code execution in (already unsafe) .load() (in &anchor).

[3.14.0] - 2020-05-22

Changed

Support safe/loadAll(input, options) variant of call.

CI: drop outdated nodejs versions.

Dev deps bump.

Fixed

Quote = in plain scalars #519.

Check the node type for !<?> tag in case user manually specifies it.

Verify that there are no null-bytes in input.

Fix wrong quote position when writing condensed flow, #526.

[3.13.1] - 2019-04-05

Security

Fix possible code execution in (already unsafe) .load(), #480.

[3.13.0] - 2019-03-20

Security

Security fix: safeLoad() can hang when arrays with nested refs used as key. Now throws exception for nested arrays. #475.

[3.12.2] - 2019-02-26

Fixed

Fix noArrayIndent option for root level, #468.

[3.12.1] - 2019-01-05

Added

Added noArrayIndent option, #432.

[3.12.0] - 2018-06-02

Changed

Support arrow functions without a block statement, #421.

[3.11.0] - 2018-03-05

Added

Add arrow functions suport for !!js/function.

Fixed

Fix dump in bin/octal/hex formats for negative integers, #399.

... (truncated)

Commits

37caaad 3.14.1 released

094c0f7 dist rebuild

9586ebe Avoid calling hasOwnProperty of user-controlled objects

34e5072 3.14.0 released

7b25c83 Browser files rebuild

6f73473 Dev deps bump

0c29349 Travis-CI: drop old nodejs versions

10be97e fix(loader): Add support for safe/loadAll(input, options)

d6983dd Fix issue #526: wrong quote position writing condensed flow (#527)

93fbf7d fix issue 526 (wrong quote position writing condensed flow)

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Bump ini from 1.3.4 to 1.3.8
Bumps ini from 1.3.4 to 1.3.8.

Commits

a2c5da8 1.3.8

af5c6bb Do not use Object.create(null)

8b648a1 don't test where our devdeps don't even work

c74c8af 1.3.7

024b8b5 update deps, add linting

032fbaf Use Object.create(null) to avoid default object property hazards

2da9039 1.3.6

cfea636 better git push script, before publish instead of after

56d2805 do not allow invalid hazardous string as section name

738eca5 v1.3.5

Additional commits viewable in compare view

Maintainer changes

This version was pushed to npm by isaacs, a new releaser for ini since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Bump lodash from 4.17.4 to 4.17.21
Bumps lodash from 4.17.4 to 4.17.21.

Commits

f299b52 Bump to v4.17.21

c4847eb Improve performance of toNumber, trim and trimEnd on large input strings

3469357 Prevent command injection through _.template's variable option

ded9bc6 Bump to v4.17.20.

63150ef Documentation fixes.

00f0f62 test.js: Remove trailing comma.

846e434 Temporarily use a custom fork of lodash-cli.

5d046f3 Re-enable Travis tests on 4.17 branch.

aa816b3 Remove /npm-package.

d7fbc52 Bump to v4.17.19

Additional commits viewable in compare view

Maintainer changes

This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Bump ini from 1.3.4 to 1.3.7
Bumps ini from 1.3.4 to 1.3.7.

Commits

c74c8af 1.3.7

024b8b5 update deps, add linting

032fbaf Use Object.create(null) to avoid default object property hazards

2da9039 1.3.6

cfea636 better git push script, before publish instead of after

56d2805 do not allow invalid hazardous string as section name

738eca5 v1.3.5

da3e2c4 ignore coverage

9868eb4 package lock

6d8b7c8 auto-publish scripts

Additional commits viewable in compare view

Maintainer changes

This version was pushed to npm by isaacs, a new releaser for ini since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1

Canvas to match Parent width / height

<div style={width: 900px}>
    <Blur style={{width: "100%"}} img={url}></Blur>
</div>

<div style={width: 500px}>
    <Blur style={{width: "100%"}} img={url}></Blur>
</div>

<div style={width: 300px}>
    <Blur style={{width: "100%"}} img={url}></Blur>
</div>

<div style={width: 100px}>
    <Blur style={{width: "100%"}} img={url}></Blur>
</div>
Error:
StackBlur.js:83 Uncaught Error: unable to access image data: IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source height is 0.

opened by Howl0s 1

Releases(0.3.0)

0.3.0(Jan 29, 2016)

Source code(tar.gz)
Source code(zip)
0.2.4(Aug 10, 2015)

Source code(tar.gz)
Source code(zip)
0.2.0(May 9, 2015)

Source code(tar.gz)
Source code(zip)

Owner

Javier Bórquez

I want to become stronger.

GitHub https://javier.xyz/react-blur/

Image Sharing Social Media App Built Using React

ShareMe Social Media Application Introduction This is a code repository for the

1.3k Jan 3, 2023

Inteliver React SDK. Inteliver is an image management as a service.

This repository is Inteliver's official SDK for react framework. Using this SDK you can integrate your react project with inteliver image management service.

2 Sep 8, 2022

An app designed to connect customers with translators in realtime, with translations provided through image, chat and live video calls.

Transl8r About the Project Transl8r is an app designed to connect people and translators to provide fast, effective translations via live chat, video

8 Oct 27, 2022

A ReactJS to-do-list website with image uploading features integrated with Firebase User Authentication and Firestore Database.

To Do List App (React) This project is hosted on https://todolist-app.xyz/ A responsive to-do-list website with image uploading features integrated wi

1 Jan 3, 2022

Augmented reality using React component

React example with MindAR AR project using React and MindAR The react component is inside src/MindARViewer. Everything else are created from create-re

4 Jun 11, 2021

The VFX UI using react, typescript and UI Component material-ui

2 Sep 18, 2022

A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.

Sandpack Sandpack is a component toolkit for creating your own live running code editing experience powered by CodeSandbox. Learn more about Sandpack

2.9k Dec 27, 2022

A drum machine built with React using the Create React App toolchain.

drum-machine A simple drum machine built with React using the Create React App toolchain. Getting Started Clone or download the repository. Open a com

1 Dec 30, 2021

Calculator-in-react - Calculator made in React.JS using Hooks as useReducer

3 Mar 9, 2022

A simple blog- Using React, Router v6, Tailwind, React-hook-form and more packages.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

4 Dec 28, 2022

An example using universal client/server routing and data in React with AWS DynamoDB

react-server-routing-example A simple (no compile) example of how to do universal server/browser rendering, routing and data fetching with React and A

299 Dec 14, 2022

Personal portfolio website of theme Ubuntu 20.04, made using React.js & tailwind CSS

2.7k Jan 9, 2023

A set of components using React Aria and Tailwind

React Aria Tailwind A set of components using React Aria and Tailwind. Very early WIP. Why? React Aria is a low level library of React Hooks that help

17 Dec 26, 2022

React implementation of the service locator pattern using Hooks, Context API, and Inversify.

React Service Locator An implementation of the service locator pattern for React 16.13+ using Hooks, Context API, and Inversify. Features Service cont

22 Oct 10, 2022

A demo of a Shopify site using Astro and React.

Shopify + Astro + React A demo of a Shopify site using Astro and React. Commands All commands are run from the root of the project, from a terminal: C

98 Jan 8, 2023

This is the FARM Stack course, where you are going to learn how to build an application from scratch using FASTAPI, React and mongoDB

120 Dec 22, 2022

React component to blur image backgrounds using canvas.

Related tags

Overview

Installation

Usage

Example

Props

Contributing

Comments

[4.1.0] - 2021-04-15

Added

Changed

[4.0.0] - 2021-01-03

Changed

Added

Fixed

[3.14.1] - 2020-12-07

Security

[3.14.0] - 2020-05-22

Changed

Fixed

[3.13.1] - 2019-04-05

Security

[3.13.0] - 2019-03-20

Security

[3.12.2] - 2019-02-26

Fixed

[3.12.1] - 2019-01-05

Added

[3.12.0] - 2018-06-02

Changed

[3.11.0] - 2018-03-05

Added

Fixed

Releases(0.3.0)

0.3.0(Jan 29, 2016)

0.2.4(Aug 10, 2015)

0.2.0(May 9, 2015)

Owner

Javier Bórquez

Image Sharing Social Media App Built Using React

Inteliver React SDK. Inteliver is an image management as a service.

An app designed to connect customers with translators in realtime, with translations provided through image, chat and live video calls.

A ReactJS to-do-list website with image uploading features integrated with Firebase User Authentication and Firestore Database.

Augmented reality using React component

The VFX UI using react, typescript and UI Component material-ui

A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.

A drum machine built with React using the Create React App toolchain.

Calculator-in-react - Calculator made in React.JS using Hooks as useReducer

A simple blog- Using React, Router v6, Tailwind, React-hook-form and more packages.

An example using universal client/server routing and data in React with AWS DynamoDB

Personal portfolio website of theme Ubuntu 20.04, made using React.js & tailwind CSS

A set of components using React Aria and Tailwind

React implementation of the service locator pattern using Hooks, Context API, and Inversify.

A demo of a Shopify site using Astro and React.

This is the FARM Stack course, where you are going to learn how to build an application from scratch using FASTAPI, React and mongoDB

Tutorial for using react query and supabase

A real estate website built using React and Redux for State Management

A library that makes using pdfjs in react projects easy.