在发送到AWS S3之前，Nuxt将图像转换为WebP [英] Nuxt convert image to webp before sending to AWS S3

问题描述

在将图像发送到NUXT应用程序中的AWS S3之前，如何将其转换为WebP格式？

我在我的网站上上传了一张照片，我想在上传到Amazon Web服务之前将图像从文件输入转换为WEBP格式。与NodeJS不同，在NodeJS中，我可以导入Sharp并使用它将图像转换为WebP格式，但这里不是这样，因为我收到如下所示的错误

Failed to compile with 4 errors                                                                                               friendly-errors 01:16:19  

These dependencies were not found:                                                                                                    friendly-errors 01:16:19  
                                                                                                                                      friendly-errors 01:16:19  
* child_process in ./node_modules/detect-libc/lib/detect-libc.js, ./node_modules/sharp/lib/libvips.js                                 friendly-errors 01:16:19
* fs in ./node_modules/detect-libc/lib/detect-libc.js, ./node_modules/sharp/lib/libvips.js                                            friendly-errors 01:16:19  
                                                                                                                                      friendly-errors 01:16:19  
To install them, you can run: npm install --save child_process fs  

我想像下面的代码一样转换图像

        drop(e) {
            e.preventDefault();
            e.stopPropagation();
            e.target.classList.remove('solid');
            const files = e.dataTransfer.files;
            this.handleFiles(files);
        },
        onFilePicked(e) {
            e.preventDefault();
            e.stopPropagation();
            const files = e.target.files;
            this.handleFiles(files);
        },
        saveToBackend(file, result) {
            // compress image
            // save to aws
        },
        readFiles(file) {
            const reader = new FileReader();
            reader.readAsDataURL(file)
            reader.onload = () => {
                const uploading = this.uploading
                const result = reader.result
                uploading.push(result)
                this.uploading = uploading
                

                // upload to aws
                this.saveToBackend(file, result)
            }
        },
        handleFiles(files) {
            const Files = Array.from(files);
            Files.forEach(file => {
                // check if image is a valid image
                if (file.type.includes('image')) {
                    // display the image
                    return this.readFiles(file)
                }
                return
            });
            console.log(Files, "loaded files");
        },

和Sharp插件

import vue from "vue"
import sharp from "sharp"
vue.use(sharp)

请告诉我如何压缩图像？

推荐答案

最终，我能够在不使用任何包的情况下解决问题，我所做的只是将图像转换为画布，然后将图像转换为WebP格式。以下是我的解决方案。

    convertImage(file) {
        return new Promise((resolve) => {
            // convert image
            let src = URL.createObjectURL(file)
            let canvas = document.createElement('canvas');
            let ctx = canvas.getContext('2d')

            let userImage = new Image();
            userImage.src = src

            userImage.onload = function() {
                canvas.width = userImage.width;
                canvas.height = userImage.height;
                ctx.drawImage(userImage, 0, 0);

                let webpImage = canvas.toDataURL("image/webp");
                return resolve(webpImage);
            }
        });    
    },

因此，上面的函数首先接收一个文件，该文件是您要从文件输入转换的图像，然后它将图像转换为画布，然后将画布转换回图像，但这一次您指定了要将其转换为的图像的格式。

因为在我的示例中，我需要一个webp图像，所以我设置了canvas.toDataURL("image/webp")，默认情况下，WebP图像的质量将与接收到的图像的质量相同。如果要将质量降低到较低质量，canvas.toDataURL("image/webp", 1)采用另一个参数，该参数是一个介于0-1、1(表示最高质量)和0(表示最低质量)之间的数字。您也可以将0.5设置为中等质量，或任意设置。您还可以通过第一个参数设置您想要的其他文件格式，如canvas.toDataURL('image/jpeg', 1.0)(对于jpeg格式)或canvas.toDataURL('image/png', 1.0)(对于PNG)。

来源

我找到解决方案的小渠道-Where I found my solution

developer.mozilla.org解释-more on the CanvasElement.toDataURL()

这篇关于在发送到AWS S3之前，Nuxt将图像转换为WebP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！