其他分享
首页 > 其他分享> > vue项目vue页面内容生成图片并保存本地方案

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

作者:互联网

使用html2canvas插件

1、安装:

npm install --save html2canvas

2、在需要使用的vue组件中引入: 

import html2canvas from "html2canvas"

3、将制定区域内转成图片 

  添加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 格式
    });
}    

4、创建隐藏的可下载链接  --- 必须同源(访问的网站域名与服务器域名一致)才能下载

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

5、不同源下载问题

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表现样式。

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

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

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

标签:canvas,vue,eleLink,image,html2canvas,本地,var,页面,图片
来源: https://www.cnblogs.com/slightFly/p/11828068.html