vue实现仿手写稿样式，可导出成png图片

最新推荐文章于 2024-04-28 11:59:37 发布
最新推荐文章于 2024-04-28 11:59:37 发布
阅读量237 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/god_sword_/article/details/131878550
版权

文章目录

环境

安装html2canvas，用于将指定标签下的全部子节点转换为图片

 npm install html2canvas

实现

<template>
  <div class="handwrite">
    <div id="left" class="left">
      <div id="backImg" class="backImg" :style="{ backgroundImage: `url(${defaultImgUrl})` }">
        <div id="textContent" class="textContent">

        </div>
      </div>
    </div>
    <div class="right">
      <el-input type="textarea" :autosize="{minRows: 20, maxRows: 20 }" resize="none" v-model="text"></el-input>
      <div class="setting">
        <el-row>
          <el-col :span="12"> <label>颜色: </label> <input type="number" v-model="R" min="0" max="255"> <input type="number" v-model="G" min="0" max="255"> <input type="number" v-model="B" min="0" max="255"> </el-col>
          <el-col :span="12"> <label>默认背景: </label>
            <el-radio-group v-model="defaultImgUrl">
              <el-radio :label="item.value" v-for="(item,index) in defaultImgOptions" :key="index">{{item.label}}</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <br>
        <el-row>
          <el-col :span="12"> <label>字体: </label>
            <!--            <input id="fontFile" type="file" name="fontFile" accept=".ttf,.tff" @change="" />-->
            <el-radio-group v-model="fontType">
              <el-radio :label="item.value" v-for="(item,index) in fontOptions" :key="index">{{item.label}}</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="12"> <label>背景图: </label> <input id="imgFile" type="file" name="imgFile" accept="image/png, image/jpeg, image/jpg" @change="selectImg" /> </el-col>
        </el-row>
        <br>
        <el-row>
          <el-col :span="8"> <label>字体水平间距: </label> <input type="number" v-model="level" min="-10" max="50"></el-col>
          <el-col :span="8"> <label>字体竖直间距: </label> <input type="number" v-model="vertical" min="10" max="50"> </el-col>
          <el-col :span="8"> <label>字体大小: </label> <input type="number" v-model="size" min="-10" max="50"> </el-col>
        </el-row>
        <br>
        <el-row>
          <el-col :span="6"> <label>左间距: </label> <input type="number" v-model="leftPitch" min="0" max="30"></el-col>
          <el-col :span="6"> <label>右间距: </label> <input type="number" v-model="rightPitch" min="0" max="30"> </el-col>
          <el-col :span="6"> <label>上间距: </label> <input type="number" v-model="topPitch" min="0" max="30"> </el-col>
          <el-col :span="6"> <label>下间距: </label> <input type="number" v-model="bottomPitch" min="0" max="30"> </el-col>
        </el-row>
        <br>
        <el-row>
          <el-col :span="6"> <label>文字旋转角度: </label> <input type="number" v-model="rotaAngle" min="-90" max="90"></el-col>
          <el-col :span="6"> <label>背景旋转角度: </label> <input type="number" v-model="backRotaAngle" min="-90" max="90"></el-col>
        </el-row>
        <br>
        <el-row>
          <el-button @click="exportImg" style="margin-left: 80%">导出图片</el-button>
        </el-row>
      </div>
    </div>

  </div>

</template>

<script >
import html2canvas from "html2canvas";

