#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, или есть другой способ, которым я могу это сделать
Комментарии:
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'});