0
我正在嘗試使用我的canvasJS圖合併圖像（圖形的背景圖像）。如何使用CanvasJS圖合併圖像並下載它們的圖像
這些被合併到一個畫布後，我想獲得這個畫布的DataURL，這將允許我下載它的圖像（圖形的圖像及其各自的背景圖像）。
我一直在玩弄JS小提琴試圖讓這個工作一段時間，但我似乎無法弄清楚。
這是我目前的小提琴：
http://jsfiddle.net/dyt943s0/19/
我已經通過合併另外兩個小提琴代碼一起創建的小提琴：
1）https://jsfiddle.net/cuajw85L/1/（合併兩個畫布和創建它們的圖像）。 和 2）http://jsfiddle.net/canvasjs/muqb7d3n/（創建CanvasJS圖表的圖像）
這裏是關於小提琴的代碼我一直在努力：
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>