如何使用CanvasJS图合并图像并下载它们的图像

I am trying to merge an image (a background image for my graph), with my canvasJS graph.

我正在尝试将图像(我的图形的背景图像)与我的canvasJS图形合并。

After these have been merged into a canvas, I would like to get a DataURL of this canvas, which will allow me to download an image of it (an image of the graph with its respective background image).

在将这些画布合并到画布之后,我想获得这个画布的DataURL,这将允许我下载它的图像(图形的图像及其各自的背景图像)。

I have been playing around with JS Fiddles trying to get this to work for some time, but I cannot seem to figure it out.

我一直在玩JS Fiddles试图让它工作一段时间,但我似乎无法弄明白。

Here is my current fiddle:

这是我目前的小提琴:

http://jsfiddle.net/dyt943s0/19/

I have created the fiddle by merging two other Fiddles' codes together:

我通过将其他两个小提琴的代码合并在一起创建了小提琴:

1) https://jsfiddle.net/cuajw85L/1/ (merges two canvases and creates an image of them). and 2) http://jsfiddle.net/canvasjs/muqb7d3n/ (creates an image of a CanvasJS graph)

1)https://jsfiddle.net/cuajw85L/1/(合并两个画布并创建它们的图像)。和2)http://jsfiddle.net/canvasjs/muqb7d3n/(创建CanvasJS图的图像)

Here is the code on the fiddle I have been working on:

这是我一直在努力的小提琴上的代码:

JS:

var chart = new CanvasJS.Chart("chartContainer",
{
        title: {
            text: "Exporting chart using toDataurl"
        },
        data: [
        {
            type: "spline",
            dataPoints: [ 
                { x: 10, y: 4 }, 
                { x: 20, y: 7 },
                { x: 30, y: 2 },
                { x: 40, y: 3 },
                { x: 50, y: 5 }
            ]
        }
        ]
});

chart.render();

var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/fish.jpg";
function start(){

  var bottleCanvas = document.getElementById('bottleCanvas');
  var designCanvas = $(".canvasjs-chart-canvas");
  var ctxb=bottleCanvas.getContext('2d');
  var ctxd=editorCanvas.getContext('2d');

  ctxb.drawImage(img,0,0);
  ctxd.fillRect(50,50,50,50);

  downloadCanvas();
}

function downloadCanvas() {
  var bottleCanvas = document.getElementById('bottleCanvas');
  var designCanvas = $(".canvasjs-chart-canvas");

  var bottleContext = bottleCanvas.getContext('2d');
  bottleContext.drawImage(designCanvas, 69, 50);

  var dataURL = bottleCanvas.toDataURL("image/png");
  var link = document.getElementById('btn-download');
  link.download = "bottle-design.png";
  link.href = bottleCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");


}

HTML:

<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<canvas id="bottleCanvas" width=300 height=300></canvas>
<canvas id="editorCanvas" width=300 height=300></canvas>

<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<a href="#" id="btn-download" download="chart.png" target="_blank">Download</a>

1 个解决方案

#1

Figured it out!

弄清楚了!

Instead of var designCanvas = $(".canvasjs-chart-canvas");, use var designCanvas = $("#chartContainer .canvasjs-chart-canvas").get(0);

而不是var designCanvas = $(“。canvasjs-chart-canvas”);,使用var designCanvas = $(“#chartContainer .canvasjs-chart-canvas”)。get(0);

http://jsfiddle.net/dyt943s0/21/

#1