ReactCrop 预览未渲染

2023-12-01

我想为我的 Web 应用程序实现图像裁剪功能,并发现 React-image-crop 是实现该功能的最佳 npm 包。但是,由于某种原因,ReactCrop 组件提供的预览没有在我的视口上渲染。

这是我一直使用的代码。

import { useState } from 'react';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';

function App() {
const [src, setSrc] = useState(null);
const [crop, setCrop] = useState({ aspect: 16 / 9 });
const [image, setImage] = useState(null);
const [output, setOutput] = useState(null);

const selectImage = (file) => {
    setSrc(URL.createObjectURL(file));
};

const cropImageNow = () => {
    const canvas = document.createElement('canvas');
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;
    canvas.width = crop.width;
    canvas.height = crop.height;
    const ctx = canvas.getContext('2d');

    const pixelRatio = window.devicePixelRatio;
    canvas.width = crop.width * pixelRatio;
    canvas.height = crop.height * pixelRatio;
    ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
    ctx.imageSmoothingQuality = 'high';

    ctx.drawImage(
    image,
    crop.x * scaleX,
    crop.y * scaleY,
    crop.width * scaleX,
    crop.height * scaleY,
    0,
    0,
    crop.width,
    crop.height,
    );
    
    // Converting to base64
    const base64Image = canvas.toDataURL('image/jpeg');
    setOutput(base64Image);
};

return (
    <div>
    <div>
        <input
        type="file"
        accept="image/*"
        onChange={(e) => {
            selectImage(e.target.files[0]);
        }}
        />
        <br />
        <br />
        <div>
        {src && (
            <div>
            <ReactCrop src={src} onImageLoaded={setImage}
                crop={crop} onChange={setCrop} />
            <br />
            <button onClick={cropImageNow}>Crop</button>
            <br />
            <br />
            </div>
        )}
        </div>
        <div>{output && <img src={output} />}</div>
    </div>
    </div>
);
}

export default App;


