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

时间:2018-07-05 12:27:39

标签: javascript angular typescript image-processing

在将图像上传到服务器之前,我想使用角度{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。

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

1 个答案:

答案 0 :(得分:1)

我认为您不会加载它,因为它是NodeJS的库,所以它是出于“后端”目的..您不能以这种方式在前端这样做。

如果您想在Angular Front End中做..我认为您必须尝试在CANVAS上进行操作

也许您可以尝试使用以下软件包:

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