Question

我使用sketch.js插件在我的网站中绘制图表，我需要用户更改背景作为他/她的愿望，点击下载按钮后我需要获取带有绘制内容的整个图像作为png/jpg我的基本代码如下。我可以下载绘制的东西而不是背景图片任何想法或指导如何实现这个???任何建议而不是sketch.js？

＆＃13;

         /*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';
          });



        });

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

如果我理解你，你想要从JSXGraph构造中获取png转储？

在JSXGraph的每晚构建中，如果使用SVG渲染器，则可以使用方法dumpToCanvas。这意味着，如果你有像这样的JSXGraph结构

<div id='box1' class='jxgbox' style='width:500px; height:500px;'></div>
<canvas id='pngoutput' style='width:500px; height:500px;'></canvas>
<script type='text/javascript'>
var board = JXG.JSXGraph.initBoard('box1', {
        axis: true, boundingbox: [-1, 1, 1, -1]
    });

你可以通过调用

在box1中将一个png的JSXGraph写入画布元素pngoutput

board.renderer.dumpToCanvas('pngoutput');

按下下载按钮，下载带有背景图像的整个画布

1 个答案: