[英]How to Merge an Image with a CanvasJS Graph and Download an Image of them
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/ 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). 1) https://jsfiddle.net/cuajw85L/1/ (合并两个画布并为其创建图像)。 and 2) http://jsfiddle.net/canvasjs/muqb7d3n/ (creates an image of a CanvasJS graph)
和2) http://jsfiddle.net/canvasjs/muqb7d3n/ (创建CanvasJS图的图像)
Here is the code on the fiddle I have been working on: 这是我一直在研究的小提琴上的代码:
JS: 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: 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>
Figured it out! 弄清楚了!
Instead of var designCanvas = $(".canvasjs-chart-canvas");
代替
var designCanvas = $(".canvasjs-chart-canvas");
, use var designCanvas = $("#chartContainer .canvasjs-chart-canvas").get(0);
,请使用
var designCanvas = $("#chartContainer .canvasjs-chart-canvas").get(0);
http://jsfiddle.net/dyt943s0/21/ http://jsfiddle.net/dyt943s0/21/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.