使用html2canvas对当前页面进行生成图片

本文介绍如何利用html2canvas库将网页内容转换为图片,并进一步生成PDF文件的方法。通过两个示例函数down和down2展示了不同的配置选项,如设置高度、缩放比例等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.需要导入jquery

2.导入(html2canvas.min.js)

代码如下:

function down(){
  //l:横向, p:纵向; 单位: in:英寸,mm毫米;px:像素;  画布大小:默认是A4纸大小  
   // var pdf = new jsPDF('p', 'mm', [230, 250]); //230 x 250  
    html2canvas($("#example-2"),{  
        height: 12000,   
        onrendered:function(canvas){  
            var imgData=canvas.toDataURL();  
           // pdf.addImage(imgData, 'JPEG', 5, 5, 225 , 235); //第3、4个参数是位置(x,y),第5、6个参数是宽,高    
           // pdf.save(new Date().getTime()+'.pdf');  
        }  
    }); 

}

function down2(){
   var str = $('#example-2');  
//console.log(str);  
html2canvas([str.get(0)], {
    scale: 2,
    onrendered: function (canvas) {  
        var image = canvas.toDataURL("image/png");  
        console.log(image);
        var pHtml = "<img src="+image+" />";  
        $('#pic').html(pHtml);  
    }  
});  


//配合着vueJs
<button v-on:click="greet">Greet</button>
<button onclick="down2()">ok</button>

<div id="pic">
图片
</div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值