vue canvas 单页面(html)海报且显示多行文本与渐变文字

最新推荐文章于 2024-01-05 09:33:00 发布
最新推荐文章于 2024-01-05 09:33:00 发布
阅读量512 收藏 1
点赞数 1
分类专栏： vue html+css 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leng0920/article/details/118493301
版权
经验分享 同时被 3 个专栏收录
149 篇文章 1 订阅
订阅专栏
vue
136 篇文章 4 订阅
订阅专栏
html+css
113 篇文章 1 订阅
订阅专栏

未输入内容之前:

生成后的图片:

用下列图片到https://c.runoob.com/front-end/59 转换成base64格式后放入imgSrc的""中

完整代码:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>arpara产品发布会邀请函</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css" />
  <style>
    #app {
      position: relative;
    }

    body {
      margin: 0;
    }

    [v-cloak] {
      display: none;
    }

    .bg {
      width: 100vw;
      position: relative;
      overflow: hidden;
    }

    #scream {
      width: 100%;
      height: 100%;
    }

    .closeImg {
      position: absolute;
      top: 52px;
      right: 8px;
      width: 34px;
      height: 34px;
      z-index: 99999;
    }

    .pop {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: rgba(0, 0, 0, 0.6);
      z-index: 98;
    }

    .saveImg {
      display: block;
      margin-top: 64px;
    }

    .popImg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999;
      text-align: center;
      font-size: 40px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #fff;
      text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
      letter-spacing: 4px;
    }
    .inputMediaName{
      width: 900px;
      border: none;
      color: #4D4D4D;
     
      background-image: linear-gradient(55deg, #FE51A1 0%, #C98EBE 26.8798828125%, #B1ACD7 49.31640625%, #99A6E3 73.6572265625%, #6060D4 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: FZLanTingHei-B-GBK;
      font-size: 60px;
      font-weight: 400;
      font-family: PingFang SC;
      position: absolute;
      top: 52%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      text-align: center;
      outline: none;
  
    }
    .inputMediaName textarea{
        width: 900px;
      }
    .inputName {
      max-width: 360px;
      border: none;
      background: transparent;
      color: #2A1F1C;
      font-size: 44px;
      font-weight: bold;
      font-family: FZLanTingHei-B-GBK;
      position: absolute;
      top: 62%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      text-align: center;
      outline: none;
    }

    .inputMediaName::-webkit-input-placeholder {
  /* WebKit browsers */
      font-size: 60px;
      font-weight: 400;
      color: #4D4D4D;
      background: linear-gradient(55deg, #FE51A1 0%, #C98EBE 26.8798828125%, #B1ACD7 49.31640625%, #99A6E3 73.6572265625%, #6060D4 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

  .inputMediaName:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    font-size: 60px;
      font-weight: 400;
        color: #4D4D4D;
        background: linear-gradient(55deg, #FE51A1 0%, #C98EBE 26.8798828125%, #B1ACD7 49.31640625%, #99A6E3 73.6572265625%, #6060D4 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

      }

  .inputMediaName::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-size: 60px;
      font-weight: 400;
        color: #4D4D4D;
        background: linear-gradient(55deg, #FE51A1 0%, #C98EBE 26.8798828125%, #B1ACD7 49.31640625%, #99A6E3 73.6572265625%, #6060D4 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

  .inputMediaName::-ms-input-placeholder {
    /* Internet Explorer 10+ */
    font-size: 60px;
      font-weight: 400;
        color: #4D4D4D;
        background: linear-gradient(55deg, #FE51A1 0%, #C98EBE 26.8798828125%, #B1ACD7 49.31640625%, #99A6E3 73.6572265625%, #6060D4 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    .inputName::-webkit-input-placeholder {
      color: #2A1F1C;
    }

    .inputName::-moz-placeholder {
      color: #2A1F1C;
    }

    .inputName::-moz-placeholder {
      color: #2A1F1C;
    }

    .inputName::-ms-input-placeholder {
      color: #2A1F1C;
    }


    #myCanvas {
      position: absolute;
      left: -9999px;
      top: -9999px;
    }

    .createImg {
      width: 90%;
      left: 5%;
      position: fixed;
      bottom: 43px;
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #fff;
      height: 88px;
      line-height: 88px;
      background: #0064FF;
      opacity: 1;
      border-radius: 8px;
      z-index: 9;
      text-align: center;
    }

  </style>
</head>


<body>
  <div id="app" v-cloak>
    <img id="scream" :src="imgSrc" alt="The Scream" @load="afterLoad">
    <textarea autofocus type="" v-model="inputItem.mediaName" class="inputMediaName" placeholder="点击输入邀请媒体名称">
    </textarea>
    <input autofocus type="text" v-model="inputItem.name" class="inputName" placeholder="点击输入姓名">
    <div v-on:click='canvas' class="createImg">生成邀请函</div>
    <canvas id="myCanvas" :width="imgWidth" :height="imgHeight" ref="canvas">
      您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <div class="pop" v-if='showImg' v-on:click="showImg = false">
    </div>
    <div class="popImg" v-if='showImg'>
      长按保存至相册
      <img :src="closeImg" class="closeImg" v-on:click="showImg = false" alt="">
      <img class="saveImg" :src="saveImg" alt="">
    </div>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        context: {},//canvas
        imgHeight: '1334',//图片高度
        imgWidth: '750',//图片高度
        inputItem:{
          mediaName:"",//媒体名称
          name: '',//姓名
        },
        saveImg: '',//保存图片
        showImg: false,//显示图片
        closeImg: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAxCAMAAABEQrEuAAAAzFBMVEUAAAD///86kuEIAAAARHRSTlMAAQIDBAUGBxcYGhshIiRLTVBUVVdZW2lwcnN0dXeEhYiLjI2VlpeYmZqcnZ6foKGjpKanqKmrrK2ur7CztbbBxMXIzKPOVfAAAAHqSURBVEjHnZZ5W8IwDMZZr6l4X3hfoBPBDSZzoODBvv93soMm6452e9xfaZvf2jTp27Za//g2Orf7TgM/snfT2UyN3Z8kSQK3FhDP0u97S1pnSfr1RQ3Aeyu/K2l2kyaIeFy73Uv7ZG0mgQ0RL8rrVDboUDUG3LykJ/gtSZtuHxDTLNxTHkO1QQKQcTXCXwHAcRHApKwCYBDDWEuBGABSjoUD4OdyxgGJiggfAVBYshirgZDm+qmv+t9KMWIsoR4L8y2bwgCZZQibAFCZKx6p4ZhAtYaq592QKQ4OMc0DkbGAKLgsUoR8AMDMBcdmymnutJypsj+5rahZDAgBYMZrjiYgSwBo3eGki0T/vli9ANC5BixYE21xMmRBmskRgRiWvBmA26pl3z7DVIsjbhAHZrpUliYgLOQjrMkHw8rikMrQXiSTbFsx+5EFwSO6yjSWZWCMhfv5cHGJJoFF1cDiw/NSLX0oZNp5wINcpckoZLlAeWDUZNTWwhFFhSnGgupdUg2UvvyVJDxziKjJfbfiBqoUMtTkoVu4FKu0NS+wnhoXPYN6ZwhcSd5qFuLVARoySJED1RjZHgEuXK/HsnGn0RZEraQr7fPCpWha2Bq5luZOw3eJm27y73Zqti+6R43ePocPl+3/PK7+AKHzueY3wvW7AAAAAElFTkSuQmCC',
        imgSrc: '全屏背景base64图片路径地址',
        toast: null
      },
      created() {

        // window.scrollTo(0, document.documentElement.clientHeight);
        this.toast = vant.Toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: '加载中...',
        });

      },
      mounted() {

      },
      methods: {
        
        canvas() {
          if (!this.inputItem.mediaName) {
            alert('请输入邀请媒体名称')
            return
          }
          if (!this.inputItem.name) {
            alert('请输入姓名')
            return
          }
          let imgs = new Image();
          imgs.src = this.imgSrc;
          let imgWidth = 0, imgHeight = 0, that = this;
          //获取图片宽高
          imgs.onload = function () {
            imgWidth = imgs.width
            imgHeight = imgs.height
            const canvas = that.$refs.canvas
            that.context = canvas.getContext("2d");
            that.context.drawImage(imgs, 0, 0, that.imgWidth, that.imgHeight);
            that.context.save();
            that.context.font = "bold 60px FZRUIZH_JW--GB1-0";
            that.context.textAlign = "center";
            var gradient= that.context.createLinearGradient(0,0,canvas.width,0);
            gradient.addColorStop("0","#FE51A1");
            gradient.addColorStop("0.25","#C98EBE");
            gradient.addColorStop("0.5","#B1ACD7");
            gradient.addColorStop("0.75","#99A6E3");
            gradient.addColorStop("1","#6060D4");
            that.context.fillStyle=gradient;
            that.context.lineWidth=1; 
            var str=that.inputItem.mediaName;
            var lineWidth = 0;
            var canvasWidth = canvas.width-50;
            var initHeight=740;//绘制字体距离canvas顶部初始的高度
            var lastSubStrIndex= 0; //每次开始截取的字符串的索引
            for(let i=0;i<str.length;i++){ 
                lineWidth+=that.context.measureText(str[i]).width; 
                if(lineWidth>canvasWidth){  
                  that.context.fillText(str.substring(lastSubStrIndex,i),376,initHeight);//绘制截取部分
                    initHeight+=70;//40为字体的高度
                    lineWidth=100;
                    lastSubStrIndex=i;
                } 
                if(i==str.length-1){//绘制剩余部分
                  that.context.fillText(str.substring(lastSubStrIndex,i+1),376,initHeight);
                }
            }
            // that.context.fillText(that.inputItem.mediaName, that.imgWidth / 2, 800, 360);
            that.context.font = "bold 44px FZRUIZH_JW--GB1-0";
            that.context.textAlign = "center";
            that.context.fillStyle = "#2A1F1C"
            that.context.fillText(that.inputItem.name, that.imgWidth / 2, 900, 360);
            that.context.save();
            document.body.scrollTop = document.documentElement.scrollTop = 0
            var base64Img = canvas.toDataURL('image/jpeg');
            that.showImg = true;
            that.saveImg = base64Img;

          };
          that.getData();//统计数量
        },
        afterLoad() {
          vant.Toast.clear();
        },
        getData() {
          $.post(`https://api-dev.tuoluohuodong.com/api/common/invitation/letter/template/num`, {}, function (res) {
            console.log(res, '成功')
          }, 'json')
        }
      },
    })

  </script>

