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

Question

我想在将图像上传到服务器之前，使用 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'
...

我也会使用替代库，但我只发现 jimp 用于纯 JS 图像处理。

in it issue list on github 发布了一个解决方案，但它对我不起作用。

Answer 1

我认为你不会加载它，因为它是 NodeJS 的库，所以它是用于“后端”目的.. 你不能以这种方式在前端执行它。

如果你想在你的 Angular 前端做 .. 我认为你必须尝试在 CANVAS 上工作

也许你可以试试这个包：

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