html2canvas скачать изображение с фоновым изображением в SVG - PullRequest
Новая
       20

html2canvas скачать изображение с фоновым изображением в SVG

0 голосов
/ 13 декабря 2018

Привет, html2canvas и SVG мастера, может быть, вы можете помочь мне, я пытаюсь загрузить изображение из SVG, где пользователь устанавливает изображения в областях SVG, но когда я генерирую изображение с помощью html2canvas, фоновые изображения выглядят странно и для загрузкисгенерированный файл, я получаю сообщение об ошибке: «Uncaught (в обещании) DOMException: не удалось выполнить toDataURL на HTMLCanvasElement: испорченные холсты могут быть не экспортированы».

Я сделал пример для лучшего понимания: http://jsfiddle.net/equerol/sodofkcs/5711/

  html2canvas(document.getElementById("svgContainer"), {
    logging: true,
    allowTaint: true,
  }).then(function(canvas) {
    document.body.appendChild(canvas);
    var myImage = canvas.toDataURL("image/png");
    downloadURI("data:" + myImage, "yourImage.png");
  });

Спасибо.

1 Ответ

0 голосов
/ 15 декабря 2018

Я не очень понимаю ваш вопрос.Я думаю, что вы задаете две вещи здесь (изображения выглядят странно, загрузка невозможна из-за испорченного холста).

Для первого вопроса вы должны уточнить, что вы на самом деле спрашиваете (Что означает странное? ЧтоВы хотите достичь? ...)

Для второго (Tainted canvas) вы столкнулись с проблемой безопасности:

Разрешение использования изображений и холстов из разных источников

Приведенная выше ссылка подробно объясняет проблему, с которой вы сталкиваетесь.

Вам следует попробовать использовать один из подходов, предложенных в ссылке.

Я легко могуПреодолеть проблему безопасности, используя встроенный URI данных изображения на вашем холсте, чтобы он больше не испортился.Я в основном заменил URL вашего внешнего изображения на dataURI. Пожалуйста, попробуйте найти лучшее решение, которое подходит для вашей проблемы.

Рабочая версия вашей скрипки (загрузка холста возможна)

Вотзатронутый код и то, что я заменил, чтобы заставить его работать (усечено): 

/* ... */
            <g id="svgPoly4" clip-path="url(#d)" class="droppable">
              <image width="500" height="500" xlink:href="data:image/png;base64,iVBORw0KGgoAAAA....ggg=="></image>
        </g>
/* ... */

Обновление 1 // 2019-01-08

Извините, в исходном ответе я должен был быть более яснымо проблеме безопасности, с которой вы сталкиваетесь.

В основном вы пытаетесь получить снимок экрана с чужим изображением, переформатированным / перепроектированным в составе SVG.Это означает, что злоумышленник может использовать эту технику для кражи конфиденциальной информации (изображений) от пользователя в случае, если браузер не помешал этому.

Что вы должны действительно сделать, чтобы преодолеть вашиПроблема заключается в том, чтобы подавать изображения, встроенные в SVG, из того же источника, что и остальная часть страницы.Если по какой-либо причине / в случае использования вам необходимо получить сторонние изображения для композиции, эти изображения должны быть проксированы вашим сервером.

В любом случае, я немного подправил вашу скрипку и теперь ее можно использовать изChrome, Firefox и Safari.Edge не будет работать (но, учитывая вашу первоначальную реализацию, я думаю, вы еще не пробовали).

Обновленная версия jsFiddle

Эта версия показывает, что вам следует сделать, чтобы заменить изображение в SVG .

Примечание. Изображение было ранее загружено на сервер, который разрешает доступ к ресурсам из разных источников (добавляет заголовок Access-Control-Allow-Origin)

HTML-файл SVG загружается в виде строки шаблона, где URL-адрес данных будет заменен при загрузке изображения.

Изображение загружено: 

var downloadedImg = new Image;
downloadedImg.crossOrigin = "Anonymous";
downloadedImg.addEventListener("load", imageReceived, false);
downloadedImg.src = "https://i.imgur.com/szhc74z.png";

URL-адрес данных заменен в шаблоне SVGhtml string: 

var svg = svgTemplate.replace('${imageUrl}', dataUrl);
document.getElementById('rootSvg').innerHTML = svg;

Дополнительный обходной путь для Safari:

Похоже, что есть какая-то проблема с html2canvas и способом, которым он «рендерит» SVG.

Чтобы смягчить это, функция html2canvas вызывается после добавления SVG в документ.Это «разогреет» процедуру для «настоящих» вызовов.

Цель моей скрипки - просто продемонстрировать, что подвиг может быть выполнен, но , пожалуйста, , попробуйте использовать внутренний прокси-подход или другой дизайн для решения вашей проблемы.

...