用Vue框架将base64格式的图片画到canvas上

简介: 用Vue框架将base64格式的图片画到canvas上

vue使用时必须在mounted里面、或者点击触发,因为在这个生命周期后才能获取dom元素

vue代码

<template>
    <div><canvas id="myCanvas" width="800" height="800"></canvas></div>
</template>
<script>
//导入 axios 用于获取接口数据用的
import axios from "axios";
export default {
  data() {
    return {
    };
  },
  methods: {
  },
  created() {
    axios({
        //写接口路径用
      url: "",
        //请求方式
      method: "",
        //用于传参
      params: {
      },
    })
      .then((res) => {
        //接口拿来的数据用变量 imgbase64=接口数据
        var imgbase64 = res.data;
        let img = new Image();
        img.src = imgbase64;
        let myCanvas = document.getElementById("myCanvas").getContext("2d");
        img.onload = () => {
          myCanvas.drawImage(img, 90, 250, 180, 240);
          myCanvas.font = "25px Arial";
          myCanvas.fillText("邀请码", 140, 190, 100, 0);
        };
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>
相关文章
|
6月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
367 2
|
5月前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
5月前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
581 3
|
5月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
155 1
|
6月前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
55 7
|
5月前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
187 1
|
6月前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
96 6
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1102 0
|
4月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
197 1
|
1月前
|
JavaScript 前端开发 算法
vue渲染页面的原理
vue渲染页面的原理
113 56

热门文章

最新文章