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

Download whole canvas with background image when download button pressed

本文关键字：下载图像背景按钮更新时间：2023-09-26

我使用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>

如果我理解得对，你想从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中的JSXGraph的png写入画布元素pngoutput

board.renderer.dumpToCanvas('pngoutput');