文章/答案/技术大牛

发布

社区首页 >问答首页 >按“下载”按钮时，下载带有背景图像的整个画布

问按“下载”按钮时，下载带有背景图像的整个画布
EN

Stack Overflow用户

提问于 2015-11-19 12:49:05

回答 1查看 748关注 0票数 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>

javascript

jquery

css

canvas

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-12-04 13:29:34

如果我明白你的意思，你想让png从JSXGraph结构中转储出来吗？

在JSXGraph的夜间构建中，有一个dumpToCanvas可用的方法--如果您使用SVG呈现器。这意味着，如果您有这样一个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]
    });

通过调用JSXGraph，可以将box1中的png写入画布元素pngoutput。

board.renderer.dumpToCanvas('pngoutput');

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33804466

复制

相似问题

问按“下载”按钮时，下载带有背景图像的整个画布
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问按“下载”按钮时，下载带有背景图像的整个画布EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问按“下载”按钮时，下载带有背景图像的整个画布
EN