Скачать изображение с облачного URL
У меня есть проект реагирования, в котором я редактирую изображения и создаю новый. Теперь я хочу загрузить сгенерированное изображение. Я использую для этого cloudinary, и у меня есть URL-адрес изображения.
Но главная проблема в том, что я не могу скачать изображение. Я пытался
<a href = "link" download> Download </a>
Но это не сработало. Он просто открывает изображение, но не загружает его.
Я хочу только загрузить изображение, ничего больше.
Если у вас есть идеи, пожалуйста, поделитесь
Живая песочница https://codesandbox.io/s/interesting-mountain-lf4lk?file=/src/App.js
Ответы 3
Я использовал js-file-download. Рабочий образец: https://codesandbox.io/s/confident-monad-pc6l9?file=/src/App.js:76-92
Вам не понадобится внешняя библиотека для достижения этой функциональности. Просто добавьте преобразование Cloudinary flags => attachment (fl_attachment в URL-адресах), и это установит заголовок Content-Disposition со значением «вложение», и файл будет загружен.
<a href = "https://res.cloudinary.com/demo/image/upload/fl_attachment/sample.jpg">Download</a>
При желании вы можете установить пользовательское имя загруженного файла, используя формат fl_attachment:my_custom_filename.
<a href = "https://res.cloudinary.com/demo/image/upload/fl_attachment:my_custom_filename/sample.jpg">Download</a>
Используйте URL-адрес облачного преобразования, добавив вложение, это создаст новый URL-адрес для прямой загрузки вашего файла.
Например:
//id is your public_id file in cloudinary
export const getImageAttachment = async (id) => {
return await cloudinary.url(id, {
flags: "attachment:imgname"
})
Это возвращает новый URL-адрес, который вы можете использовать, например, для добавления тега <a/>href = {} и загрузки файла.
Надеюсь, я помог.
Больше информации: https://cloudinary.com/documentation/transformation_reference#fl_attachment