小程序canvas使用网络图片真机不显示解决方案----可直接使用案例测试

简介: 小程序canvas使用网络图片真机不显示解决方案----可直接使用案例测试

图片都是线上的,可以直接放到onLoad里边自动检测


1.注意点:  在绘制网络图片时必需先将其保存到本地然后在绘制。当我们在加载一个带有图片的页面时,图片都会被暂存到本地,由此我们可以通过wx.gerImageInfo接口访问本地的暂存路径来调用drawImage方法绘制图片。如下:(注意网络图片的地址一定要在合法域名内)

/*
 * author:咔咔
 * address:陕西西安
 * wechat:fangkangfk
 * */
// 小程序二维码
      var path1 = 'https://www.weiuid.com/attachs/uploads/20180913/6386.png';
      const ctx = wx.createCanvasContext('myCanvas')
      // // 封面图
      var path = 'https://www.weiuid.com/attachs/uploads/20180912/d70711527c3ca66054f9989af7975d87.jpg';
      wx.getImageInfo({
        src: path,//服务器返回的图片地址
        success: function (res) {
          //res.path是网络图片的本地地址
          let Path = res.path;
          ctx.drawImage(Path, 0, 0, 400, 200)
        },
        fail: function (res) {
          //失败回调
        }
      });
      var that = this;
      //获取网络图片本地路径
      wx.getImageInfo({
        src: path1,//服务器返回的图片地址
        success: function (res) {
          //res.path是网络图片的本地地址
          let Path = res.path;
          ctx.drawImage(Path, 140, 300, 100, 100)
          ctx.draw(false, function () {
            wx.canvasToTempFilePath({
              canvasId: 'myCanvas',
              success: function (res) {
                console.log(res.tempFilePath)
                wx.previewImage({
                  urls: [res.tempFilePath] // 需要预览的图片http链接列表
                })
              }
            })
          });
        },
        fail: function (res) {
          //失败回调
        }
      });



相关文章
|
7月前
|
小程序 前端开发
2025商业版拓展校园圈子论坛网络的创新解决方案:校园跑腿小程序系统架构
校园跑腿小程序系统是一款创新解决方案,旨在满足校园配送需求并拓展校友网络。跑腿员可接单配送,用户能实时跟踪订单并评价服务。系统包含用户、客服、物流、跑腿员及订单模块,功能完善。此外,小程序增设信息咨询发布、校园社区建设和活动组织等功能,助力校友互动、经验分享及感情联络,构建紧密的校友网络。
305 1
2025商业版拓展校园圈子论坛网络的创新解决方案:校园跑腿小程序系统架构
|
2月前
|
缓存 人工智能 API
API接口调用中的网络异常及解决方案
淘宝API是淘宝开放平台提供的接口集合,支持商品、交易、用户、营销等数据交互。开发者需注册获取App Key,通过签名认证调用API,结合沙箱测试、OAuth授权与安全策略,实现订单管理、数据监控等应用,提升电商自动化与数据分析能力。
|
8月前
|
测试技术
Fast网络速度测试工具
Fast是由Netflix提供的网络速度测试工具,可快速测量用户的下载、上传速度及延迟。其全球可用、无广告干扰,并支持多种设备。测试自动进行,结果以Mbps显示。此外,用户可通过“Show more info”查看上传速度和延迟(含缓冲膨胀)。Fast以其简单快捷的特点,帮助用户了解网络性能并解决潜在问题,是评估网速的理想选择。
795 0
Fast网络速度测试工具
|
6月前
|
Docker 容器
Docker网关冲突导致容器启动网络异常解决方案
当执行`docker-compose up`命令时,服务器网络可能因Docker创建新网桥导致IP段冲突而中断。原因是Docker默认的docker0网卡(172.17.0.1/16)与宿主机网络地址段重叠,引发路由异常。解决方法为修改docker0地址段,通过配置`/etc/docker/daemon.json`调整为非冲突段(如192.168.200.1/24),并重启服务。同时,在`docker-compose.yml`中指定网络模式为`bridge`,最后通过检查docker0地址、网络接口列表及测试容器启动验证修复效果。
1104 39
|
7月前
|
安全 前端开发 Linux
Immunity CANVAS Professional 7.27 (macOS, Linux, Windows) - 渗透测试和漏洞利用平台
Immunity CANVAS Professional 7.27 (macOS, Linux, Windows) - 渗透测试和漏洞利用平台
220 3
Immunity CANVAS Professional 7.27 (macOS, Linux, Windows) - 渗透测试和漏洞利用平台
|
10月前
|
存储 人工智能 编译器
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
664 10
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
8月前
|
小程序 UED
拓展校友网络的创新解决方案:校园论坛圈子小程序+跑腿+二手市场系统
这是一款基于小程序的校园跑腿服务平台,支持多种注册登录方式、下单支付、跑腿接单配送、订单跟踪评价及物流查询功能,并配备客服模块提升用户体验。系统包含用户、客服、物流、跑腿员和订单五大核心模块,功能完善。此外,平台还拓展了校友网络功能,如信息咨询发布、校园社区建设和活动组织等,旨在增强校友互动与联系,形成紧密的校友生态。
285 4
|
9月前
|
安全 网络安全 虚拟化
Hyper-V网络连接无响应解决方案
当Hyper-V虚拟机出现网络连接无响应时,可从以下方面排查:1) 检查物理网络连接,确保设备正常;2) 验证虚拟网络配置,包括虚拟交换机和网络适配器设置;3) 更新驱动程序以解决兼容性问题;4) 调整防火墙和安全软件设置;5) 重启相关服务和设备;6) 使用命令行工具诊断网络问题;7) 检查BIOS中虚拟化技术是否启用;8) 排查IP冲突和其他日志错误。综合以上步骤,可有效修复网络连接故障。
|
10月前
|
监控 BI 网络安全
为何教育机构需要强大的网络安全解决方案
近年来,教育行业从传统课堂快速转向在线课程和虚拟教室,疫情加速了这一进程。然而,数字化转型也带来了网络安全风险。身份治理与管理(IGA)解决方案如ManageEngine的ADManager Plus,能有效保护教育机构免受网络攻击,确保数据安全、简化用户管理并实现合规性。通过自动化流程,它不仅提升了安全性,还减轻了IT管理员的工作负担,确保资源访问的无缝性和准确性。
232 11

热门文章

最新文章