How to use pica - 9 common examples

To help you get started, we’ve selected a few pica examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github AJInteractive / InterviewJS / packages / composer / src / partials / forms / IntervieweeForm.js View on Github external
offScreenImage.addEventListener("load", () => {
      const targetWidth = offScreenImage.width > 300 ? 300 : offScreenImage.width;
      const targetHeight = parseInt(targetWidth * offScreenImage.height / offScreenImage.width, 10);
      console.log(`${offScreenImage.width} x ${offScreenImage.height} => ${targetWidth} x ${targetHeight}`);

      const offScreenCanvas = document.createElement("canvas");
      offScreenCanvas.width = targetWidth;
      offScreenCanvas.height = targetHeight;

      const pica = Pica({ features: ["js", "wasm", "ww"] });
      pica
        .resize(offScreenImage, offScreenCanvas, {
          unsharpAmount: 80,
          unsharpRadius: 0.6,
          unsharpThreshold: 2,
          transferable: true,
        })
        .then(result => pica.toBlob(result, "image/jpeg", 0.9))
        .then(blob => {
          // const reader = new FileReader();
          // reader.onloadend = () => {
          //   console.log("data url length", reader.result.length);
          //   const base64data = reader.result.length > 3e6 ? "" : reader.result;
          //   this.setState({
          //     formData: { ...this.state.formData, avatar: base64data }
          //   });
github AJInteractive / InterviewJS / packages / composer / src / partials / panes / interviewee / ImagePane.js View on Github external
offScreenImage.addEventListener("load", () => {
        const targetWidth = offScreenImage.width > 600 ? 600 : offScreenImage.width;
        const targetHeight = parseInt(targetWidth * offScreenImage.height / offScreenImage.width, 10);
        console.log(`${offScreenImage.width} x ${offScreenImage.height} => ${targetWidth} x ${targetHeight}`);

        const offScreenCanvas = document.createElement("canvas");
        offScreenCanvas.width = targetWidth;
        offScreenCanvas.height = targetHeight;

        const pica = Pica({ features: ["js", "wasm", "ww"] });
        pica
          .resize(offScreenImage, offScreenCanvas, {
            unsharpAmount: 80,
            unsharpRadius: 0.6,
            unsharpThreshold: 2,
            transferable: true,
          })
          .then(result => pica.toBlob(result, "image/jpeg", 0.9))
          .then(blob => this.handleBlob(blob, type, name)); // .catch(error => console.log(error)); // Raven should catch this
      });
      offScreenImage.src = preview;
github AJInteractive / InterviewJS / packages / composer / src / partials / forms / MetaForm.js View on Github external
offScreenImage.addEventListener("load", () => {
      const maxWidth = key === "logo" ? 500 : 1000;
      console.log(key, maxWidth);
      const targetWidth = offScreenImage.width > maxWidth ? maxWidth : offScreenImage.width;
      const targetHeight = parseInt(targetWidth * offScreenImage.height / offScreenImage.width, 10);
      console.log(`${offScreenImage.width} x ${offScreenImage.height} => ${targetWidth} x ${targetHeight}`);

      const offScreenCanvas = document.createElement("canvas");
      offScreenCanvas.width = targetWidth;
      offScreenCanvas.height = targetHeight;

      const pica = Pica({ features: ["js", "wasm", "ww"] });
      pica
        .resize(offScreenImage, offScreenCanvas, {
          unsharpAmount: 80,
          unsharpRadius: 0.6,
          unsharpThreshold: 2,
          transferable: true,
        })
        .then(result => pica.toBlob(result, "image/jpeg", 0.9))
        .then(blob => {
          // const reader = new FileReader();
          // reader.onloadend = () => {
          //   console.log("data url length", reader.result.length);
          //   const base64data = reader.result.length > 3e6 ? "" : reader.result;
          //   this.setState({
          //     formData: { ...this.state.formData, [key]: base64data }
          //   });
github AJInteractive / InterviewJS / packages / composer / src / partials / panes / user / tabs / Image.js View on Github external
offScreenImage.width > 600 ? 600 : offScreenImage.width;
        const targetHeight = parseInt(
          targetWidth * offScreenImage.height / offScreenImage.width,
          10
        );
        console.log(
          `${offScreenImage.width} x ${
            offScreenImage.height
          } => ${targetWidth} x ${targetHeight}`
        );

        const offScreenCanvas = document.createElement("canvas");
        offScreenCanvas.width = targetWidth;
        offScreenCanvas.height = targetHeight;

        const pica = Pica({ features: ["js", "wasm", "ww"] });
        pica
          .resize(offScreenImage, offScreenCanvas, {
            unsharpAmount: 80,
            unsharpRadius: 0.6,
            unsharpThreshold: 2,
            transferable: true
          })
          .then((result) => pica.toBlob(result, "image/jpeg", 0.9))
          .then((blob) => this.handleBlob(blob, type, name)); // .catch(error => console.log(error)); // Raven should catch this
      });
      offScreenImage.src = preview;
github joker1007 / blackalbum / src / media_file.js View on Github external
return new Promise((resolve, reject) => {
    pica.resizeCanvas(from, to, options, (err) => {
      if (err) {
        console.warn(`Error resize canvas`);
        reject(err);
      } else {
        resolve(to);
      }
    });
  });
}
github grinat / browser-image-manipulation / src / manipulations / imageResize.js View on Github external
let ratioHeight = height / maxHeight
            if (ratioWidth > ratioHeight) {
                newHeight = Math.round(height / ratioWidth)
                newWidth = maxWidth
            } else {
                newWidth = Math.round(width / ratioHeight)
                newHeight = maxHeight
            }
        } else {
            reject(new Error('Unknown resize type'))
        }

        canvas.width = newWidth
        canvas.height = newHeight

        let picaInstanse = new Pica(resizeOptions.picaInit)
        picaInstanse.resize(canvasImage, canvas, resizeOptions.pica).then(resizedCanvas => {
            if (type === RESIZE_TYPE_SQUARE) {
                let dx = 0
                let dy = 0
                let sx = 0
                let sy = 0

                if (newWidth < newHeight) {
                    sy = (newHeight - newWidth) / 2
                    newHeight = newWidth
                } else {
                    sx = (newWidth - newHeight) / 2
                    newWidth = newHeight
                }
                let cropedCanvas = document.createElement('canvas')
                let cropedCanvasCtx = cropedCanvas.getContext('2d')
github jamsinclair / slackmojize / src / resizeImageForSlack.js View on Github external
import picaModule from "pica/dist/pica";
const pica = picaModule();

const MAX_FILE_SIZE = 64000;
const MAX_HEIGHT = 128;
const MAX_WIDTH = 128;

const resizeImageForSlack = async (file, type) => {
  const alpha = type.mime === "image/png";
  const img = await _createImageFromUri(file);
  const fromCanvas = _createCanvasForImage(img, alpha);
  const toCanvas = _createSlackCanvas();
  let quality = 1;
  let outputBlob;

  await pica.resize(fromCanvas, toCanvas, {
    alpha,
    unsharpAmount: 60,
github FreemapSlovakia / freemap-v3-react / src / hooks / pictureDropHandlerHook.ts View on Github external
number,
      number,
      number,
      number,
    ][] = [
      [1, 0, 0, 1, 0, 0],
      [-1, 0, 0, 1, width, 0],
      [-1, 0, 0, -1, width, height],
      [1, 0, 0, -1, 0, height],
      [0, 1, 1, 0, 0, 0],
      [0, 1, -1, 0, height, 0],
      [0, -1, -1, 0, height, width],
      [0, -1, 1, 0, 0, width],
    ];

    pica()
      .resize(img, canvas)
      .then(() => {
        let canvas2: HTMLCanvasElement;
        if (o === 1) {
          canvas2 = canvas;
        } else {
          canvas2 = document.createElement('canvas');
          const ctx = canvas2.getContext('2d');
          if (!ctx) {
            throw new Error('context is null');
          }
          canvas2.width = o > 4 ? height : width;
          canvas2.height = o > 4 ? width : height;
          ctx.transform(...transformations[o - 1]);
          ctx.drawImage(canvas, 0, 0);
        }
github deltaepsilon / firebase-ssr-starter / utilities / storage / resize-image.js View on Github external
export default async function resizeImage(src, el, targetDimensions) {
  const pica = Pica();
  const from = document.createElement('canvas');
  const fromContext = from.getContext('2d');
  const to = document.createElement('canvas');

  const fromImage = new Image();
  fromImage.src = src;

  const stats = await getImageStats(fromImage);
  const newDimensions = getNewDimensions(stats, targetDimensions);

  from.width = stats.width;
  from.height = stats.height;
  to.height = newDimensions.height;
  to.width = newDimensions.width;

  fromContext.drawImage(fromImage, 0, 0);

pica

High quality image resize in browser.

MIT
Latest version published 3 years ago

Package Health Score

56 / 100
Full package analysis