How to use the pica/dist/pica function in pica

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 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,

pica

High quality image resize in browser.

MIT
Latest version published 3 years ago

Package Health Score

56 / 100
Full package analysis