首先下载插件!
网上很多资源不用我说!
然后在你的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>
改过以后,点第二下就会弹出令人欣慰的下载提示页面啦