vue项目vue页面内容生成图片并保存本地方案

使用html2canvas插件 css

官网：http://html2canvas.hertzen.com/html

一、安装：vue

npm install --save html2canvas

二、在须要使用的vue组件中引入： npm

import html2canvas from "html2canvas"

三、将制定区域内转成图片 canvas

　　添加ref标记跨域

<div class="container" ref="imageDom"></div>

/** * 将页面指定节点内容转为图片 * 1.拿到想要转换为图片的内容节点DOM； * 2.转换，拿到转换后的canvas * 3.转换为图片 */ clickGeneratePicture() { //生成图片
    html2canvas(this.$refs.imageDom).then(canvas => { // 转成图片，生成图片地址
        this.imgUrl = canvas.toDataURL("image/png"); //可将 canvas 转为 base64 格式 }); }

四、建立隐藏的可下载连接 --- 必须同源（访问的网站域名与服务器域名一致）才能下载
浏览器

var eleLink = document.createElement("a"); eleLink.href = this.imgUrl; // 转换后的图片地址
eleLink.download = "历史曲线图"; document.body.appendChild(eleLink); // 触发点击
eleLink.click(); // 而后移除
document.body.removeChild(eleLink);

五、不一样源下载问题服务器

downloadIamge(imgsrc, name) {//下载图片地址和图片名
    var image = new Image(); // 解决跨域 Canvas 污染问题
    image.setAttribute("crossOrigin", "anonymous"); image.onload = function() { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; var context = canvas.getContext("2d"); context.drawImage(image, 0, 0, image.width, image.height); var url = canvas.toDataURL("image/png"); //获得图片的base64编码数据

        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 建立一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
 }; image.src = imgsrc; }, downs(){ this.downloadIamge(this.pic.url, 'pic') }

***页面有些内容不能在生成的图片内显示网络

之因此可以生成图片，是由于将页面指定的内容DOM元素转成了canvas，在转换的时候，并非全部的css属性都支持，好比：box-shadow, text-overflow:ellipsis等。
所以，图片内容出现空白的时候，建议修改css表现样式。app

生成的canvas宽高大小，是否容许跨域图片等，读者可参考官方文档进行相应设置。
生成的图片背景默认为白色，能够经过backgroundColor属性修改背景颜色，使用以下：

html2canvas(this.$refs.imageDom, { backgroundColor: null // null 表示设置背景为透明色
})

踩坑见：http://caibaojian.com/h5-download.html

亲采坑

　一、生成的图片有偏移，显示不完整，使用以下处理，好使

share() { var width = $('.share')[0].offsetWidth; //dom宽
        var height = $('.share')[0].offsetHeight; //dom高 // 解决图片模糊
        var scale = 2;//放大倍数
        var canvas = document.createElement('canvas'); canvas.width = width * 2; canvas.height = height * 2; canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; var context = canvas.getContext('2d'); context.scale(scale, scale); //设置context位置，值为相对于视窗的偏移量负值，让图片复位(解决偏移的重点)
                var rect = $('.share').get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
        context.translate(-rect.left, -rect.top); var opts = { canvas: canvas, useCORS: true, // 【重要】开启跨域配置
            scrollY: 0, // 纵向偏移量 写死0 能够避免滚动形成偶尔偏移的现象
 }; html2canvas($(".share")[0], opts).then(canvas => { // 使用toDataURL方法将图像转换被base64编码的URL字符串
            var src = canvas.toDataURL(); // 显示图片隐藏dom（图片生成后的操做）
            $('.share-wrap').addClass('hidden'); $('.share-canvas').removeClass('hidden'); $('.share-canvas').find('img').attr('src', src); }); }

二、报错：失败 - 网络错误

1）quality值设置小一些 --无用

使用 canvas.toDataURL('image/jpeg',1);能够对canvas导出内容作格式转换，若是导出的图片太大，能够将quality值设置小一些，0~1,1表明无损

2）html转canvas，再用canvas输出为base64图片，base64经过url的data写法的方式实现下载。

出现这个缘由是生成的图片太大，接着生成的base64太长，超出了浏览器对于url的限制。
具体看这个博客:URL传值问题，不一样浏览器对URL的长度要求（https://blog.csdn.net/jierry_wang/article/details/6796654）

解决方法：换一种方式来下载图片。看了下canvas有几个方法，转url的是toDataURL，而toBlob就是解决方案。

blob的文档能够参考一下这里:细说Web API中的Blob

修改以后的代码以下：

canvas.toBlob((blob)=>{ let eleLink = document.createElement("a"); eleLink.download = "监测数据图"; eleLink.href = URL.createObjectURL(blob); // 转换后的图片地址
 document.body.appendChild(eleLink); // 触发点击
 eleLink.click(); // 而后移除
 document.body.removeChild(eleLink); this.genLoading = false; },'image/png',1)

不报错了，可是仍是不行，，生成的图片依旧不完整，以下，，可能由于个人实在是太多了（153*3个图表）

办法依然再找，，，先记录到这