export default {
  name: "handwrite",
  data() {
    return {
      text: "",

      R: 0,
      G: 0,
      B: 0,
      defaultImgUrl: require('@/assets/handwrite/a4.jpg'),
      backImgUrl: "",
      level: 0,
      vertical: 10,
      size: 15,

      leftPitch: 0,
      rightPitch: 0,
      topPitch: 0,
      bottomPitch: 0,

      rotaAngle: 0,
      backRotaAngle: 0,

      defaultImgOptions: [
        {
          label: "A4",
          value: require('@/assets/handwrite/a4.jpg'),
        },
        {
          label: "A4-横线(红)",
          value: require('@/assets/handwrite/a4-line.jpg'),
        },
        {
          label: "A4-横线(黑)",
          value: require('@/assets/handwrite/a4-line-black.jpg'),
        },
        {
          label: "牛皮纸",
          value: require('@/assets/handwrite/niupi.jpeg'),
        },
        {
          label: "信签纸",
          value: require('@/assets/handwrite/xz.jpeg'),
        },
      ],

      fontType: "caoshu",
      fontOptions: [
        {
          label: "字体1",
          value: "XingKai",
        },
        {
          label: "字体2",
          value: "caoshu",
        },
        {
          label: "字体3",
          value: "XingShu",
        },
      ]
    }
  },
  computed: {},
  mounted() {

  },
  watch: {
    //文本
    text(){
      var textArry = this.text.split("") || [];
      if(this.isEmpty(textArry) || textArry.length <= 0){
        return ;
      }
      let textContent = document.getElementById("textContent");
      while(textContent.hasChildNodes()) //当div下还存在子节点时 循环继续
      {
        textContent.removeChild(textContent.firstChild);
      }
      let number = 0;
      textArry.forEach((item) => {
        var span = document.createElement("span");
        if(" " == item || ' ' == item ){
          item = "&emsp;";
        }
        if("\n" == item ){
          item = "<br>";
        }
        span.innerHTML = item;
        if(this.size >=15 ){
          span.style.fontSize = Math.floor(Math.random() * (this.size - (this.size-3) + 1)) + (this.size-3)+"px";
        }
        span.style.transform = "rotate("+(Math.floor(Math.random() * (5 - (-5) + 1)) + (-5))+"deg)";
        if(number%5 == 0){
          span.style.marginLeft = (Math.floor(Math.random() * (3 - (0) + 1)) + (0)) + "px";
        }
        if(number%3 == 0){
          span.style.marginLeft = (Math.floor(Math.random() * (3 - (0) + 1)) + (0)) + "px";
        }
        if(number%9 == 0){
          span.style.marginLeft = (Math.floor(Math.random() * (3 - (0) + 1)) + (0)) + "px";
        }
        span.style.fontFamily = this.fontType;
        number = number +1;
        textContent.appendChild(span);
      });
    },
    //RGB颜色
    R(){
      let textContent = document.getElementById("textContent");
      let rgb = "rgb("+this.R+","+this.G+","+this.B+")";
      textContent.style.color = this.colorHex(rgb);
    },
    //RGB颜色
    G(){
      let textContent = document.getElementById("textContent");
      let rgb = "rgb("+this.R+","+this.G+","+this.B+")";
      textContent.style.color = this.colorHex(rgb);
    },
    //RGB颜色
    B(){
      let textContent = document.getElementById("textContent");
      let rgb = "rgb("+this.R+","+this.G+","+this.B+")";
      textContent.style.color = this.colorHex(rgb);
    },
    //文字水平间距
    level(){
      let textContent = document.getElementById("textContent");
      textContent.style.letterSpacing = this.level+"px";
    },
    //文字竖直间距
    vertical(){
      let textContent = document.getElementById("textContent");
      textContent.style.lineHeight = this.vertical+"px";
    },
    //文字大小
    size(){
      let textContent = document.getElementById("textContent");
      textContent.style.fontSize = this.size+"px";

      var textArry = this.text.split("") || [];
      if(this.isEmpty(textArry) || textArry.length <= 0){
        return ;
      }
      while(textContent.hasChildNodes()) //当div下还存在子节点时 循环继续
      {
        textContent.removeChild(textContent.firstChild);
      }
      let number = 0;
      textArry.forEach((item) => {
        var span = document.createElement("span");
        if(" " == item || ' ' == item ){
          item = "&emsp;";
        }
        if("\n" == item ){
          item = "<br>";
        }
        span.innerHTML = item;
        if(this.size >=15 ){
          span.style.fontSize = Math.floor(Math.random() * (this.size - (this.size-3) + 1)) + (this.size-3)+"px";
        }
        span.style.transform = "rotate("+(Math.floor(Math.random() * (5 - (-5) + 1)) + (-5))+"deg)";
        if(number%5 == 0){
          span.style.marginLeft = (Math.floor(Math.random() * (3 - (0) + 1)) + (0)) + "px";
        }
        if(number%3 == 0){
          span.style.marginLeft = (Math.floor(Math.random() * (3 - (0) + 1)) + (0)) + "px";
        }
        if(number%9 == 0){
          span.style.marginLeft = (Math.floor(Math.random() * (3 - (0) + 1)) + (0)) + "px";
        }
        span.style.fontFamily = this.fontType;
        number = number +1;
        textContent.appendChild(span);
      });
    },
    //字体
    fontType(){
      var textArry = this.text.split("") || [];
      if(this.isEmpty(textArry) || textArry.length <= 0){
        return ;
      }
      let textContent = document.getElementById("textContent");
      while(textContent.hasChildNodes()) //当div下还存在子节点时 循环继续
      {
        textContent.removeChild(textContent.firstChild);
      }
      let number = 0;
      textArry.forEach((item) => {
        var span = document.createElement("span");
        if(" " == item || ' ' == item ){
          item = "&emsp;";
        }
        if("\n" == item ){
          item = "<br>";
        }
        span.innerHTML = item;
        if(this.size >=15 ){
          span.style.fontSize = Math.floor(Math.random() * (this.size - (this.size-3) + 1)) + (this.size-3)+"px";
        }
        span.style.transform = "rotate("+(Math.floor(Math.random() * (5 - (-5) + 1)) + (-5))+"deg)";
        if(number%5 == 0){
          span.style.marginLeft = (Math.floor(Math.random() * (3 - (0) + 1)) + (0)) + "px";
        }
        if(number%3 == 0){
          span.style.marginLeft = (Math.floor(Math.random() * (3 - (0) + 1)) + (0)) + "px";
        }
        if(number%9 == 0){
          span.style.marginLeft = (Math.floor(Math.random() * (3 - (0) + 1)) + (0)) + "px";
        }
        span.style.fontFamily = this.fontType;
        number = number +1;
        textContent.appendChild(span);
      });
    },
    //左边距
    leftPitch(){
      let textContent = document.getElementById("textContent");
      textContent.style.paddingLeft = this.leftPitch+"px";
    },
    //右边距
    rightPitch(){
      let textContent = document.getElementById("textContent");
      textContent.style.paddingRight = this.rightPitch+"px";
    },
    //上边距
    topPitch(){
      let textContent = document.getElementById("textContent");
      textContent.style.paddingTop = this.topPitch+"px";
    },
    //下边距
    bottomPitch(){
      let textContent = document.getElementById("textContent");
      textContent.style.paddingBottom = this.bottomPitch+"px";
    },
    //字体旋转角
    rotaAngle(){
      let textContent = document.getElementById("textContent");
      textContent.style.transform = "rotate("+this.rotaAngle+"deg)";
    },
    //背景旋转角
    backRotaAngle(){
      let backImg = document.getElementById("backImg");
      backImg.style.transform = "rotate("+this.backRotaAngle+"deg)";
    }
  },
  methods: {
    //选择背景图
    selectImg(){
      //生成的临时url
      debugger
      const url = URL.createObjectURL(document.querySelector('#imgFile').files[0]);
      this.defaultImgUrl = url;
    },
    //导出图片
    exportImg(){
      html2canvas(document.querySelector("#backImg")
        ,{
          //高度和宽度 背景色
          // width: 75,
          // height: 75,
          // backgroundColor: "#00ff00",
          //使用 scale 属性可以修改渲染时的放大倍数（默认为 1），将其调大可以解决低分辨率设备下生成的图片模糊问题。
          scale: 2,
          //指定渲染的 Canvas 如果页面上原先就有个 canvas 元素，我们希望可以将图片绘制在它上面，可以使用 canvas 属性设置。
          // canvas: document.querySelector("#myCanvas")
        }
      ).then(canvas => {
        // 将canvas转换成img的src流
        // var imgUrl = canvas.toDataURL("image/png");
        // console.log("base64编码数据：", imgUrl);
        // 此方法可以设置截图质量（0-1）
        // var imgUrl = canvas.toDataURL("image/png", 1);
        // console.log("base64编码数据：", imgUrl);
        //将canvas内容保存为文件并下载
        canvas.toBlob(function(blob) {
          saveAs(blob, "手写稿.png");
        });
      });

    },
    /**
     *
     * @param 校验是否为空
     */
    isEmpty(obj) {
      if (obj == undefined || obj == null || obj == '' || obj == "" ) {
        return true
      }
      return false
    },

    /**
     * RGB转换为16进制
     * @returns {string}
     */
    colorHex(color) {
      // RGB颜色值的正则
      var reg = /^(rgb|RGB)/;
      if (reg.test(color)) {
        var strHex = "#";
        // 把RGB的3个数值变成数组
        var colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
        // 转成16进制
        for (var i = 0; i < colorArr.length; i++) {
          var hex = Number(colorArr[i]).toString(16);
          if (hex === "0") {
            hex += hex;
          }
          strHex += hex;
        }
        return strHex;
      } else {
        return String(color);
      }
    },

    /**
     * 16进制转换为RGB
     * @returns {string}
     */
    colorRgb(color) {
      // 16进制颜色值的正则
      var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
      // 把颜色值变成小写
      var color = color.toLowerCase();
      if (reg.test(color)) {
        // 如果只有三位的值，需变成六位，如：#fff => #ffffff
        if (color.length === 4) {
          var colorNew = "#";
          for (var i = 1; i < 4; i += 1) {
            colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
          }
          color = colorNew;
        }
        // 处理六位的颜色值，转为RGB
        var colorChange = [];
        for (var i = 1; i < 7; i += 2) {
          colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
        }
        return "RGB(" + colorChange.join(",") + ")";
      } else {
        return color;
      }
    }

  }
}
</script>


