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 小时前
多状态映射不同样式(scss语法)
vue.js·uni-app
一念杂记1 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
张晓~183399481213 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
The_era_achievs_hero5 小时前
微信小程序61~70
微信小程序·小程序
aklry7 小时前
uniapp三步完成生成一维码图片
uni-app
汤姆yu16 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
雪芽蓝域zzs17 小时前
uniapp 国密sm2加密
uni-app
说私域1 天前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域1 天前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔1 天前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序