Я хочу нарисовать линии на изображении и сохранить рисунок как изображение.поэтому я использую блокнот Рафаэля для рисования линий, и я даю изображение также для фона.так что задача рисования работает нормально.но я генерирую 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>