uniapp 小程序canvas插入网络图片

复制代码
<template>
  <view>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imagePath: ''
    };
  },
  methods: {
    getImageInfo() {
      uni.getImageInfo({
        src: 'https://aiapi.vip/1.jpg',
        success: (res) => {
          this.imagePath = res.path;
          this.drawCanvas();
        },
        fail: (err) => {
          console.log(err);
        }
      });
    },
    drawCanvas() {
      const ctx = uni.createCanvasContext('myCanvas', this);
      ctx.drawImage(this.imagePath, 0, 0, 300, 300);
      ctx.draw();
    }
  },
  mounted() {
    this.getImageInfo();
  }
}
</script>




<style>
	.container {
		display: flex;
		flex-wrap: wrap;
	}
</style>
相关推荐
鸭鸭梨吖1 小时前
微信小程序---下拉框
微信小程序·小程序
CRMEB定制开发2 小时前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
mon_star°4 小时前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台
The_era_achievs_hero4 小时前
微信小程序91~100
微信小程序·小程序
假装我不帅4 小时前
微信小程序下拉加载更多实现
微信小程序·小程序
2301_805962935 小时前
微信小程序控制空调之微信小程序篇
微信小程序·小程序
today喝咖啡了吗9 小时前
uniapp,Anroid10+版本如何保存图片并删除
uni-app
为风而战11 小时前
uni-app X APP在线升级 解决【uni-upgrade-center-app】未配置uni-upgrade-center 问题
uni-app
Ama_tor11 小时前
mini-program01の系统认识微信小程序开发
微信小程序·小程序
雪碧聊技术15 小时前
uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
uni-app·创建组件·使用组件·props数据传递