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.
AJInteractive / InterviewJS / packages / composer / src / partials / forms / IntervieweeForm.js View on Github 
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 }
// });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;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 }
// });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;return new Promise((resolve, reject) => {
pica.resizeCanvas(from, to, options, (err) => {
if (err) {
console.warn(`Error resize canvas`);
reject(err);
} else {
resolve(to);
}
});
});
}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')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,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);
}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);
