@lichin/pico

An experimental photo editor
library for the web.

Get started

Quick start

npm install @lichin/pico

import React, { useEffect } from "react";
import { pico } from "./pico";
import "./styles.css";

export default function App() {
  const handleRotate = deg => {
    const elm = document.querySelector("#canvas");
    pico(elm, {
      rotate: deg
    });
  };
  useEffect(() => {
    let c = document.getElementById("canvas");
    let ctx = c.getContext("2d");
    let img = document.getElementById("source");
    img.onload = () => {
      ctx.drawImage(img, 0, 0, 800, 600);
    };
  }, []);
  return (
    <div className="App">
      <div className="btns">
        <div className="btn rotate-90-pos" onClick={() => handleRotate(-90)}>
          rotate -90deg
        </div>
        <div className="btn rotate-90-neg" onClick={() => handleRotate(90)}>
          rotate 90deg
        </div>
      </div>

      <div className="board">
        <canvas id="canvas" width="800" height="600" />
      </div>
      <div className="board hide">
        <img
          id="source"
          crossOrigin="Anonymous"
          src="https://miro.medium.com/max/1400/1*UktO9Cqfa_M7gv3syxCjRg.jpeg"
          alt="doggy"
        />
      </div>
    </div>
  );
}

Demo

you can play with it through codesandbox example

Docs

Pico API
Animate function contain two parameter:

Prop	Type	Default	Description
element	HTMLElement Object	-	Single HTMLElement CANVAS Object
options	Object	{}	Please see next object description for the details

options object contain several keys (In progress):

Key	Type	Default	Description
rotate	Number	-	The value that the element should rotate

License

Pico is MIT licensed.