<style scoped lang="scss">
.handwrite{
  width: 100%;
  height: 100%;


  .left{
    background-color: #c01111;
    float: left;
    margin-left: 3%;
    width: 45%;
    height: 98vh;
    padding: 5px;
    margin-bottom: 10px;

    .backImg{
      width: 100%;
      height: 100%;
      -moz-background-size:100% 100%;
      background-size:100% 100%;
    }

    .textContent {
      margin-top: 0%;
    }
  }

  .right{
    background-color: #1ab394;
    float: left;
    margin-left: 3%;
    width: 45%;
    height: 98vh;
    padding: 5px;
    margin-bottom: 10px;

    .setting{
      margin-top: 5px;
    }
  }
}


</style>

效果

在这里插入图片描述

代码

aspirant-complete
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html2canvas把div保存为图片,在vue中利用html2canvas截取div并保存为png图片
weixin_32467423的博客
06-10 441
1.template中的代码按钮触发保存图片(这里使用的是element ui)你需要截取的内容(要保证这个内容是在页面上可见 否则截取会是空白)2.methods中的方法//注意要在script标签前面引入html2canvasimport html2canvas from 'html2canvas';//下面是methods中的内容//图片转换格式的方法 直接使用就好 不需要知道为什么da...
vue2将html元素转换成图片
cpc980209的博客
06-29 1902
需要用到html2canvas插件安装插件 在需要的页面引入插件 在需要转换的元素上绑定ref的值，（这里这个元素内包括元素本身的所有样式，都会被转换）
vue 前端将html 导出成图片，并下载压缩包
最新发布
weixin_43180390的博客
04-28 175
【代码】vue 前端将html 导出成图片，并下载压缩包。
canvas在图片上生成文字
dbp47524的博客
02-05 1225
newImage(text) { // 生成图片 var imageBox = document.getElementById("newimage") var canvas = document.getElementById("canvas") va...
python 3_最值得期待的Python 3.9的新功能
weixin_39623620的博客
11-24 121
Python 3.9 beta预计下个月就要发布了，那么3.9有那些让我们期待的新功能和变更呢？本我我们一起来说Python 3.9的新功能的。安装测试版为了能够实际探索Python 3.9 的功能，我们需要先下载一个Python 3.9 alpha/beta并安装。wget python.org/ftp/python/3.9.0/Python-3.9.0a5.tgztar xzvf Python...
vue实现word，pdf文件的导出功能
10-18
给大家介绍了vue实现word或pdf文档导出的功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
Vue将页面导出为图片或者PDF
10-16
主要为大家详细介绍了Vue导出页面为PDF格式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue使用canvas实现移动端手写签名
10-14
主要为大家详细介绍了基于vue使用canvas实现移动端手写签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Springboot vue导出功能实现代码
08-19
主要介绍了Springboot vue导出功能实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue动态设置文字布局方式_VUE+Canvas实现输入文字生成对应的字体图片小功能
weixin_42371234的博客
02-22 1371
你是不是经常浏览字体网站的时候，发现他们的“字体生成器”和预览功能很好奇，为什么输入框输入文字之后，点击预览，下面都会修改对应的字体内容，以便达到了没有安装字体也可以预览这个字体效果的目的。原理哔哔：其实这个功能不难，原理很简单，就是通过js动态修改字体样式，然后用canvas渲染出字体，将图片的src路径替换，就实现了我们想要的目的。光说不练假把式，为了快速实现功能我没有用原生js或jquery...
vue将html内容转为图片并下载到本地
m0_58565372的博客
11-03 2344
需求：将自己写的html内容转化为图片并可以下载到本地。
Vue+canvas 实现自定义文字样式转图片，文字与图片进行合成（内蒙古民族大学实习项目）
weixin_44758134的博客
04-03 2758
Vue+canvas 实现自定义文字样式转图片，文字与图片进行合成
vue canvas应用 —— 页面文字内容生成一张图片
且听风吟的博客
11-17 2447
根据页面文字内容生成一张图片（1）首先，安装 html2canvas 库：（2）页面中引入：（3）具体使用： 遇到了一需求，根据页面内容，生成一张图片，网上查找了相关资料，可以用html2canvas来实现。具体实现如下： （1）首先，安装 html2canvas 库： 引入方式： npm安装： npm install --save html2canvas yarn安装： yarn add html2canvas （2）页面中引入： import html2canvas from 'html2can
基于Vue开发的后台系统页面，将HTML内容转化成图片并保存
SSGX1989的博客
08-16 1277
使用html2canvas将HTML内容生成图片并下载
vue下使用html2canvas保存html为png并下载图片
别告诉我有Bug
12-25 5311
效果图： 步骤： 1.先安装html2canvas npm install --save html2canvas 注意：我这里报错：npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ETIMEDOUT: request to https://regi...
vue中将html页面转为图片并且下载该图片
weixin_40800926的博客
11-07 4473
1.下载html2canvas npm install html2canvas 2.对应页面引入该插件 import html2canvas from 'html2canvas'; 3.具体用法 （要element使用带有一些（可选）选项的html2canvas呈现，只需调用html2canvas(element, options);） html2canvas(documen...
使用vue实现HTML页面生成图片
谷子的博客
03-26 5808
这篇文章写得是实现HTML页面生成图片（附带二维码）并保存，之前做过这个需求，不过当时不太会使用VUE，采用的方法是后端来生成，前端也是使用了html2canvas辅助生成，比较麻烦，并且有延迟效果，刚好看到这篇文章，转载一番，做个记录。 背景 随着网络的发展，越来越多的网络平台应运而生。如何获得更多的流量，吸引更多的眼球已经成为网络平台生存、发展的必要条件。现在网络平台最常见的一种宣传方式就是人...
vue实现页面转换成pdf并导出的最好方案
06-02
实现页面转换成 PDF 并导出的最好方案，主要有两种方法：前端实现和后端实现。 前端实现： 在前端实现页面转换成 PDF 并导出，可以使用 jsPDF 和 html2canvas 库。jsPDF 是一个用于生成 PDF 文件的 JavaScript 库...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值