我使用的代码没有任何问题。我能够通过将react-image-crop依赖降级为“^8.6.12”来解决这个问题。最新版本的 npm 包似乎有问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ReactCrop 预览未渲染 的相关文章

  • 在 Node.js 中包含另一个文件中的 JavaScript 类定义

    我正在为 Node js 编写一个简单的服务器 并且使用我自己的类 名为User看起来像 function User socket this socket socket this nickname null just the typical
  • Javascript 无法正确排序 DECIMAL 数字

    我有一些代码可以按字母顺序对名称进行排序 我遇到的问题是它处理小数的方式 它对名称进行排序 如下所示 我宁愿它按数字递增 DOG 1 0510 DOG 1 1031 DOG 11 1792 DOG 12 0920 DOG 12 1170 D
  • jQuery数据表设置列设计和成功回调中的值

    我为我的数据表编写了以下代码 它用我的数据库中的内容填充表 如下所示 if datatable null datatable destroy datatable tableProducts DataTable pageLength 50 b
  • 如何将查询参数添加到守卫中的路由并将其传递给 Angular 4 中的组件?

    我在我的 Angular 4 应用程序中使用路由保护 如果条件满足并返回 true 我想向路由添加一个查询参数 这是我一直在研究的代码 Injectable export class ViewGuardService implements
  • 在Javascript中将RGB数组转换为RGBA数组的快速方法

    我正在使用的模拟器在内部存储 RGB 值的一维帧缓冲区 但是 HTML5 画布在调用 putImageData 时使用 RGBA 值 为了显示帧缓冲区 我当前循环遍历 RGB 数组并以某种方式创建一个新的 RGBA 数组与此类似 https
  • 处理时区转换的 JavaScript 库

    是否有一个 JavaScript 库可以处理时区转换 并考虑 DST 规则和此类内容 我知道有类似的问题 但我见过的问题似乎都没有真正适合我的问题的答案 我想在时区 A 创建一个日期并能够对其进行操作 添加天数 小时等 然后将其转换为另一个
  • Moment.js 动态更新时间(以秒为单位)

    我试图显示时钟 that 每秒更新一次 e g 2015 年 1 月 5 日 12 05 01 它似乎对我来说工作得很好 对于相同的代码 并且只有 moment min js 指向v2 11 0 看看代码 来源 MilkyWayJoe va
  • dc lineChart 单击时弹出数据点信息

    我正在尝试检测折线图数据点上的点击 Per this answer dc scatter plot binding onClick event https stackoverflow com a 22772340 1873386 I am
  • UpdatePanel 启动脚本未执行

    我正在编写一个在 SharePoint 网站中使用的 ASP NET Web 部件 并尝试使用 UpdatePanel 来呈现查询结果 我想使用 JQuery 插件来修改从异步回发返回的表 但我无法让启动脚本在异步更新上执行 我发现这个帖子
  • 反应独特的“关键”错误

    我正在浏览 React 中的待办事项列表教程 并遇到以下错误 我花了相当长的时间 只是找不到错误 这是错误和组件的代码 这就是代码对于课程存储库 此提交中出现问题 https github com andrewjmead react cou
  • Jquery 子元素发生变化

    我正在尝试使用 jquery 在子元素 在本例中为 select 更改时触发事件 这是我的 HTML div class row addForm div class col lg 2 col md 2 col sm 3 col xs 6 d
  • Jquery Ajax 调用返回 403 状态

    我有一个 jquery Ajax 调用来实现会话的 keepalive 这个 keepAlive 方法将每 20 分钟调用一次 function keepAlive ajax type POST url KeepAliveDummy asp
  • 如何获取从 Express (Node.js) 中的表单传递的数据

    我想获取使用表单从页面传递的数据 并在重定向的页面中使用该数据 我的客户端有这个表格
  • 如何使 4.X Typescript 项目与旧版本的 Typescript(如 3.X)兼容?

    如何使基于 TS 4 X 构建的软件包与 3 X 兼容 例如 如果我有较新的版本 则使用新功能 否则使用any or unknown或旧版本支持的任何内容 有没有可能使用指令 https www typescriptlang org doc
  • Dojo“正在加载”消息

    我是 Dojo 新手 所以我需要一些帮助 我的一些链接需要一段时间 当用户单击时 页面开始加载需要几秒钟 我想添加一条 正在加载 消息 我可以用 旧时尚方式 来做 但我想学习新的 更简单 更智能的 Dojo 方式 具体如何工作现在并不重要
  • 检测 html 选择框上的编程更改

    有没有办法让 HTML 选择元素在每次以编程方式更改其选择时调用函数 当使用 JavaScript 修改选择框中的当前选择时 IE 和 FF 都不会触发 onchange 此外 更改选择的 js 函数是框架的一部分 因此我无法更改它以在结束
  • 如何在react.js中将/n替换为换行符?

    我正在尝试更换每一个 n to a br tag in ReactJS In my note note对象有一个包含多个的字符串 n in it 示例注释 注释 test ntest ntest 我尝试过的ReactJS note note
  • javascript从字符串创建不区分大小写的正则表达式

    我试图通过以不区分大小写的方式将输入与正则表达式匹配来进行验证 正则表达式作为对象上的字符串从服务中下来 我可能会得到类似的东西 regex ane 我可以执行以下操作 var rx new RegExp object regex The
  • 文件和目录条目 API 在 Chrome 中损坏?

    我正在尝试使用文件和目录条目 API 创建一个文件上传器工具 该工具允许我将文件和目录的任意组合放入浏览器窗口中 以供读取和上传 我完全意识到 可以通过使用文件输入元素来实现类似的功能webkitdirectory已启用 但我正在测试一个用
  • 尽管 getBoundingClientRect() 是假的,但如何将事件坐标转换为 SVG 坐标?

    我正在尝试根据鼠标的位置在 SVG 元素上动态绘制内容 不幸的是 我很难将 mousemove 事件中的鼠标坐标转换为 SVG 元素的坐标空间 这是我一直在测试的一个有缺陷的函数 CylinderDemo prototype handleM

