百变鹏仔-专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > JavaScript > 正文

vue将页面生成图片 vue生成海报

作者:鹏仔先生日期:2024-04-16 16:39:14浏览:355分类:JavaScript

    Hello,大家好,我是小编鹏仔,近几年开发项目中,经常用到将网页生成海报图片功能,每次使用都要去查找复制一下的,比较麻烦还费时间,还是自己整理到自己的博客方便,那么本次鹏仔就给大家整理一下vue使用html2canvas插件将网页生成图片吧!


34532453.gif

    如上图所示功能是开发了一个电子签名触屏版,右上角框框是摄像头(因电脑没配置摄像头,所以效果图中拍照区显示为空),左侧为签名区域,签名拍照成功后点击保存,会将签名区和拍照区截图为整张图保存下来。


第一步,我们先在vue项目中输入以下命令安装依赖

npm install --save html2canvas

第二步,下载好依赖后,我们在需要使用的页面引入

import html2canvas from 'html2canvas';

第三步,在需要生成图片的盒子添加ref

<div class="layer" ref="canvasImg">需要生成图片的区域</div>

第四步,在 methods 中执行生成方式

async createImage() {
  try {
    const canvas = await html2canvas(this.$refs.canvasImg) // 在这里,将需要转换成图片的部分作为参数传入html2canvas
    const image = canvas.toDataURL() // 将生成的canvas转换为DataURL格式
    this.imgUrl = image;
    console.log(image) // 可以将image自行存储
  } catch (e) {
    throw new Error(e)
  }
}


鹏仔建议您将执行方式写在 $nextTick 中执行

this.$nextTick(() => {
 
})


【鹏仔扩展】:您也可以使用相同插件 dom-to-image 来实现也是可以的,基本使用方法差不多。


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