Skip to content

Commit

Permalink
implemented ImagePixelated component
Browse files Browse the repository at this point in the history
  • Loading branch information
tonynguyenit18 committed Mar 11, 2021
1 parent 7d43cbd commit e7ca87c
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 67 deletions.
3 changes: 0 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"version": "1.0.0",
"description": "React library to pixelate images or elements",
"main": "build/index.js",
"module": "build/index.es.js",
"scripts": {
"build": "rollup -c",
"lint": "standard",
Expand All @@ -18,8 +17,6 @@
"@types/react-dom": "^16.9.8",
"jest": "^26.4.2",
"prettier": "^2.1.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"rollup": "^2.26.11",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
Expand Down
39 changes: 14 additions & 25 deletions rollup.config.js
Original file line number Diff line number Diff line change
@@ -1,45 +1,34 @@
import typescript from "rollup-plugin-typescript2";
import commonjs from "rollup-plugin-commonjs";
import external from "rollup-plugin-peer-deps-external";
import resolve from "rollup-plugin-node-resolve";
import typescript from "rollup-plugin-typescript2"
import commonjs from "rollup-plugin-commonjs"
import external from "rollup-plugin-peer-deps-external"
import resolve from "rollup-plugin-node-resolve"

import pkg from "./package.json";
import pkg from "./package.json"

export default {
input: "src/index.ts",
output: [
{
file: pkg.main,
format: "cjs",
exports: "named",
sourcemap: true,
},
{
file: pkg.module,
format: "es",
exports: "named",
sourcemap: true,
},
exports: "named"
}
],
plugins: [
external(),
resolve(),
typescript({
rollupCommonJSResolveHack: true,
exclude: ["**/__tests__/**"],
clean: true,
clean: true
}),
commonjs({
include: ["node_modules/**"],
namedExports: {
"node_modules/react/react.js": [
"Children",
"Component",
"PropTypes",
"createElement",
],
"node_modules/react-dom/index.js": ["render"],
},
}),
"node_modules/react/react.js": ["Children", "Component", "PropTypes", "createElement"],
"node_modules/react-dom/index.js": ["render"]
}
})
],
};
external: ["react", "react-dom"]
}
14 changes: 4 additions & 10 deletions src/ImagePixelated/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const ImagePixelated = ({
src,
width,
height,
pixelSize = 1,
pixelSize = 5,
centered,
fillTransparencyColor
}: ImagePixelatedProps) => {
Expand All @@ -32,15 +32,14 @@ export const ImagePixelated = ({
src,
width,
height,
pixelSize = 1,
pixelSize,
centered,
fillTransparencyColor
}: ImagePixelatedProps) => {
// create img that will be later painted into the canvas
let img = new Image()
img.crossOrigin = "anonymous"
img.src = src
// once image is loaded..

img.onload = () => {
const canvas: HTMLCanvasElement = canvasRef?.current
if (canvas) {
Expand All @@ -49,8 +48,7 @@ export const ImagePixelated = ({
img.height = height ? height : img.height
canvas.width = img.width
canvas.height = img.height
// we paint the image into the canvas
// this is needed to get RGBA info out of each pixel

ctx.drawImage(img, 0, 0, img.width, img.height)
paintPixels(ctx, img, pixelSize, centered, fillTransparencyColor)
img = undefined
Expand Down Expand Up @@ -78,10 +76,6 @@ export const ImagePixelated = ({
}

const rgba = ctx.getImageData(xColorPick, yColorPick, 1, 1).data
// TODO: add support for png transparent background
// need to create another canvas and duplicate process?
// one canvas to get the data from
// one to paint pixels into
ctx.fillStyle =
rgba[3] === 0
? fillTransparencyColor
Expand Down
31 changes: 2 additions & 29 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -3665,7 +3665,7 @@ lodash@^4.0.0, lodash@^4.17.14, lodash@^4.17.19, lodash@^4.3.0:
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==

loose-envify@^1.1.0, loose-envify@^1.4.0:
loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
Expand Down Expand Up @@ -4379,7 +4379,7 @@ prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.4"

prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
Expand Down Expand Up @@ -4411,30 +4411,11 @@ qs@~6.5.2:
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==

react-dom@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"
scheduler "^0.19.1"

react-is@^16.12.0, react-is@^16.8.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

react@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"

read-pkg-up@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
Expand Down Expand Up @@ -4843,14 +4824,6 @@ saxes@^5.0.0:
dependencies:
xmlchars "^2.2.0"

scheduler@^0.19.1:
version "0.19.1"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"

"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0:
version "5.7.1"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
Expand Down

0 comments on commit e7ca87c

Please sign in to comment.