我一直在研究一个我想要转换成图像的HTML页面.
我一直在使用html2canvas和canvas2image脚本并在此处使用此代码http://jsfiddle.net/8ypxW/3/,这使我能够创建一个按钮,该按钮将截取屏幕并将我的HTML页面下载为图像.
我遇到的问题是我下载的截图图像显示的是我的文字而不是我的图像,即使它们来自同一个来源.我不确定我的HTML,HTML2canvas或canvas2image是否存在问题.
我的例子还没有,但我的代码如下:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="html2canvas.js"></script>
<script src="Canvas2Image.js"></script>
<div id="wrapper" style="background-color: white"; width="1000px" height="900px">
<img src="header.jpg" width= "900px">
tecno diagnostics
</div><!---- End Wrapper ---->
<br/>
<input type="button" id="btnSave" value="Save PNG"/>
<div id="img-out"></div>
<script type="text/javascript">
$(function() {
$("#btnSave").click(function() {
html2canvas($("#wrapper"), {
onrendered: function(canvas) {
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
});
});
</script>
Run Code Online (Sandbox Code Playgroud)
如果有人能帮助我或指出我正确的方向,将非常感激.
提前致谢