Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@lichin/pico

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lichin/pico - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

2

package.json
{
"name": "@lichin/pico",
"version": "0.2.0",
"version": "0.2.1",
"description": "Photo Editor helper",

@@ -5,0 +5,0 @@ "license": "MIT",

@@ -19,3 +19,3 @@ [![npm(scoped)](https://img.shields.io/npm/v/@lichin/pico.svg)](https://github.com/lichin-lin/pico)

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

@@ -41,4 +41,4 @@

<div className="btns">
<div className="btn rotate-45-pos" onClick={() => handleRotate(-45)}>
rotate -45deg
<div className="btn rotate-90-pos" onClick={() => handleRotate(-90)}>
rotate -90deg
</div>

@@ -76,5 +76,4 @@ <div className="btn rotate-90-neg" onClick={() => handleRotate(90)}>

| options | Object | {} | Please see next object description for the details |
| source | HTMLElement Object | - | Single HTMLElement `IMG` Object |
options object contain serverl keys (In progress):
options object contain several keys (In progress):
| Key | Type | Default | Description |

@@ -81,0 +80,0 @@ | -------- | -------- | -------- | ---------------------------------------------------- |

@@ -1,2 +0,7 @@

export const pico = (elm, options, source) => {
/**
*
* @param {HTMLElement} elm canvas
* @param {object} options transform properties
*/
export const pico = (elm, options) => {
if (!(elm instanceof HTMLElement) || elm.tagName !== "CANVAS") {

@@ -14,7 +19,18 @@ throw new Error("Element for Pico should be a canvas");

let ctx = elm.getContext("2d");
ctx.clearRect(0, 0, width, height);
ctx.translate(width / 2, height / 2);
ctx.rotate((value * Math.PI) / 180);
ctx.translate(-width / 2, -height / 2);
ctx.drawImage(source, 0, 0, width, height);
// create a temp
const tempCanvas = document.createElement("canvas");
tempCanvas.width = height;
tempCanvas.height = width;
const tempCtx = tempCanvas.getContext("2d");
tempCtx.clearRect(0, 0, width, height);
tempCtx.translate(height / 2, width / 2);
tempCtx.rotate((value * Math.PI) / 180);
tempCtx.translate(-width / 2, -height / 2);
tempCtx.drawImage(elm, 0, 0);
// render on original
elm.height = width;
elm.width = height;
ctx.drawImage(tempCanvas, 0, 0);
break;

@@ -21,0 +37,0 @@ default:

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc