javascript - How to resize images client-side with nodecapica and React? - Stack Overflow

admin管理员组

文章数量:1402122

I'm trying to resize image before sending it to the server to a canvas in React using nodeca/pica library:

import pica from 'pica'

let resizedCanvas = <canvas height={500} width={500}/>

  pica().resize(myImage, resizedCanvas, {
  unsharpAmount: 80,
  unsharpRadius: 0.6,
  unsharpThreshold: 2
}).then(result => console.log(`resize done!  ${result}`))
    .catch(err => console.log(err))

but I'm getting the following error in the console:

TypeError: stages.shift is not a function or its return value is not iterable
at processStages (index.js:508)
at init.then (index.js:549)

I'm trying to resize image before sending it to the server to a canvas in React using nodeca/pica library:

import pica from 'pica'

let resizedCanvas = <canvas height={500} width={500}/>

  pica().resize(myImage, resizedCanvas, {
  unsharpAmount: 80,
  unsharpRadius: 0.6,
  unsharpThreshold: 2
}).then(result => console.log(`resize done!  ${result}`))
    .catch(err => console.log(err))

but I'm getting the following error in the console:

TypeError: stages.shift is not a function or its return value is not iterable
at processStages (index.js:508)
at init.then (index.js:549)

• javascript
• reactjs

Share Improve this question Follow asked Jul 6, 2018 at 19:34 zorrozorro 2,55533 gold badges1313 silver badges1414 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

The problem was that I should not use JSX for building the canvas. The following solution worked great:

const resizedCanvas = document.createElement('canvas')
resizedCanvas.height = 500
resizedCanvas.width = 500

本文标签： javascriptHow to resize images clientside with nodecapica and ReactStack Overflow