Блог

Главная - Вопросы по программированию - Изображения fromURL не отображаются при экспорте

Изображения fromURL не отображаются при экспорте

#fabricjs

#fabricjs

Вопрос:

Я добавляю несколько изображений, используя fromURL, все с внешних сайтов (не уверен, имеет ли это какое-либо отношение к проблемам):

 fabric.Image.fromURL('<zillow listing image URL>', function (img) {
...scaleToHeight stuff...
...clipPath stuff to do some masking...
canvas.add(img);
});

Вывод в PNG. Пришлось использовать этот обходной путь, чтобы обойти проблему с рамкой chrome с помощью jsPDF

 function debugBase64 (base64URL) {
var win = window.open();
win.document.write('<iframe src="'   base64URL   '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
}

debugBase64(canvas.toDataURL('png'));

…. Я пробовал этот экспорт в формате PNG и несколько других, и это всегда одно и то же. Весь текст и основные фигуры отображаются отлично, но никогда не те изображения, которые я ввел с помощью fromURL. Любые советы будут с благодарностью.

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

1. Были ли какие-либо ошибки в консоли? Есть большая вероятность, что ваш холст был «испорчен» внешними URL-адресами. В этом случае вам просто нужно добавить { crossOrigin: 'anonymous'} в качестве третьего аргумента в fromURL функцию.

2. Спасибо за ответ. На самом деле я включаю это при создании нового экземпляра fabric. Кроме того, как выяснилось, при экспорте изображение даже не отображается в формате JSON. …. и нет, ошибок консоли нет.

3. У вас есть рабочий пример, который вы могли бы связать?

4. К сожалению, у меня нет живого, рабочего примера. На данный момент все это находится в локальной среде. Я знаю об ошибке консоли, о которой вы говорите, поскольку я видел ссылки на нее в своих исследованиях, и я не вижу этого в своей консоли. Сначала я подумал, что это может быть проблемой с методом toDataURL, но поскольку мое изображение. Объекты FromURL даже не отображаются в экспорте JSON, это наводит меня на мысль, что это что-то другое.

Ответ №1:

Я реализую это в Vue. Я изначально поместил почти все в «смонтированный» и просто помещал «console.log (canvas.toJSON ());» в конце раздела. Однако, по-видимому, на это все еще повлияли гонки. Потому что, когда я вместо этого добавил кнопку для регистрации JSON, она также включала объекты изображения.