搜索
简帛阁>技术文章>vue3如何将html元素变成canvas(海报生成),进行图片保存/截图

vue3如何将html元素变成canvas(海报生成),进行图片保存/截图

将html元素变成canvas(海报生成),进行图片保存/截图

// 网页上只有一张图片 我们可以直接就进行图片保存
// 但是你想 保存这张图片的时候 顺便把下面的字也带上  相当于截图  那请你像我这样做
 <div id="capture" style="padding: 10px; background: #fff">
      <img :src="whoImg" style="width: 300px" alt="" />
      <h4 style="color: #000">Hello world!</h4>
 </div>
 // 触发按钮
 <button @click="isShow()">生成海报</button>
 //这里是创建一个容器 存放你待会想保存的图片  也就是你想要的截图
<div ref="wrapper" id="wrapper" v-show="show" @click="remove()"></div>

// 引入插件 没有就直接下 npm install html2canvas filesaver --save
import html2canvas from 'html2canvas';

setup() {
// 随便搞张图
let whoImg=require('../assets/1.png').default;
// 绑定你的容器
let wrapper = ref();
// 控制容器显示
let show = ref(false);
// 锁 防止 多次生成
let lock = ref(1);
// 触发
const isShow = () => {
   show.value = true;
   //  html2canvas的方法  传你要截图的盒子  会把盒子内的所有元素都变成一张canvas图片
   html2canvas(document.querySelector('#capture')).then((canvas) => {
   if (lock.value) {
   // 给容器加入这个canvas
      wrapper.value.appendChild(canvas);
      lock.value = 0;
    }
  });
};
// 移除这个容器内容
const remove = () => {
      show.value = false;
      if (!lock.value) {
        lock.value = 1;
        wrapper.value.innerHTML = '';
      }
 };


}

// 图片大小
img {
    width: 300px;
 }
 // 放canvas这个容器的大小
#wrapper {
  width: 500px;
  height: 500px;
  position: fixed;
  top: 0;
  left: 0;
  // 这下面是vant自定义的组件样式用的 不打紧
  z-index: var(--van-overlay-z-index);
  background-color: var(--van-overlay-background-color);
}

使用html2canvas将页面转化为图片

微信端将页面截屏之后保存到本地,使用了html2canvas插加粗样式

install

npm install --save html2canvas

在所需页面引入

import html2canvas from "html2canvas"

use

<div ref="imageWrapper">
      <div class="success">
        <div class="img">
          <img class="img-icon" src="../assets/success.png"/>
          <p style="font-weight: 600; font-size: 18px">支付成功</p>
        </div>
      </div>
      <div class="success-detail">
        <el-row style="margin-top: 10px;">
          <el-col :span="5" class="col-left-suc">收款商家</el-col>
          <el-col :span="16" class="col-right">{{merchant}}</el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="5" class="col-left-suc">费用名称</el-col>
          <el-col :span="16" class="col-right">{{contName}}</el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="5" class="col-left-suc">缴费金额</el-col>
          <el-col :span="16" class="col-right">{{chargePrice}}元</el-col>
        </el-row>
      </div>
    </div>
    <div class="button">
      <el-button style="width: 70%;" type="success" size="small" @click="toImage">生成截图</el-button>
    </div>

vue中用ref来指定你需要截屏的dom

toImage() {
        html2canvas(this.$refs.imageWrapper).then(canvas => {
          let dataURL = canvas.toDataURL("image/png");
          this.imgUrl = dataURL;
          if (this.imgUrl !== "") {
            this.dialogTableVisible = true;
          }
        });
      }
1、使用html2canvas存在的问题:不同的机型绘制位置不同的问题。这个主要因为Html动态设置了html的dpr。(dpr可以解决屏幕显示不了1pxborder和无法显示小于12px的文字的问
前言最近接到一个需求,用文字和图片合成一个海报,用于活动结尾页在微信长按分享,接到需求的第一时间,我就想到用canvas来画,但是看到canvas繁琐的绘制过程,不由得感到头大,后几经搜索,果然发现已
canvas数组保存functiondownLoadImage(canvas,name){varadocumentcreateElement(a);ahrefcanvastoDataURL();a
利用JavaScript页面截图生成图片传给后台的插件:html2canvas一、总结一句话总结:10<scripttypetext/javascript>11functiontakeS
用方法项目中引入npminstallhtml2canvashtml代码//html代码<!把需要生成截图元素放在一个元素容器里,设置一个ref><divclassimage_to
效果图代码<!DOCTYPEhtml><htmllangen><head><metacharsetUTF8><title>Title<
在项目中经常会遇到需要不同的二维码放到一张通用图片上,提供用户下载简单来说,就是利用canvas同等比例的二维码在图片上叠加,生成海报1设置相应比例一般来说海报背景都是固定的,可以直接放在pub
1引包npminstallqrcodejs2savenpminstallsavehtml2canvasimporthtml2canvasfromhtml2canvasimportQRCodefromq
主要思想是借助Canvas自己的APItoDataURL()来实现,整个实现HTML+JavaScript的代码很简单。复制代码代码如下:<html><metahttpequivXU
data(){return{logoimg:'',//logo图片ctx:'',qrBase64:'',//二维码地址}}//点击下载按钮访问downloadposterPicture(){varca