小程序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) {
          //失败回调
        }
      });



相关文章
|
4天前
|
安全 网络安全 云计算
云计算与网络安全:技术挑战与解决方案
【6月更文挑战第8天】在信息技术飞速发展的今天,云计算作为一种新兴的计算模式,已经广泛应用于各个领域。然而,随着云计算的普及,网络安全问题也日益突出。本文将探讨云计算与网络安全之间的关系,分析云服务、网络安全和信息安全等技术领域的挑战,并提出相应的解决方案。
|
13天前
|
存储 监控 安全
云计算与网络安全:技术挑战与解决方案
【5月更文挑战第31天】本文深入探讨了云计算与网络安全的交叉领域,分析了云服务、网络安全、信息安全等技术领域的关键问题。文章首先介绍了云计算的基本概念和主要服务模型,然后详细讨论了云计算环境下的网络安全威胁和挑战,最后提出了一些有效的解决方案和技术策略。
|
4天前
|
前端开发 JavaScript 安全
WebAssembly技术的出现为我们提供了一种全新的解决方案,开启了高性能网络应用的新时代
【6月更文挑战第10天】WebAssembly是高性能网络应用的新时代技术,它是一种虚拟机格式,允许C/C++等语言编译成二进制格式在Web浏览器中运行。具备高性能、高可移植性和良好安全性,适用于游戏开发、图形处理、计算机视觉等领域。随着技术进步,WebAssembly将支持更多语言,结合低代码平台简化开发,但需解决编译优化和安全性等问题。它正重塑Web应用的未来,开启高性能应用新时代。
14 0
|
6天前
|
Java
JavaSE——集合框架二(6/6)-(案例)补充知识:集合的嵌套(需求与分析、问题解决、运行测试)
JavaSE——集合框架二(6/6)-(案例)补充知识:集合的嵌套(需求与分析、问题解决、运行测试)
6 0
|
9天前
|
存储 安全 网络安全
云计算与网络安全:技术挑战与解决方案
本文深入探讨了云计算与网络安全之间的紧密联系,重点分析了云服务、网络安全和信息安全等技术领域。文章首先介绍了云计算的基本概念和服务模型,然后详细讨论了网络安全的重要性以及面临的主要威胁。最后,文章提出了一系列技术和管理策略,以应对这些挑战并保护云环境中的数据安全。
|
12天前
|
运维 安全 网络架构
【计算巢】网络模拟工具:设计与测试网络架构的有效方法
【6月更文挑战第1天】成为网络世界的超级英雄,利用网络模拟工具解决复杂架构难题!此工具提供安全的虚拟环境,允许自由设计和测试网络拓扑,进行性能挑战和压力测试。简单示例代码展示了创建网络拓扑的便捷性,它是网络设计和故障排查的“魔法棒”。无论新手还是专家,都能借助它探索网络的无限可能,开启精彩冒险!快行动起来,你会发现网络世界前所未有的乐趣!
【计算巢】网络模拟工具:设计与测试网络架构的有效方法
|
13天前
|
监控 安全 网络安全
使用 Fortinet 安全 SD-WAN 解决方案进行全球跨国公司网络设计的最佳实践
使用 Fortinet 安全 SD-WAN 解决方案进行全球跨国公司网络设计的最佳实践
67 3
|
14天前
|
人工智能 自然语言处理 安全
构建未来:AI驱动的自适应网络安全防御系统提升软件测试效率:自动化与持续集成的实践之路
【5月更文挑战第30天】 在数字化时代,网络安全已成为维护信息完整性、保障用户隐私和企业持续运营的关键。传统的安全防御手段,如防火墙和入侵检测系统,面对日益复杂的网络攻击已显得力不从心。本文提出了一种基于人工智能(AI)技术的自适应网络安全防御系统,该系统能够实时分析网络流量,自动识别潜在威胁,并动态调整防御策略以应对未知攻击。通过深度学习算法和自然语言处理技术的结合,系统不仅能够提高检测速度和准确性,还能自主学习和适应新型攻击模式,从而显著提升网络安全防御的效率和智能化水平。 【5月更文挑战第30天】 在快速迭代的软件开发周期中,传统的手动测试方法已不再适应现代高效交付的要求。本文探讨了如
|
17天前
|
机器学习/深度学习 敏捷开发 测试技术
深入探索软件测试中的持续集成与持续部署(CI/CD)实践利用机器学习提升网络安全防御效能
【5月更文挑战第27天】 在现代软件开发的快节奏环境中,持续集成(Continuous Integration, CI)和持续部署(Continuous Deployment, CD)已成为确保产品质量和加快交付速度的关键策略。本文将深入探讨CI/CD在软件测试中的应用,分析其对提高自动化测试效率、缩短反馈周期以及优化发布流程的重要性。通过实际案例研究,我们揭示了成功实施CI/CD的最佳实践,并讨论了面临的挑战及其解决方案。
|
17天前
|
安全 数据管理 测试技术
网络安全与信息安全:防范漏洞、加强加密与提升安全意识深入探索自动化测试框架的设计原则与实践应用化测试解决方案。文章不仅涵盖了框架选择的标准,还详细阐述了如何根据项目需求定制测试流程,以及如何利用持续集成工具实现测试的自动触发和结果反馈。最后,文中还将讨论测试数据管理、测试用例优化及团队协作等关键问题,为读者提供全面的自动化测试框架设计与实施指南。
【5月更文挑战第27天】 在数字化时代,网络安全与信息安全已成为维护国家安全、企业利益和个人隐私的重要环节。本文旨在分享关于网络安全漏洞的识别与防范、加密技术的应用以及提升安全意识的重要性。通过对这些方面的深入探讨,我们希望能为读者提供一些实用的建议和策略,以应对日益严峻的网络安全挑战。 【5月更文挑战第27天】 在软件开发周期中,自动化测试作为保障软件质量的关键步骤,其重要性日益凸显。本文旨在剖析自动化测试框架设计的核心原则,并结合具体案例探讨其在实际应用中的执行策略。通过对比分析不同测试框架的优缺点,我们提出一套高效、可扩展且易于维护的自动

热门文章

最新文章