网站搜索

javascript - 无法将 Jimp 导入 Angular 6 进行图像处理


我想在 Angular 6 中使用 jimp 来调整图片大小,图片来源是 base64,在上传到服务器之前。我尝试这样导入它:

import * as Jimp from 'jimp';

这最终导致了资源缺失,因为只加载了浏览器代码。然后我尝试像这样加载 jimp 代码本身:

import {Jimp} from 'jimp/index';

最终导致了很多错误

Errors while compiling. Reload prevented.
    errors @ client?c480:161
onmessage @ socket.js:41
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:883
SockJS._transportMessage @ sockjs.js:881
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2957
wrapFn @ zone.js:1188
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
client?c480:167 ./node_modules/aws4/aws4.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\myProject\node_modules\aws4'
errors @ client?c480:167
onmessage @ socket.js:41
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:883
SockJS._transportMessage @ sockjs.js:881
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2957
wrapFn @ zone.js:1188
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
client?c480:167 ./node_modules/ecc-jsbn/index.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\myProject\node_modules\ecc-jsbn'
errors @ client?c480:167
onmessage @ socket.js:41
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:883
SockJS._transportMessage @ sockjs.js:881
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2957
wrapFn @ zone.js:1188
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
client?c480:167 ./node_modules/oauth-sign/index.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\myProject\node_modules\oauth-sign'
...

我本来也会使用其他库,但我只找到了用于纯 JS 图像处理的 jimp。

在 GitHub 的问题列表中发布了一个解决方案,但对我没有用。

答案#1

我觉得你不会加载它,因为它是一个用于 NodeJS 的库,所以它是用于“后端”的目的……你不能以那种方式在前端使用它。

如果你想在你的 Angular 前端中实现……我认为你必须尝试在 CANVAS 上工作

也许你可以尝试像这样的包:

`https://www.npmjs.com/package/re`size-base64