时间戳

首页 > 解决方案 > 如何使用 nodeca/pica 和 React 在客户端调整图像大小？

javascript - 如何使用 nodeca/pica 和 React 在客户端调整图像大小？

问题描述

我正在尝试使用 nodeca/pica 库在将图像发送到服务器之前调整图像大小到 React 中的画布：

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

但我在控制台中收到以下错误：

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)

标签： javascriptreactjs

解决方案

问题是我不应该使用 JSX 来构建画布。以下解决方案效果很好：

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

推荐阅读