проблема при создании образа html и svg для использования с html2canvas в Internet Explorer - PullRequest
0 голосов
/ 23 октября 2018

Я хочу нарисовать линии на изображении и сохранить рисунок как изображение.поэтому я использую блокнот Рафаэля для рисования линий, и я даю изображение также для фона.так что задача рисования работает нормально.но я генерирую svg с помощью библиотеки html2canvas, которая даст нам svg любого html-контейнера.поэтому я беру svg моего рисунка и создаю изображение, но в IE, когда мы создаем изображение, поэтому в изображении линии рисунка не показывают только показ фона.Пожалуйста, код

<style rel="stylesheet" type="text/css">
    .widget .editor,
    .widget .editor_image,
    .widget .viewer {
        position: absolute;
    }

    .widget {
        background-color: #ffc;
        border: 1px solid #ccc;
    }

    .widget1 .img_editor,
    .widget1 .editor_image,
    .widget1 .img_viewer {
        position: absolute;
    }
</style>
 <div style="height:260px;width: 216px;" class="widget">
  <img src="body.jpg" class="editor_image" height="260px">
  <div id="img_editor"class="img_editor"></div>
 </div>
 <div style="height:260px;width: 216px;" class="widget" id="img_viewer_container">
  <img src="body.jpg" class="editor_image" height="260px">
  <div id="img_viewer" class="img_viewer"></div>
 </div>
 <button id="update_viewer">update</button>
 <div id="base64"></div>
 <script type="text/javascript">
   var control = 'img_editor';
            var sketchpad_editor = Raphael.sketchpad(control, {
                width: 216,
                height: 260,
                editing: true, // true is default
                strokes: []
            });
            var sketchpad_viewer = Raphael.sketchpad("img_viewer", {
                width: 216,
                height: 260,
                editing: false
            });
            $("#update_viewer" ).click(function() {
                sketchpad_viewer.json(sketchpad_editor.json());
                html2canvas(document.querySelector("#img_viewer_container")).then(function(canvas) {
                    var a = document.createElement('a');
                    a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                    a.download = 'somefilename.png';
                    a.click();
                    $('#base64').text(canvas.toDataURL("image/png"));
                });
            });

</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...