问题标签 [toast-ui-image-editor]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
2100 浏览

javascript - ToastUI Image Editor - 根据容器调整图像大小

我正在尝试调整此图像编辑器,使其具有预先确定的画布大小,并且不会根据加载的图像的分辨率改变大小。我希望它有 300 像素的宽度和 90 像素的高度......

我希望这个大小始终保持不变,并且加载的图像(如果有的话)被裁剪,但下载时的大小将始终保持为 300px x 90px 的图像。

即使我上传了 1800 像素 x 2000 像素的图像,这些尺寸也保持不变。

我使用此代码来初始化组件:

有谁知道如何实现这一目标?

0 投票
1 回答
5386 浏览

javascript - 如何实现 Toast UI 图片编辑器?

我想获得一个图像编辑器,以便我可以编辑我的图片并在它们上添加文本,以便我尝试 Toast UI 图像编辑器,我按照 Toast UI Image Editor 的文档所说的那样做了,但是 Toast UI Image Editor 没有显示任何内容我的浏览器我在下面附上了我的代码。如果我在实现图像编辑器时做错了什么,请告诉我。

索引.html

下面我附上了我的浏览器控制台抛出的错误

浏览器控制台

0 投票
3 回答
276 浏览

vue.js - CORS 仅在 Windows 上阻止了对图像的访问

Vue 组件有一个照片块和“编辑”按钮。

作为照片编辑器,我使用TUI 图像编辑器。在点击处理程序中,我通过loadImageFromURL函数将 url 传递给编辑器

当我在 Windows 中单击 Chrome 中的“编辑”按钮时出现错误

从源“example.org”访问“cdn.domain.shop/eaa49b02e350627622904290a83599d6.png”图像已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头。

但是当我在 Ubuntu 的 Chrome 中做同样的事情时,一切正常。

我究竟做错了什么?

0 投票
0 回答
144 浏览

toast-ui-image-editor - TOAST UI 图像编辑器 addIcon 图标大小

我正在使用 TOAST UI 图像编辑器向我的图像添加自定义 SVG 图标:

是否也可以设置图标的大小?我试过了

但没有运气,因为这似乎只影响图标的边界框,而不影响图标大小本身。非常感谢您提前。

0 投票
0 回答
104 浏览

javascript - 当我们加载 vue toast UI 图像编辑器组件时,“SPACE”键在整个应用程序中不起作用

我们正在使用 vue-image-editor 组件来选择媒体。一旦我们打开/加载组件,我们就无法在整个应用程序中进一步使用空格键。我们面临以下错误:

调试问题的观察

  1. 对于图像编辑器实例,当我们打开组件时,将为 keyup/keydown 添加事件侦听器,而在关闭组件时,事件侦听器将被删除。
  2. 在加载组件时,对于 keyup 和 keydown 事件,在 Zoomclass 中添加了一个事件侦听器。但是在这里关闭组件时,事件侦听器不会被删除。

图片将在下面添加: 在此处输入图像描述

如控制台中的图像所示,得到错误: 在此处输入图像描述

0 投票
1 回答
568 浏览

node.js - 无法解决已安装的 Npm 模块

我从我的 react 应用程序的服务器端卸载了包 @toast-ui/react-image-editor 因为我认为依赖项需要是客户端,所以我去客户端安装它,然后重新启动应用程序,它不能成立。

这是我的基本文件夹结构

我收到此错误:“./src/components/images/Editor.js Module not found: Can't resolve '@toast-ui/react-image-editor' in 'C:..\client\src\components\图片'”

之后我咨询了

如何使用 Node.js 解决“找不到模块”错误?

无法解析 React.js 中的模块(未找到)

基本上我已经删除并安装了单个软件包,在客户端上删除并安装了 node_modules,服务器运行 npm cache verify,仅在客户端上安装了软件包,在客户端和服务器上安装了软件包,仅在服务器上安装。

并且没有任何工作,这让我认为它可能是 VS Code 的导入错误,

有没有办法查看 npm 是如何尝试导入特定包或我没有为反应失败而导入明显存在的包所做的任何一般事情。

0 投票
0 回答
392 浏览

angular - Angular 11 的 TOAST UI 图像编辑器

有没有人让 Toast 图像编辑器为 Angular 2+ 工作(我有 Angular 11)?我目前正在尝试完成这项工作:https ://www.npmjs.com/package/tui-image-editor-angular

我希望它与“loadImageFromURL”一起使用,但是当我使用它时,所有编辑按钮都被禁用。如果我从“加载文件”按钮加载图像,它可以工作。然后编辑按钮不会被禁用。因此,使用“loadImageFromURL”时似乎没有初始化某些内容。

使用此包的一个问题是“选项”不包含“includeUI -> loadImage -> 路径”,这可能需要为编辑器添加以启用按钮。

有什么建议么?

0 投票
0 回答
161 浏览

javascript - 如何使用@toast-ui/react-image-editor 更改 tui-color-picker 默认颜色?

我正在使用https://ui.toast.com/tui-image-editor库进行图像编辑功能,默认情况下有一个颜色选择器组件,我正在尝试更改此颜色的默认颜色-picker,但我找不到这样做的方法,我做了一些研究,看起来这个图像编辑器正在使用https://github.com/nhn/tui.color-picker作为依赖项,所以可能是很难改变颜色的方式。

这是我的代码:

在“myTheme”变量上,我为颜色选择样式设置了一些配置,但它们并没有用于设置其默认颜色,可能是因为它是动态设置的。

我也试过直接在我的页面 CSS 上设置颜色

0 投票
0 回答
27 浏览

angular - ToastUI 图像编辑器不加载图像,抛出错误

ShowSelectedImg(_image, info) {

[在此处输入图像描述][1] 当我尝试从服务器加载图像时,在 imageEditor 中渲染图像需要 10 到 15 秒,有时它会抛出错误,例如 'ERROR Error: Uncaught (in promise): Invalid image加载。[1]:https://i.stack.imgur.com/KagWY.jpg