html2canvas新版可行方案

首先下载插件！
网上很多资源不用我说！
然后在你的index页面里面添加javascript：

<script src="html2canvas.js" charset="utf-8"></script>
<script src="html2canvas.min.js" charset="utf-8"></script>

然后上测试代码：

<a type="button" id="down_button" ><button id="creat">点击复制图片</button></a>
<div id="myImg" style="position:relative;">
    <img src="xiaohui.jpg">
</div>

然后写上你的js调用代码：

<script>
    $(document).ready(function() {
var dataURL;
$("#creat").click(function(){
html2canvas($("#myImg")).then(function(canvas) {
    $("#myImg").appendChild(canvas);
     dataURL =canvas.toDataURL();
     console.log(dataURL);
});
$('#down_button').attr( 'href' ,  dataURL ) ;
        $('#down_button').attr( 'download' , 'xiaohui.png' ) ;

})
}）
</script>

注意这里的jquery调用！ $(“#myImg”)这个困扰了我好久，发现是这个bug，可能新的插件和jquery调用有冲突，所以源代码改为：

<script>
$(document).ready(function() {
var dataURL;
$("#creat").click(function(){
html2canvas(document.getElementById("myImg")).then(function(canvas) {
    document.getElementById("myImg").appendChild(canvas);
     dataURL =canvas.toDataURL();
     console.log(dataURL);
});
$('#down_button').attr( 'href' ,  dataURL ) ;
        $('#down_button').attr( 'download' , 'xiaohui.png' ) ;

})
}）
</script>

改过以后，点第二下就会弹出令人欣慰的下载提示页面啦