0
Я использую плагин sketch.js, чтобы нарисовать диаграмму на моем сайте, и мне нужно, чтобы пользователь менял фон по своему желанию, и после того, как нажмите кнопку загрузки, мне нужно получить все изображение с рисунком содержимого как png/jpg мой базовый код следующим образом. Я могу загрузить нарисованные вещи, но не фоновое изображение, любую идею или руководство, как достичь этого. Любые предложения, кроме sketch.js?Загрузите весь холст с фоновым изображением при нажатии кнопки загрузки
/*jquery scripts*/
var canvas;
$(function() {
$.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#000', '#fff'], function() {
$('#colors_demo .tools .brushes').append("<a class='color_box' href='#colors_sketch' data-color='" + this + "'style='width:25px; background:" + this + ";'></a> ");
});
$.each([3, 5, 10, 15], function() {
$('#colors_demo .tools .brushes').append("<a href='#colors_sketch' data-size='" + this + "' style='background: #ccc'>" + this + "</a> ");
});
$('#colors_sketch').sketch();
$("#sel1").change(function() {
if ($(this).val() === '1') {
var img = 'image/plans/plan1.jpg';
}
if ($(this).val() === '2') {
var img = 'image/plans/plan2.jpg';
}
/// set size
$('#colors_sketch').globalCompositeOperation = "destination-over";
$('#colors_sketch').css("background-image", "url(" + img + ")");
$('#colors_sketch').height = $('#colors_sketch').width * (img.height/img.width);
$('#colors_sketch').drawImage(backgroundImage, 0, 0);
});
$('#downloadlink').click(function() {
var canvas = $('#colors_sketch')[0];
var ctx = canvas.getContext('2d');
var img = new Image;
img.onload = function() {
ctx.drawImage(this, 0, 0);
};
this.href = $('#colors_sketch')[0].toDataURL(); // Change here
this.download = 'design.png';
});
});.demo {
margin-top: 10px;
}
#colors_sketch {
float: right;
width: 75%;
height: 90%;
border: 2px solid #dede22;
border-radius: 10px;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: 10px;
display: block;
}
a.color_box {
height: 25px;
display: inline-block;
border: 2px solid #000;
}
#plans {
border: 2px solid #2ee;
width: 20%;
/*height:90%;*/
float: left;
}
.tools {
width: 50%;
height: 25%;
padding-left: 0;
padding-right: 0;
margin: 0 auto;
display: block;
}
.downloadbtn {
background
}
.dragable_plans {
width: 200px;
height: 100px;
}
#sel1 {
width: 10%;
display: inline-block;
}
#container {
width: 100%;
height: 90%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.3/sketch.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="demo" id="colors_demo">
<div class="form-group">
<div class="tools" style="margin-bottom:10px">
<label for="color tools">Pen Colors and Sizes:</label>
<div class="brushes"></div>
<label for="sel1">Select Diagram Type:</label>
<select class="form-control" id="sel1">
<option value='1'>Plan1</option>
<option value='2'>Plan2</option>
</select>
<a id="downloadlink" href="#colors_sketch" type="button" class="btn btn-success form-control" style="float: right; width: 100px;">Download</a>
</div>
</div>
<div id="container">
<div id="plans">
</div>
<canvas id="colors_sketch"></canvas>
</div>
</div>
</body>