[英]remix.run how do I resize images before uploading to cloudinary?
I wish to resize images to about 500px x 500px before uploading it to cloundary.我希望在将图像上传到 cloundary 之前将其调整为大约 500px x 500px。 How I resize the images that is in AsyncIterable Uint8Array format.
我如何调整 AsyncIterable Uint8Array 格式的图像。 I would like to do this in the uploadImageToCloudinary function. I have tried resizing it with sharp package but i dont know how to convert data AsyncIterable to be compatible with the sharp package.
我想在 uploadImageToCloudinary function 中执行此操作。我尝试使用 sharp package 调整它的大小,但我不知道如何将数据 AsyncIterable 转换为与 sharp package 兼容。
import {
redirect,
unstable_composeUploadHandlers,
unstable_createMemoryUploadHandler,
unstable_parseMultipartFormData,
} from "@remix-run/node";
// writeAsyncIterableToWritable is a Node-only utility
import { writeAsyncIterableToWritable } from "@remix-run/node";
import type {
UploadApiResponse,
} from "cloudinary";
import { v2 as cloudinary } from "cloudinary";
import cuid from "cuid";
import { createInstagram } from "~/models/instagram.server";
import { createNewOrder } from "~/models/order.server";
cloudinary.config({
cloud_name: process.env.CLOUDINARY_NAME,
api_key: process.env.CLOUDINARY_API_KEY,
api_secret: process.env.CLOUDINARY_API_SECRET,
});
async function uploadImageToCloudinary(data: AsyncIterable<Uint8Array>) {
let randomFolder = (Math.random() + 1).toString(36).substring(5);
const uploadPromise = new Promise<UploadApiResponse>(
async (resolve, reject) => {
const uploadStream = cloudinary.uploader.upload_stream(
{
folder: `file_uplaoded/${randomFolder}`,
},
(error, result) => {
if (error) {
reject(error);
return;
}
resolve(result);
}
);
await writeAsyncIterableToWritable(data, uploadStream);
}
);
return uploadPromise;
}
export const action = async ({ request }) => {
let selectedLargePhotosURLArray: any = [];
const uploadHandler = unstable_composeUploadHandlers(
// our custom upload handler
async ({ name, contentType, data, filename }) => {
const regexFileExtension = /\.[0-9a-z]+$/gm;
const fileExtension = filename?.match(regexFileExtension);
if (fileExtension != undefined && fileExtension?.length > 0) {
const lowCaseFileExt = fileExtension[0].toLowerCase();
let allowedFileExtension =
lowCaseFileExt === ".png" ||
lowCaseFileExt === ".jpg" ||
lowCaseFileExt === ".jpeg" ||
lowCaseFileExt === ".heic" ||
lowCaseFileExt === ".gif"
? true
: false;
if (
name === "petImages" &&
filename !== undefined &&
allowedFileExtension
) {
const uploadedImage = await uploadImageToCloudinary(data);
console.log(uploadedImage.secure_url);
selectedLargePhotosURLArray.push(uploadedImage.secure_url);
return uploadedImage.secure_url;
}
}
},
// fallback to memory for everything else
unstable_createMemoryUploadHandler({
maxPartSize: 300000000,
})
);
const formData = await unstable_parseMultipartFormData(
request,
uploadHandler
);
return null
};
Cloudinary has a feature called Upload Presets which can be used for image transformations. Cloudinary 有一个称为上传预设的功能,可用于图像转换。
To enable that, do to your Cloudinary Account -> Click Settings (cog icon) -> Upload Manipulations -> Incoming Transformation, set your desired settings and save.要启用它,请对您的 Cloudinary 帐户执行此操作 -> 单击设置(齿轮图标)-> 上传操作 -> 传入转换,设置所需的设置并保存。
Now you can use the preset like this:现在您可以像这样使用预设:
const uploadStream = cloudinary.uploader.upload_stream(
{
upload_preset: `preset_name`,
folder: `file_uplaoded/${randomFolder}`,
},
(error, result) => {
if (error) {
reject(error)
return
}
resolve(result)
},
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.