如何解决如何实现Toast UI图像编辑器？
我想要一个图像编辑器，以便可以编辑图片并在其上添加文本，以便尝试使用Toast UI图像编辑器，正如Toast UI图像编辑器的文档所述，但Toast UI图像编辑器不是在浏览器上显示任何内容，我在下面附加我的代码。请告诉我在实施图像编辑器时是否做错了什么。
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Index</title>
<!--Toast UI stylesheet-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tui-image-editor/3.10.0/tui-image-editor.min.css" integrity="sha512-WEhPru82cOhEAThEMrYXgrHXc0eR69oZF0vGzXwhNf2hSbNc/q4/fb9qeDexgrIyBU6TKfhXC/DKwxYHx5CmLA==" crossorigin="anonymous" />
</head>
<body>
<div id="tui-image-editor"></div>
<!--jQuery File-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!--Toast UI js file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tui-image-editor/3.10.0/tui-image-editor.js" integrity="sha512-n85VUN94xSJstXJvMxHC968reNaBOSy9+LRA0slHiqYzsa6sAX3ok0cupK6HTg1sIlWXncBcCVzg7YGPJ70T0w==" crossorigin="anonymous"></script>
<script>
var ImageEditor = require('tui-image-editor');
var instance = new ImageEditor(document.querySelector('#tui-image-editor'),{
includeUI: {
loadImage: {
path: '/media/profile-images/20/09/23/Koala_iaIdqm5.jpg',name: 'SampleImage'
},locale: locale_ru_RU,theme: whiteTheme
initMenu: 'filter',menuBarPosition: 'bottom'
},cssMaxWidth: 700,cssMaxHeight: 500,selectionStyle: {
cornerSize: 20,rotatingPointOffset: 70
}
});
</script>
</body>
下面我附上了我的浏览器控制台抛出的错误
浏览器控制台
util.js:89 Uncaught TypeError: Cannot read property 'forEach' of undefined
at keyMirror (util.js:89)
at eval (consts.js:48)
at Object../src/js/consts.js (tui-image-editor.js:1579)
at __webpack_require__ (tui-image-editor.js:36)
at eval (util.js:38)
at Object../src/js/util.js (tui-image-editor.js:2203)
at __webpack_require__ (tui-image-editor.js:36)
at eval (invoker.js:17)
at Object../src/js/invoker.js (tui-image-editor.js:1843)
at __webpack_require__ (tui-image-editor.js:36)
解决方法
您的代码中有错字
theme: whiteTheme-> theme: whiteTheme,
这是工作示例。
参考：https://github.com/nhn/tui.image-editor/blob/master/examples/example01-includeUi.html
<html>
<head>
<meta charset="UTF-8">
<title>0. Design</title>
<link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" rel="stylesheet">
<link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css">
<style>
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
html,body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="tui-image-editor-container"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.0/fabric.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
<!-- <script type="text/javascript" src="./js/theme/white-theme.js"></script>
<script type="text/javascript" src="./js/theme/black-theme.js"></script> -->
<script>
// Image editor
var imageEditor = new tui.ImageEditor('#tui-image-editor-container',{
includeUI: {
loadImage: {
path: 'img/sampleImage2.png',name: 'SampleImage'
},// theme: blackTheme,// or whiteTheme
initMenu: 'filter',menuBarPosition: 'bottom'
},cssMaxWidth: 700,cssMaxHeight: 500,usageStatistics: false
});
window.onresize = function() {
imageEditor.ui.resizeEditor();
}
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
