前端会有将局部网页转成图片并保存到本地的需求。
如下操作即可：引入插件
`<script src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>`
`<div id="image-canvas" style="width: 100%; height: auto;"></div>`
```javascript
function imageDownload() {
    var pdfName = document.getElementById('name').innerHTML;
    varcanvas = "image-canvas";
    var target = document.getElementById(canvas);
    target.style.background = "#FFFFFF";
    if (pdfName == '' || pdfName == undefined) {
        pdfName = "测试";
    };
    htmlcanvas(target, { onrendered: function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页图片显示html页面生成的canvas高度;
        varpageHeight = contentWidth / 1.78 * 210;
        //未生成图片的html页面高度varleftHeight = contentHeight;
        //页面偏移varposition = ;
        //A3纸的尺寸[297,420]，html页面生成的canvas在图片中图片的宽高varimgWidth = 297;
        //297//左右边距varimgHeight = 42/contentWidth*contentHeight;
        //左右边距varpageData = canvas.toDataURL('image/jpeg',1);
        varpdf = newImage();
        //有两个高度需要区分，一个是html页面的实际高度，和生成图片的页面高度(210)//当内容未超过图片一页显示的范围，无需分页if(leftHeight< pageHeight){
            pdf.addImage(pageData, 'JPEG', ,imgWidth, imgHeight);
            //左右边距}else{
                while (leftHeight > ) {
                    pdf.addImage(pageData, 'JPEG', , position, imgWidth, imgHeight)
                        //左右边距
                        leftHeight -= pageHeight;
                        position -= 297;
                            //避免添加空白页if(leftHeight>){
                                pdf.addPage();
                            }
                        }pdf.save(pdfName + ".jpg");
                    }})}
$(document).off('click', '.image-preview').on('click', '.image-preview', function() {
    imageDownload();
});

原文链接：https://blog.csdn.net/goyangyang1456/article/details/1144685