vue使用Canvas在画布上添加图片方式

 更新时间:2023年04月18日 14:12:34   作者:玫瑰花开一片一片  
这篇文章主要介绍了vue使用Canvas在画布上添加图片方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

使用Canvas在画布上添加图片

首先在template 里面创建一个dom

<div style="display:none">
    <img ref="conf0" src="../../assets/image/tx.jpg">
</div>

然后画图代码 这样写

// 获取Canvas 画图
let myCanvas = this.$refs.myCanvas
var ctx = myCanvas.getContext('2d')
 
// 在Canvas画布 添加图片
var img = this.$refs.conf0
img.onload = () => {
  ctx.drawImage(img, 0, 0)
}

使用canvas在图片上加上文字

<template>
  <div>
    <img src=""
         alt=""
         id="newimage"
         style="width:278px;height:298px">
    <canvas id="canvas"
            width="278"
            height="298">
    </canvas>
  </div>
</template>
<script>
export default {
  data () {
    return {

    }
  },
  mounted () {
    this.newImage('123#')
  },
  methods: {
    newImage (text) {
      // 生成图片
      var imageBox = document.getElementById("newimage")
      var canvas = document.getElementById("canvas")
      var cxt = canvas.getContext("2d")
      var img = new Image()
      img.src = require('@/assets/louceng.png')
      // 图片加载完成,才可处理
      img.onload = () => {
        // 画图(这里画布与图片等宽高)
        cxt.drawImage(img, 0, 0)
        // 设置字体大小
        cxt.font = "36px Microsoft YaHei"
        // 更改字号后,必须重置对齐方式,否则居中麻烦。设置文本的垂直对齐方式
        cxt.textBaseline = 'middle'
        cxt.textAlign = 'center'
        // 距离左边的位置
        var left = canvas.width / 2
        // 距离上边的位置 (图片高-文字距离图片底部的距离)
        var top = canvas.height * 0.14
        // 文字颜色
        cxt.fillStyle = "#ffffff"
        // 文字在画布的位置
        cxt.fillText(text, left, top)
        imageBox.src = canvas.toDataURL("image/jpg")
        // this.flag = 1
      }
    },
  }
}
</script>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue生命周期和钩子函数的详解与经典面试题

    Vue生命周期和钩子函数的详解与经典面试题

    Vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,下面这篇文章主要给大家介绍了关于Vue生命周期和钩子函数的相关资料,需要的朋友可以参考下
    2021-10-10
  • 解决vue3+vite配置unplugin-vue-component找不到Vant组件

    解决vue3+vite配置unplugin-vue-component找不到Vant组件

    这篇文章主要为大家介绍了vue3+vite配置unplugin-vue-component找不到Vant组件问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • Vue 中的compile操作方法

    Vue 中的compile操作方法

    这篇文章主要介绍了Vue 中的compile操作方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-02-02
  • vue element upload实现图片本地预览

    vue element upload实现图片本地预览

    这篇文章主要为大家详细介绍了vue element upload实现图片本地预览,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • VUE跨域问题Access to XMLHttpRequest at

    VUE跨域问题Access to XMLHttpRequest at

    今天发现一个错误,VUE发送请求的时候不能请求到正确数据,VUE跨域问题Access to XMLHttpRequest at,本文就详细的来介绍一下解决方法,感兴趣的可以了解一下
    2022-05-05
  • vue + echarts实现中国省份地图点击联动

    vue + echarts实现中国省份地图点击联动

    这篇文章主要介绍了vue + echarts实现中国地图省份点击联动,需要的朋友可以参考下
    2022-04-04
  • antd table按表格里的日期去排序操作

    antd table按表格里的日期去排序操作

    这篇文章主要介绍了antd table按表格里的日期去排序操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 基于Vue3自定义实现图片翻转预览功能

    基于Vue3自定义实现图片翻转预览功能

    这篇文章主要为大家详细介绍了如何基于Vue3自定义实现简单的图片翻转预览功能,文中的示例代码讲解详细,具有一定的学习价值,有需要的小伙伴可以参考一下
    2023-10-10
  • vue中实现点击变成全屏及缩放功能

    vue中实现点击变成全屏及缩放功能

    这篇文章主要介绍了vue中实现点击变成全屏及缩放功能,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue使用高德地图选点定位搜索定位功能实现

    Vue使用高德地图选点定位搜索定位功能实现

    这篇文章主要介绍了Vue使用高德地图选点定位搜索定位功能,文中给大家提到了常见问题解决方法,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-10-10

最新评论