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>
相关推荐
浩星8 小时前
uniapp运行鸿蒙报错整理
uni-app
游戏开发爱好者89 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang10 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金12 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq12 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷13 小时前
微信小程序全局数据共享
微信小程序·小程序
阿眠15 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache
2501_9159184117 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
初出茅庐的19 小时前
uniapp - AI 聊天中的md组件
前端·vue.js·uni-app
于慨21 小时前
uniapp用webview导入本地网页,ios端打开页面空白问题
uni-app