随机推荐

  • CDI 事件观察器处理服务器崩溃和重新启动

    我正在尝试使用服务将一个项目持久保存在数据库中 并为后续服务触发 JMS 消息以获取持久保存的项目 以便它可以处理相同的项目 此特定操作发生在单个事务中 但由于有时存在竞争条件 第二个服务无法获取相应的项目 因为它尚未持久化 我的用例非常常
  • 如何根据每次提交的日期将两个分支合并为一个分支?

    假设我有一个 git 存储库 如下所示 merge base A1 A2 A3 A4 branchA B1 B2 branchB 为了让事情变得更简单 假设分支上的提交是对 fileA 的严格修改 而分支上的提交是对 fileB 的严格修改
  • 如何一致地展平 numpy 数组?

    from numpy import array eye matrix x array 1 0 A eye 2 print A dot x prints 1 0 另一方面 B matrix 1 0 0 1 print B dot x prin
  • Google Chrome 扩展:主网页中的dispatchevent

    我的扩展内容脚本中有 从内容脚本中 我尝试在主网页上调度事件 但事件没有发送 什么也没有 为了更加确定 我在所有元素中分派事件 each function i entity console log entity entity trigger
  • c将不同长度的向量绑定到数据帧

    我有一个由两个样本组成的数据框 只有一个样本回答了有关状态焦虑的调查问卷 对于这种情况 我使用以下函数 rowSums 计算了躯体状态焦虑的向量 som lp lt rowSums sample1 c 1 7 8 10 108 na rm
  • 导入模块在 Jupyter Notebook 中有效,但在 IDLE 中无效

    我不明白我做错了什么 我上周重新安装了 Windows 之后我得到了 python 3 6 和我需要的所有库 但是当我尝试在 IDLE 中导入它们时返回错误 ModuleNotFoundError 没有名为 的模块 并且当我使用 pip 在
  • 将 Null-Object 拆箱为原始类型会导致 NullPointerException,可以吗?

    这段代码抛出了一个NullPointerException因为它被拆箱为原始类型并且Long longValue 叫做 对吗 如果您有这样的片段 那就更容易看出 long value Long null But the NullPointe
  • Mvc 4 添加带有脚手架的控制器,给出错误 -“无法检索元数据...”

    尝试添加具有 CRUD 操作和 EF 的控制器时出现以下错误 无法检索 LetLord Models Tenant 的元数据 不支持使用相同的 DbCompiledModel 针对不同类型的数据库创建上下文 相反 为正在使用的每种类型的服务
  • 使用 BlueZ Stack 作为外围设备(广告商)

    Goal 使用 BlueZ 和蓝牙 4LE 适配器创建一个外围设备 宣传 Hello World 的蓝牙等效项 我在哪里 我目前已经安装并下载了 BlueZ 堆栈 我可以使用 hci 工具来识别和查看蓝牙适配器 我已经对 hciconfig
  • Highcharts - 如何减少类别之间的空间?

    我需要减少那个空间 我该怎么做 Planificaci n prioridad 和 gerencia 是类别 里面的数字是按人排列的 去做这个点填充 and 点宽是你想要的 Try this 重要的部分是 plotOptions serie
  • AVAssetReader 和音频队列流问题

    我在使用 AVAssetReader 时遇到问题 无法从 iPod 库获取样本并通过音频队列进行流式传输 我无法找到任何这样的示例 因此我尝试实现自己的示例 但似乎 AssetReader 在音频队列的回调函数处 搞砸了 具体来说 当它执行
  • iPad详细设置页面,如弹出viewController

    我想澄清的第一件事是我不是在谈论 splitview 控制器 我想要一个带有导航控制器的弹出窗口 类似于您点击键盘 gt gt 语言或邮件 gt gt 新帐户时看到的控制器 现在这不是弹出窗口控制器 有可用的标准框架吗 也许我错过了显而易见
  • 为什么 x86 寄存器如此命名?

    例如 累加器命名为EAX并且 当指令指针被调用时IP 我还知道有一些字节称为CL and DH 我知道所有的名字一定有一个约定 但是它是什么 我发现的东西 EAX Accumulator Register EBX Base Register
  • 在 Angular 2 Typescript 中使用 flow.js

    我想将 flowjs 或 ng flow 集成到我的 Angular 2 应用程序中 我已经安装了flowjs使用打字 npm install save dev types flowjs from https www github com
  • MS Access 插入大型记录集速度较慢 (VBA)

    我有一段代码创建一个新表 然后尝试将记录集值复制到该表中 唯一的问题是它非常慢并且访问在执行下面的插入部分时显示加载符号 目前 插入 500 条记录时会出现此问题 但当我获得最终数据集时 我需要插入大约 10 000 到 20 000 条记
  • Ruby on Rails - 制作新应用程序时出错(rb:55:在“require”中)

    我一直在关注 Mike Hartl 的精彩作品Ruby on Rails 教程 我必须提前对 gem 文件和 ruby 的版本做出一些决定 我决定 在让 Heroku 工作出现一些问题之后 我会直接模仿所描述的教程和 ruby 版本 让我去
  • 将 libcutils 链接到本机可执行文件[重复]

    这个问题在这里已经有答案了 我希望我的可执行文件能够调用 libcuils 支持的函数 就像property get 在 Android mk 中我有 LOCAL LDLIBS lcutils ndk build返回 未定义的引用prope
  • Android 上的时间解析问题

    尝试解析时间字符串时出现解析异常02 22 p m 我有以下转换函数 public static long convertdatetotimestamp String datestring String newdateformat Stri
  • 在同一台计算机上连接两个本地 uwp 应用程序

    我试图让两个 uwp 应用程序 Windows 10 应用程序 在同一台计算机上运行时进行通信 应用程序已经可以进行通信当运行于不同的主机 因此代码正在运行 两个应用程序都可以在其清单文件中声明的本地和公共网络中进行通信 什么时候在同一主机
  • ReactCrop 预览未渲染

    我想为我的 Web 应用程序实现图像裁剪功能 并发现 React image crop 是实现该功能的最佳 npm 包 但是 由于某种原因 ReactCrop 组件提供的预览没有在我的视口上渲染 这是我一直使用的代码 import useS