15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 js

html2canvas使用方法(页面生成图片)

王鹤翔| 发布于 2021-10-16 13:14:05| 683阅读| 0点赞| 0评论
举报

页面中标签里的内容,需要下载成图片,可以使用html2canvas

cnpm install html2canvas --save

先安装插件,cnpm(淘宝)比npm快,可以节省很多时间

安装cnpm教程在勤奋鸟后台搜索


安装成功后,需要的页面里引入



引入之后,所需代码


  //点击生成图片
    toImage () {
      html2canvas(this.$refs.capture,{
        backgroundColor: null
    }).then(canvas => {
//获取图片base64地址,如果想要展示图片即可直接展示
        // let dataURL = canvas.toDataURL("image/png");
        // this.imgUrl = dataURL;
        //创建一个a标签,直接下载生成的图片
        let link = document.createElement("a");
        link.href = canvas.toDataURL();
        link.setAttribute("download", "赛事分享.png");
        link.style.display = "none";
        document.body.appendChild(link);
        link.click();
      });
    },

直接复制即可


link.setAttribute("download", "赛事分享.png"); 这里是设置图片的名字


ref对应着js代码里    html2canvas(this.$refs.capture,{    

ref所在标签里的内容是生成图片的内容

注意:页面里的内容不要跨域,,跨域图片会在生成图片中呈空白显示



0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

王鹤翔
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部