heylight / canvas-select

一个轻量级图片标注javascript库,支持矩形、多边形、点、折线、圆形,支持再编辑,使得图像标注更简单。
MIT License
233 stars 54 forks source link

vue3 引入canvas-select 启动后报错require is not defined #140

Open Promiseee opened 1 month ago

Promiseee commented 1 month ago

import CanvasSelect from "canvas-select";

export 'default' (imported as 'CanvasSelect') was not found in 'canvas-select' (module has no exports)

Uncaught runtime errors: × ERROR require is not defined ReferenceError: require is not defined at eval (webpack-internal:///./node_modules/canvas-select/lib/canvas-select.min.js:2:1) at ./node_modules/canvas-select/lib/canvas-select.min.js (http://localhost:8080/js/src_components_ImageListNew_vue.js:116:1) at webpack_require__ (http://localhost:8080/js/app.js:177:32) at fn (http://localhost:8080/js/app.js:428:21) at eval (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ImageListNew.vue?vue&type=script&scope=true&setup=true&lang=js:8:71) at ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/ImageListNew.vue?vue&type=script&scope=true&setup=true&lang=js (http://localhost:8080/js/src_components_ImageListNew_vue.js:18:1) at webpack_require__ (http://localhost:8080/js/app.js:177:32) at fn (http://localhost:8080/js/app.js:428:21) at eval (webpack-internal:///./src/components/ImageListNew.vue?vue&type=script&scope=true&setup=true&lang=js:5:237) at ./src/components/ImageListNew.vue?vue&type=script&scope=true&setup=true&lang=js (http://localhost:8080/js/src_components_ImageListNew_vue.js:62:1)

heylight commented 1 month ago
  1. 尝试升级一下vite
  2. 直接cdn引用CanvasSelect
Promiseee commented 1 month ago

image 您好 请教一下 我的图片格式是 `data:image/png;base64, 报这个错是因为图片太大了吗

Xigla commented 1 month ago

感觉不像,你可以下载源码调试一下。index.html 里改下图片地址就行