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

Question

我想使用 jimp使用 angular 6 在将图像上传到服务器之前调整来自 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 ，但它对我不起作用。

Answer 1

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

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

也许你可以试试这个包:

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