javascript - 无法在 Localhost 上启动 tui-image-editor
问题描述
我正在尝试在本地主机上初始化 tui-image-editor。我从https://github.com/nhn/tui.image-editor下载了这个著名的图像编辑器
这是我的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TUI Image Editor</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.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>
<link rel="stylesheet" href="http://localhost/imageEditor/dist/tui-image-editor.css">
<script src="http://localhost/imageEditor/dist/tui-image-editor.js"></script>
<script>
var ImageEditor = require('tui-image-editor');
var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
includeUI: {
loadImage: {
path: 'jp.jpg',
name: 'SampleImage'
},
theme: blackTheme, // or whiteTheme
initMenu: 'filter',
menuBarPosition: 'bottom'
},
cssMaxWidth: 700,
cssMaxHeight: 500,
selectionStyle: {
cornerSize: 20,
rotatingPointOffset: 70
}
});
</script>
</head>
<body>
<div id="tui-image-editor" style="height: 200px">
<canvas></canvas>
</div>
</body>
</html>
结果,我得到空白页,没有错误没有警告
我没有摆脱这种情况,你能找出我做错的地方吗?
解决方案
推荐阅读
- javascript - 为什么我看不到渲染的元素在这里?
- python - Altair 复合图表(分层和连接)可以有不同的背景颜色吗?
- html - 按最大文本内容缩放表格列
- reactjs - 将第三方渲染道具组件转换为钩子
- sql - 如何删除特定表的所有记录,但最近 6 个月的数据除外
- ms-project - MS 项目 REST API
- python - 如何将一系列 IF 语句转换为 Pythonic 代码行?
- visual-studio-code - 如何在 settings.json 中为给定语言指定折叠开始和折叠结束模式
- c# - 匹配音频文件长度的秒和毫秒
- javascript - 为旨在作为集合的对象创建布尔值