Блог

Главная - Вопросы по программированию - Как мне загрузить отредактированный холст в cloudinary (или другую службу хостинга изображений), используя vue.js и fabric.js

Как мне загрузить отредактированный холст в cloudinary (или другую службу хостинга изображений), используя vue.js и fabric.js

#javascript #vue.js #html5-canvas #fabricjs

#javascript #vue.js #html5-холст #fabricjs

Вопрос:

На моем веб-сайте пользователь может рисовать на загруженной фотографии, и я хочу добавить возможность для них нажать кнопку, и она будет загружена в мое хранилище cloudinary. веб-сайт создан с использованием vue.js и использует fabric.js для рисования холста.

Когда я пытаюсь console.log(canvas.toDataURL({format: 'png'}))

я получаю эту ошибку

Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

я использовал это:https://www.youtube.com/watch?v=VqnJwh6E9ak чтобы загрузить исходное изображение, но теперь я не знаю, что делать, поскольку я считаю, что для отредактированного холста нет такого «файла»

Вот как я загружаю исходный файл, который пользователь хочет отредактировать, в cloudinary (я удалил свое имя)

    this.$Progress.start();
   const data = new FormData();
   data.append("file", file);
   data.append("upload_preset", "");
   console.log(file)
   const res = await fetch(
     "https://api.cloudinary.com/v1_1//image/upload",
     {
       method: "POST",
       body: data
     }
   );
   const uploadedFile = await res.json();

итак, есть ли способ превратить холст в файл, который можно загрузить в cloudinary, или есть другой способ, которым я могу это сделать

Комментарии:

1. ссылка на github

2. в комментарии ниже говорится: «Для всех, кто попадет сюда из веб-поиска в будущем, обратите внимание, что если вы просто пытаетесь Fabric.js при загрузке локального файла в браузер изменение CORS ничего не исправляет. Проблема в том, что Chrome, по крайней мере, просто не любит, когда вы читаете с холста, созданного на основе изображения, загруженного из локальной файловой системы. Вы можете создавать объекты изображения просто отлично, но если вы попытаетесь сделать что-то вроде cloneAsImage(), это вызовет ошибку, описанную выше. Если вы используете локальный веб-сервер для обслуживания файла, он должен работать нормально «. так что я не думаю, что это сработает

3. Вам нужно установить crossOrigin для объекта изображения

4. @Durge у меня это похоже на « ткань. Image.fromURL(UploadedFile.secure_url, function(myImg) { var img1 = myImg.set({ слева: 0, сверху: 0 , ширина: 500, высота: 500}); canvas.add(img1); crossOrigin = ‘Anonymous’ }); « и это не работает. разве это неверно?

5. fabric.Image.fromURL(uploadedFile.secure_url, function(myImg) { var img1 = myImg.set({ left: 0, top: 0, width: 500, height: 500 }); canvas.add(img1); },{crossOrigin : 'anonymous'});