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