[英]Saving a canvas object as an image - Black background
This is a slightly frustrating problem. 这是一个令人沮丧的问题。 I am using a third party library called Javascript InfoVis Toolkit to generate a canvas image chart. 我正在使用一个名为Javascript InfoVis Toolkit的第三方库来生成画布图像图表。
So the chart is built and is inserted into a canvas. 因此,将构建图表并将其插入画布。 The background of that image is white (like styled in css), but when I convert the image (I've tried different libraries and opening a new window all together) it is black. 该图像的背景是白色的(就像在CSS中样式一样),但是当我转换图像时(我尝试过不同的库并一起打开一个新窗口),它是黑色的。
<script type="text/javascript">
function saveImage(div_id) {
var canvas = document.getElementById("chart2-canvas");
Canvas2Image.saveAsJPEG(canvas);
}
</script>
<script type="text/javascript">
function init(jsonString, num){
var json = jsonString
var inj = 'chart' + num
var st = new $jit.ST({
injectInto: inj,
offsetX:25,
offsetY:900,
transition: $jit.Trans.Quart.easeInOut,
orientation: 'top',
Node: {
height:100,
width:100,
type: 'rectangle',
color: '#EEE',
overridable: true
},
Edge: {
type: 'line',
color: '#512',
overridable: true
},
Label: {
type: 'Native',
color: '#000000'
},
Tips: {
enable: false,
onShow: function(tip, node, isLeaf, domElement){
var html = "<p><b>" + node.name + "</b></p><br/>";
var data = node.data
if(data.image) {
html += "<img src=\""+ data.image +"\" width=50 height=65 class=\"album\" />";
}
if(data.email) {
html += "<p>"+data.email+"</p>";
}
if(data.title) {
html += "<p>"+data.title+"</p>";
}
if(data.phone) {
html += "<p>"+data.phone+"</p>";
}
tip.innerHTML = html;
}
}/*,
onCreateLabel:function(label,node) {
alert(node.name);
alert(node.data);
var html = "<b>" + node.name + "</b>";
var data = node.data;
if(data.title) {
html += "<br/><br/><i>" + data.title + "</i>";
}
label.id = node.id + "_" + num;
label.innerHTML = html;
var style = label.style;
style.width = 100 + 'px';
style.height = 100 + 'px';
style.cursor = 'pointer';
style.fontSize = '0.8em';
style.textAlign = 'center';
style.color='#321';
}*/
});
st.loadJSON(json);
st.compute();
st.onClick(st.root);
}
</script>
<a href="#" onclick="javascript:saveImage('chart1');">Save Image</a>
<g:each in="${allJSON}" status="h" var="jsonInstance">
<div id="chart${h+1}">
<script type="text/javascript">
init(${jsonInstance}, ${h+1});
</script>
</div>
</g:each>
To recap: 回顾一下:
Thanks for all help! 感谢您的帮助!
Are you sure the canvas doesn't have a transparent background? 您确定画布没有透明背景吗? JPEGs don't support transparent backgrounds. JPEG不支持透明背景。
If it does have a transparent background, try drawing a white background on it first, then save it as a JPEG. 如果确实具有透明背景,请尝试先在其上绘制白色背景,然后将其另存为JPEG。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.