open-index/open-npm huggingface dataset:
npm package: @larscom/image-data
Description: create ImageData object from URL or ArrayBuffer without creating a canvas (using wasm)
Author: Lars Kniep
Latest version: 0.2.0

# @larscom/image-data

[![npm-version](https://img.shields.io/npm/v/@larscom/image-data.svg?label=npm)](https://www.npmjs.com/package/@larscom/image-data)
![npm](https://img.shields.io/npm/dw/@larscom/image-data)
[![license](https://img.shields.io/npm/l/@larscom/image-data.svg)](https://github.com/larscom/image-data/blob/main/LICENSE)

Easily construct an `Image` object from a URL or ArrayBuffer. An `Image` object contains the width and height of the image and an `ImageData` object as well as the channels (RGBA). It uses `WASM` to construct such an object.

## Installation

```bash
npm install @larscom/image-data
```

## Usage

Import the `load_from_url` function to construct an `Image` object.

```ts
import { load_from_url } from '@larscom/image-data'

const imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png'

const image = await load_from_url(imageUrl)

const canvas = document.getElementById('canvas')

canvas.width = image.width
canvas.height = image.height

const ctx = canvas.getContext('2d')

// use the ImageData object
ctx.putImageData(image.data, 0, 0)
```

```ts
interface Image {
  width: number
  height: number
  data: ImageData
  // RGBA
  channels: Uint8Array<ArrayBuffer>
}
```

## Vite

When using a build tool such as [vite](https://github.com/vitejs/vite) you need additional configuration as it doesn't serve \*.wasm files by default (see examples folder for a `vite-react-ts` project)

> add `exclude` option to `optimizeDeps` to `vite.config.ts`

```ts
export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ['@larscom/image-data']
  }
})
```

## Colors (HEX)

Convert each individual pixel to a HEX color code.

```ts
import { load_from_url, convert_to_hex_colors } from '@larscom/image-data'

const imageUrl = 'https://example.com/image.png'
const image = await load_from_url(imageUrl)

const colors = convert_to_hex_colors(image.channels)

console.log(colors) // ["#FF5733", "#33C1FF", "#28A745", ...]
```

## Colors (RGBA)

Decode the raw channel data into an array of pixels (RGBA)

```ts
import { load_from_url, decode_to_rgba } from '@larscom/image-data'

const imageUrl = 'https://example.com/image.png'
const image = await load_from_url(imageUrl)

const pixels = decode_to_rgba(image.channels)

console.log(pixels)
// [
//  { r: 255, g: 0,   b: 0,   a: 255 },
//  { r: 0,   g: 255, b: 0,   a: 128 },
//  { r: 0,   g: 0,   b: 255, a: 64  },
//  ...
// ]
```

## Supported formats

| Format   | Supported |
| -------- | --------- |
| JPEG     | ✅        |
| PNG      | ✅        |
| BMP      | ✅        |
| DDS      | ✅        |
| FARBFELD | ✅        |
| GIF      | ✅        |
| HDR      | ✅        |
| ICO      | ✅        |
| EXR      | ✅        |
| PNM      | ✅        |
| QOI      | ✅        |
| TGA      | ✅        |
| TIFF     | ✅        |
| WEBP     | ✅        |
| AVIF     | ❌        |
| SVG      | ❌        |
npm package: @larscom/ng-chrome-extension
Description: CLI to generate angular chrome extensions
Author: Lars Kniep
Latest version: 3.2.4

# @larscom/ng-chrome-extension

[![npm-release](https://img.shields.io/npm/v/@larscom/ng-chrome-extension.svg?label=npm)](https://www.npmjs.com/package/@larscom/ng-chrome-extension)
![npm](https://img.shields.io/npm/dt/@larscom/ng-chrome-extension)

> Easily create `Angular` Chrome Extensions (manifest v3)

The following scenarios are supported:

- Popup &#10003;
- New Tab &#10003;
- Options &#10003;
- Side Panel &#10003;
- Service Worker &#10003;
- Content Page &#10003;

## Disclaimer

This CLI tool should work on Linux/macOS, it is not tested on Windows.

## How to install

```bash
npm install -g @larscom/ng-chrome-extension
```

## Start creating a new project

```bash
ng-chrome new
```

![alt text](https://snipboard.io/OYcNzx.jpg 'ng-chrome CLI')

## How to use/develop

- change directory to your newly created project
- run `npm run start`
- goto: `chrome://extensions` in the browser and enable `'developer mode'`
- press `Load unpacked` and target the folder `angular/dist`

The project is automatically being watched, any changes to the files will recompile the project.

**NOTE**: changes to the **content page** and **service worker** scripts requires you to reload the extension in `chrome://extensions`

![alt text](https://snipboard.io/KToCI3.jpg 'Angular Chrome Popup')
![alt text](https://snipboard.io/VYfGoD.jpg 'Angular Chrome Tab')

## Build/package for production

- update version number inside `./angular/src/manifest.json`
- run `npm run build:production`
- upload `extension-build.zip` to the chrome webstore.

This will run a production build and will automatically zip it as a extension package in the root folder named: `extension-build.zip`

## Debugging

Run: `npm start`

Go to: Developer tools (inspect popup) => Sources => webpack

You can find your source files (TypeScript) over there.

## Upgrade Angular

After you have created a new project with `ng-chrome` and you want to update angular.

Just follow the regular upgrade guide of angular. See: https://update.angular.io/

## Angular folder

This folder contains the angular source code.
Each feature (popup,options,tab,side-panel) lives inside its own standalone component and gets lazily loaded.

see: `./angular/src/app/modules`

## Chrome folder

This folder contains the content page/service worker scripts and has its own `package.json` to manage it's dependencies.
npm package: @larscom/ng-qrcode-svg
Description: Simple QR code generator (SVG only) for Angular
Author: Lars Kniep
Latest version: 3.0.0

# @larscom/ng-qrcode-svg

[![npm-version](https://img.shields.io/npm/v/@larscom/ng-qrcode-svg.svg?label=npm)](https://www.npmjs.com/package/@larscom/ng-qrcode-svg)
![npm](https://img.shields.io/npm/dw/@larscom/ng-qrcode-svg)
[![license](https://img.shields.io/npm/l/@larscom/ng-qrcode-svg.svg)](https://github.com/larscom/ng-qrcode-svg/blob/main/LICENSE)

> Simple QR code generator (SVG only) for Angular

![Demo GIF](https://github.com/larscom/ng-qrcode-svg/blob/main/.github/img/demo.gif)

## Installation

```bash
npm install @larscom/ng-qrcode-svg
```

## Usage

1. Import component `QrcodeSvgComponent`

```ts
import { NgModule } from '@angular/core'
import { QrcodeSvgComponent } from '@larscom/ng-qrcode-svg'

@NgModule({
  imports: [QrcodeSvgComponent]
})
export class MyModule {}
```

2. Use the `qrcode-svg` component which will render a QR code in SVG format

```html
<qrcode-svg value="hello world!"></qrcode-svg>
```

## Component Properties

| Name                                                    | Description                                               | Default   |
| ------------------------------------------------------- | --------------------------------------------------------- | --------- |
| @Input() value: string                                  | The value which need to be encoded                        | undefined |
| @Input() ecl: 'low' \| 'medium' \| 'quartile' \| 'high' | Error correction level                                    | medium    |
| @Input() borderSize: number                             | The padding between the edge and the QR code (quiet zone) | 2         |
| @Input() size: string \| number                         | The size of the QR code SVG (css format)                  | 250px     |
| @Input() backgroundColor: string                        | The 'path' color (background)                             | #FFFFFF   |
| @Input() foregroundColor: string                        | The 'rect' color (foreground)                             | #000000   |
| @Input() alt: string \| undefined                       | HTML alt attribute                                        | undefined |
| @Input() ariaLabel: string \| undefined                 | HTML aria-label attribute                                 | undefined |
npm package: @larsdol/frontend-challenge-april-2021
Description: DN Front-end challenge - April 2021
Author: Lars Dol
Latest version: 2.0.0

# DN Front-end Challenge April 2021, by Lars Dol

Hello! This package contains the code for our April 2021 Front-end challenge hosted by Digital Natives.

[Check out the codepen.](https://codepen.io/LarsDol/pen/VwPpNpq)

## Questions & contributing
For questions, contact Lars Dol at lars@digitalnatives.nl.