В Javascript, как изменить изображение base64? ⇐ Javascript

[Гость]

Я использую Vue.js и Three.js для рендеринга альфа-текстур. Альфа-информация хранится в альфа-канале моих текстур.
Однако в Three.js альфа-значения игнорируются:

.alphaMap: Текстура

Альфа-карта представляет собой текстуру в оттенках серого, которая управляет непрозрачностью поверхности (черный: полностью прозрачная; белый: полностью непрозрачный). По умолчанию — ноль.

Используется только цвет текстуры, игнорируя альфа-канал, если он существует. Для текстур RGB и RGBA средство рендеринга WebGL будет использовать зеленый канал при выборке этой текстуры из-за дополнительной точности, обеспечиваемой для зеленого цвета в сжатых DXT и несжатых форматах RGB 565. Текстуры только яркости и яркости/альфа-текстуры также будут работать должным образом.

https://threejs.org/docs/#api/en/materi ... terial.map

Поэтому при загрузке текстуры я хочу изменить ее, поместив значения альфа в зеленый канал. Насколько я знаю, я могу сделать это только на основе данных base64.

Я создал новое изображение, установил в качестве src значение base64 моей текстуры и применил модификацию при загрузке этого нового изображения.
Вот мой текущий код:

selectAlphaTextureFile(event) { константный файл = event.target.files[0]; если (файл) { константный читатель = новый FileReader(); reader.onload = (e) => { const base64String = e.target.result.split(',')[1]; // ⋁ ⋁ ⋁ ⋁ ⋁ ⋁ ⋁ ⋁ ⋁ ⋁ ⋁ ⋁ вар изображение = новое изображение (); image.onload = функция() { вар холст = document.createElement('canvas'); холст.ширина = изображение.ширина; холст.высота = изображение.высота; var context = Canvas.getContext('2d'); context.drawImage(изображение, 0, 0); var imageData = context.getImageData(0, 0, холст.ширина, холст.высота); for (var y = 0; y < imageData.height; y++) { for (var x = 0; x < imageData.width; x++) { индекс var = (y * imageData.width + x) * 4; вар альфа = imageData.data[индекс + 3]; imageData.data[индекс + 1] = альфа; } } }; image.src = base64String; // ⋀ ⋀ ⋀ ⋀ ⋀ ⋀ ⋀ ⋀ ⋀ ⋀ ⋀ ⋀ this.applyAlphaTexture(base64String); }; readAsDataURL(файл); } На данный момент я ничего не делаю с этим новым изображением, потому что сразу же получаю следующую ошибку в своем терминале:
Ошибка: ENAMETOOLONG: имя слишком длинное, stat '/home/cli-app/public/iVBORw0KGgoAAAANSUh[...]Jggg==' (пропуская длинную базу 64)
и это в консоли:

GET http://localhost:8082/iVBORw0KGgoAAAANSUh[...]Jggg== 414 (слишком длинный URI) Изображение (асинхронное) reader.onload @ ObjectInfo.vue:290 загрузка (асинхронная) selectAlphaTextureFile @ ObjectInfo.vue:257 _ctx.selectedObject.filter.onChange._cache.._cache. @ ObjectInfo.vue:20 callWithErrorHandling @ runtime-core.esm-bundler.js:158 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166 вызывающий @ runtime-dom.esm-bundler.js:278 Возможно, я делаю что-то не так, но не знаю, как с этим справиться.

(ps: я также не знаю, как создать новое изображение с шириной/высотой моего первого изображения)