[英]React.js: Downloading image after applying CSS filters
I'm making an app to edit images and I'm stuck when it is about downloading the images after applying the filters.我正在制作一个应用程序来编辑图像,但在应用过滤器后下载图像时我被卡住了。 As expected, the user can drag & drop (or just upload) an image (creating a dynamic URL on Cloudinary) and apply the CSS filters to the uploaded image.
正如预期的那样,用户可以拖放(或仅上传)图像(在 Cloudinary 上创建动态 URL)并将 CSS 过滤器应用于上传的图像。
So, basically, I want to save the image into the Cloudinary API, but also applying the filters.所以,基本上,我想将图像保存到 Cloudinary API 中,但还要应用过滤器。
Edite web app architecture or more about here Edite web 应用程序架构或更多关于这里
You can reproduce this issue by cloning the Edite GitHub repository and following the guide to set up the services.您可以通过克隆Edite GitHub 存储库并按照指南设置服务来重现此问题。
Note: see that src is the root注意:看到 src 是根
components/Toolbar/Right/options.json
[
{
"property": "brightness",
"value": 100,
"range": {
"min": 0,
"max": 100
},
"unit": "%"
},
{
"property": "contrast",
"value": 100,
"range": {
"min": 0,
"max": 200
},
"unit": "%"
},
{
"property": "saturate",
"value": 100,
"range": {
"min": 0,
"max": 200
},
"unit": "%"
},
{
"property": "grayscale",
"value": 0,
"range": {
"min": 0,
"max": 100
},
"unit": "%"
},
{
"property": "sepia",
"value": 0,
"range": {
"min": 0,
"max": 100
},
"unit": "%"
},
{
"property": "invert",
"value": 0,
"range": {
"min": 0,
"max": 100
},
"unit": "%"
},
{
"property": "hue-rotate",
"value": 0,
"range": {
"min": 0,
"max": 360
},
"unit": "deg"
}
]
components/FileUploader/index.js
function FileUploader() {
// Image uploading states
const dndRef = useRef(); // Access DnD element reference and its current state
const [isDragging, setIsDragging] = useState(false);
const [isUploading, setIsUploading] = useState(false);
const [uploadedImageUrl, setUploadedImageUrl] = useState('');
const [src, { blur }] = useProgressiveImg(
'',
uploadedImageUrl
);
const [uploadedImageName, setUploadedImageName] = useState('image');
// CSS Filters
const { activeTool } = useContext(ToolsContext);
const [options, setOptions] = useState(DEFAULT_OPTIONS);
const selectedFilter = options[activeTool];
// Get the file's data and send to clodinary
const onFileChange = async e => {
let formData = new FormData();
formData.append('file', e.target.files[0]);
formData.append('upload_preset', 'Edite_App');
setIsUploading(true);
let data = await api.post('/image/upload', formData);
const file = data.data;
setIsDragging(false);
setIsUploading(false);
setUploadedImageUrl(file.secure_url);
setUploadedImageName(file.original_filename);
}
// Get slider value according to the tools
const handleSliderChange = ({ target }) => {
setOptions(prevOptions => {
return prevOptions.map((option, index) => {
if (index !== activeTool) return option
return { ...option, value: target.value }
})
})
}
// Get CSS filters and return as a object
const handleImageStyling = async () => {
const filters = options.map(option => {
return `${option.property}(${option.value}${option.unit})`
})
return filters.join(' ');
I }
}
Note: To explain better and not just give too much code, you see above that, basically, I get a CSS filters list (JSON file) and also use Cloudinary API to post the data and create a dynamic URL.注意:为了更好地解释而不只是给出太多代码,您在上面看到,基本上,我得到了一个 CSS 过滤器列表(JSON 文件),并且还使用 Cloudinary API 发布数据并创建动态 ZE6B391A8D2C4D45902AZ3658。 Although Cloudinary has support for image transformations, I always get stuck on this topic.
虽然 Cloudinary 支持图像转换,但我总是卡在这个话题上。
Cloudinary won't be able to use the filters in the JSON format, therefore, you will want to map these filters from the JSON file into Cloudinary image transformations . Cloudinary 将无法使用 JSON 格式的过滤器,因此,您需要将 map 这些过滤器从 JSON 文件转换为 Cloudinary 图像转换。 To do that, you will want to create some code/class that handles different input options from your JSON file and converts them to syntax using Cloudinary transformations.
为此,您需要创建一些代码/类来处理 JSON 文件中的不同输入选项,并使用 Cloudinary 转换将它们转换为语法。 Eg Brightness to e_brightness , Sepia effect to e_sepia etc.
例如亮度到e_brightness ,棕褐色效果到e_sepia等。
Once you do that there are two options:一旦你这样做了,有两个选择:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.