</body>


</html>

 

性野喜悲
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序canvas多行文本绘制
qq_33943287的博客
04-08 1093
简单封装了一个微信小程序端绘制多行文本的功能 该功能是基于小程序canvas2D api进行绘制 可以实现： 自动绘制多行文本 多行文本上下，左右，居中对齐功能 设置最大行数，超出显示省略号 设置最大宽度，超出自动换行 行间距 一定注意canvas 的类型为2d <canvas id="myCanvas" type="2d" style="height:{{aniData.windowHeight}}px;width:{{aniData.windowWidth}}px"> </can
vue中多行文本标签_vue控制多行文字展开收起的实现示例
weixin_36214833的博客
02-22 516
这里讲一下，如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏)。效果：这里设置了控制三行，如果超过三行会展示，“显示更多” 超出文字显示省略号。点击“显示更多”会展开所有文案，按钮变成“收起”(未超出三行的时候)(展开)(收起)代码实现：{{introduce}}查看更多export default {name: 'Spread',data() {return {isShowMore: f...
vue中多行文本标签_Vue控制多行文字展开收起的实现示例_奈落_前端开发者
weixin_29510921的博客
02-11 986
这里讲一下，如何使用效果：这里设置了控制三行，如果超过三行会展示，“显示更多” 超出文字显示省略号。点击“显示更多”会展开所有文案，按钮变成“收起”(未超出三行的时候)(展开)(收起)代码实现：{{introduce}}查看更多export default {name: 'Spread',data() {return {isShowMore: false,isDescStatus: true,in...
vue3.0+TypeScript+html2Canvas生成海报方案
最新发布
weixin_42039805的博客
01-05 1304
该脚本遍历加载它的页面的DOM，收集所有元素的信息 在那里，然后它使用它来构建页面的表示。guration)，最常用的是代码中的width、height、scale、useCORS。(img-jKP8LzNI-1704418287347)]绘制海报-h5部分（以下是生成两张海报页面部分，根据不同需求绘制不同的页面），最常用的是代码中的width、height、scale、useCORS。在onMounted阶段获取海报所需要的数据-代码如下。绘制海报方法-canvasPoster。br />你如此着迷。
vue移动端，使用canvas生成商品海报及自定义海报
wei80231996的博客
03-05 1311
1.使用 vue-canvas-poster npm i vue-canvas-poster --save 2.在main.js入口文件中引入 import VueCanvasPoster from 'vue-canvas-poster' Vue.use(VueCanvasPoster) 3.html代码 <template> <div class> <vue-canvas-poster :widthPixels="0" :painting="pai
vue控制多行文字展开收起的实现示例
10-16
在Vue.js中，控制多行文字的展开与收起是一个常见的需求，特别是在处理长文本显示时。本示例提供了一种实现方式，通过CSS样式结合Vue的数据绑定和事件监听来达到这一目的。以下是对该实现的详细解释： 1. **CSS样式...
vue-canvas-poster 海报合成
08-13
Vue与Canvas的结合，意味着可以通过Vue的数据绑定和指令系统，动态地更新Canvas上的内容，实现交互式的海报设计。 海报合成涉及到的关键知识点有： 1. **Vue组件生命周期**：理解组件的初始化、挂载、更新和销毁...
vue ---- 基于canvas的绘制海报组件
03-04
这个基于canvas的海报组件项目展示了Vue.js与HTML5 Canvas技术的结合，为H5海报的动态生成提供了便利。通过学习和理解这个组件，开发者可以了解到Vue组件设计的最佳实践，以及如何利用Canvas进行复杂图形的绘制，这...
在Vue中用canvas实现二维码和图片合成海报的方法
10-16
在Vue.js中，使用canvas元素实现二维码和图片的合成海报是一项常见的需求，特别是在移动应用或网页设计中。本文将详细讲解如何在Vue项目中通过canvas完成这一任务。 首先，我们需要导入必要的图片资源，如海报背景...
Vue海报二维码组合图片生成和下载-qrcodejs2-html2canvas
05-08
vue-qrcode-html2canvas 生成海报带二维码-可保存图片 本项目是使用 qrcodejs2 生成二维码图片 然后使用 html2canvas 将生成的二维码图片和html文本结构合成为base64图片数据 让后展示下载分享 本项目核心代码在 ...
html+js+canvas实现画板涂画功能和vue+canvas实现画板涂画功能
sumimg的博客
09-28 1783
1，html+js+canvas实现画板涂画功能 效果如下： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <style> #canvas{cursor:crosshair;} #red{background:red; width:30px;height: 27px} #blue{background:blue; width:30px;height: 27px} #yellow{ba
canvas基础--文字和渐变
qq_40704765的博客
05-23 672
### 一、绘制文字 ###### 1.绘制实心文字 ``` //老规矩，获取元素     var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); //开始路径     context.beginPath(); //设置字体：样式(斜体)、大小(单位是
html2canvas解决字体渐变
weixin_34267123的博客
05-30 2965
为什么80%的码农都做不了架构师？>>> ...
word 图片右边显示多行文字
qq_38432390的博客
06-13 921
word 图片右边显示多行文字
canvas文本居中和自定义颜色
hlxjg的博客
07-06 1067
canvas自定义颜色与文字居中
2021-12-29 工作记录--Vue-vue背景图片的写法
weixin_48850734的博客
12-30 1336
vue背景图片的写法
Canvas多列表文字的显示
weixin_34235105的博客
11-30 410
2019独角兽企业重金招聘Python工程师标准>>> ...
表格的某列的文字竖向排列
weixin_45646663的博客
02-22 506
写上class <w-table-column v-if="item.Code == 'PresType'" prop="PresType" label=" " width="80" class-name="IssueCategory" align="center"> css /deep/ .IssueCategory { padding: 0; div.cell { padding: 0; writing-mode:
两种方式实现的文字竖排效果
zgqtxwd的专栏
04-30 1446
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
WordPress中构建Vue.js单页面应用实践
"本文将指导你如何在WordPress中利用Vue.js构建单页面应用（SPA），主要涉及WordPress REST API和Vue.js的关键技术，包括单文件组件、事件处理、计算属性和生命周期等。此外，还会介绍如何与Axios库配合，与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值