精华内容
下载资源
问答
  • 鸿蒙开发(18)---加载网络图片

    千次阅读 热门讨论 2021-07-06 12:27:27
    目录加载网络图片获取网络图片 加载网络图片 在实际的项目中,我们并不总是显示资源文件的图片,在浏览资讯、微博时,基本上都是要从网络上进行加载的。 所以,掌握网络图片加载,或者说网络获取的相关知识,才是...

    加载网络图片

    在实际的项目中,我们并不总是显示资源文件的图片,在浏览资讯、微博时,基本上都是要从网络上进行加载的。

    所以,掌握网络图片加载,或者说网络获取的相关知识,才是真正开发App的基础。当然,网络任务不能在主线程中进行,其中还涉及线程的相关知识。

    获取网络图片

    首先,我们需要获取网络图片。

    一般来说,我们都是通过网址请求获取图片的输入流InputStream。示例代码如下所示(HttpsUtils):

    public class HttpsUtils {
        private static InputStream inputStream;
        private static HttpsURLConnection connection;
    
        public static InputStream getInputStream(String urlStr,String methodType) {
            NetManager netManager = NetManager.getInstance(null);
            if (!netManager.hasDefaultNet()) {
                return null;
            }
            NetHandle netHandle = netManager.getDefaultNet();
            try {
                URL url = new URL(urlStr);
                URLConnection urlConnection = netHandle.openConnection(url, java.net.Proxy.NO_PROXY);
                if (urlConnection instanceof HttpsURLConnection) {
                    connection = (HttpsURLConnection) urlConnection;
                }
                connection.setRequestMethod(methodType);
                connection.connect();
                inputStream = connection.getInputStream();
            } catch (IOException e) {
                e.printStackTrace();
            }
            return inputStream;
        }
    
        public static void closeStream() {
            try {
                if (inputStream == null) {
                    return;
                }
                inputStream.close();
                if (connection == null) {
                    return;
                }
                connection.disconnect();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
    

    如上面代码所示,我们获取图片,或者说获取网络信息主要分为4个步骤:

    1. 调用NetManager.getInstance(Context)获取网络管理的实例对象。
    2. 调用NetManager.getDefaultNet()获取默认的数据网络。
    3. 调用NetHandle.openConnection()打开一个URL。
    4. 通过URL链接实例访问网站或图片网址。

    因为这里不仅涉及网络的请求,还涉及网络的管理。所以除了网络权限之外,我们还需要设置2个网络权限config.json:

    "module": {
        "reqPermissions": [
          {
            "name": "ohos.permission.INTERNET"
          },
          {
            "name": "ohos.permission.GET_NETWORK_INFO"
          },
          {
            "name": "ohos.permission.SET_NETWORK_INFO"
          }
        ],
    }
    

    当然,因为你没有主动切换网络,可以不用SET_NETWORK_INFO权限,但GET_NETWORK_INFO是必须的。

    将图片输入流转换为PixelMap

    因为我们的Image组件只能添加资源文件,以及PixelMap格式的图片。所以,我们需要将获取的网络数据转换为PixelMap。代码如下:

    public class ImageUtils {
        public static PixelMap createPixelMap(String imageUrl) {
            InputStream inputStream = HttpsUtils.getInputStream(imageUrl, RequestMethod.GET.name());
            ImageSource.SourceOptions sourceOptions = new ImageSource.SourceOptions();
            sourceOptions.formatHint = "image/jpeg";
            ImageSource imageSource = ImageSource.create(inputStream,sourceOptions);
            PixelMap pixelMap = imageSource.createPixelmap(null);
            HttpsUtils.closeStream();
            return pixelMap;
        }
    }
    

    如上面代码所示,将InputStream转换为PixelMap分为以下4步骤:

    1. 首先创建SourceOptions,指定图片的格式
    2. 然后通过ImageSource.create()创建ImageSource
    3. 最后,通过imageSource.createPixelmap创建pixelMap

    子线程进行网络请求

    到这里,我们就完成了图片的获取,并且可以将获取的网络图片设置到Image组件中。

    但是有GUI开发经验的程序员都应该知道,耗时任务(网络请求)是不能在主线程运行的,因为这样会造成卡顿。

    所以,我们需要使用鸿蒙提供给我们的线程进行处理。示例如下:

    public class MainAbilitySlice extends AbilitySlice {
        HiLogLabel TAG = new HiLogLabel(HiLog.LOG_APP, 0x00201, "TAG");
        private Button button;
        private Image image;
        @Override
        public void onStart(Intent intent) {
            super.onStart(intent);
            super.setUIContent(ResourceTable.Layout_ability_main);
            this.button=(Button)findComponentById(ResourceTable.Id_ability_main_button);
            this.image = (Image) findComponentById(ResourceTable.Id_ability_main_image);
            this.button.setClickedListener(new Component.ClickedListener() {
                @Override
                public void onClick(Component component) {
                    TaskDispatcher refreshUITask = createParallelTaskDispatcher("", TaskPriority.DEFAULT);
                    refreshUITask.syncDispatch(()->{
                        PixelMap pixelMap = ImageUtils.createPixelMap("https://images-1300376177.cos.ap-shanghai.myqcloud.com/homepage1.jpg");
    
                        getContext().getUITaskDispatcher().asyncDispatch(new Runnable() {
                            @Override
                            public void run() {
                                //Image组件填充位图数据,ui界面更新
                                image.setPixelMap(pixelMap);
                                pixelMap.release();
                            }
                        });
    
                    });
                }
            });
        }
    }
    

    ParallelTaskDispatcher:并发任务分发器,由Ability执行createParallelTaskDispatcher()创建并返回。

    UITaskDispatcher:绑定到应用主线程的专有任务分发器, 由Ability执行getUITaskDispatcher()创建并返回。

    网络请求枚举类

    当然,上面的RequestMethod.GET.name()是一个枚举类,用于定义网络请求的各种方式。代码如下:

    public enum RequestMethod {
        GET("GET"),
        POST("POST"),
        HEAD("HEAD"),
        OPTIONS("OPTIONS"),
        PUT("PUT"),
        DELETE("DELETE"),
        TRACE("TRACE");
        private String method;
    
        RequestMethod(String method) {
            this.method = method;
        }
    
        public String getMethod() {
            return method;
        }
    
        public void setMethod(String method) {
            this.method = method;
        }
    }
    }
    

    运行之后,效果如下:

    最终效果

    展开全文
  • 首先添加依赖: implementation("io.coil-kt:coil:...记得别忘记在manifest添加网络权限: <uses-permission android:name="android.permission.INTERNET" /> 简单使用: Image(modifier = Modifier ..

    Image加载网络图片

     首先添加依赖:

        implementation("io.coil-kt:coil:1.4.0")
        implementation("io.coil-kt:coil-compose:1.4.0")

    记得别忘记在manifest添加网络权限:

    <uses-permission android:name="android.permission.INTERNET" />

    简单使用:

            Image(
                modifier = Modifier
                    .size(200.dp, 150.dp),
                painter = rememberImagePainter("https://img-blog.csdnimg.cn/20210823085620179.jpeg"),
                contentDescription = null
            )

    效果如图:

    1,placeholder:占位图

    在图片还没有完全显示之前所展示的本地资源图片

            Image(
                modifier = Modifier
                    .size(300.dp, 200.dp),
                painter = rememberImagePainter(
                    data = "https://img-blog.csdnimg.cn/20210823085620179.jpeg",
                    builder = {
                        placeholder(R.drawable.head_icon)//占位图
                    }),
                contentDescription = null
            )

    效果如图:

    2,Transitions:过渡效果

    提供了两种过渡效果:

    CrossfadeTransition 淡入淡出
    Transition.NONE 在Target没有动画的情况下立即设置可绘制对象

            Image(
                modifier = Modifier
                    .size(300.dp, 200.dp),
                painter = rememberImagePainter(
                    data = "https://img-blog.csdnimg.cn/20210823085620179.jpeg",
                    builder = {
                        placeholder(R.drawable.head_icon)//占位图
                        crossfade(true)//淡出效果
                    }),
                contentDescription = null
            )

    效果如图:

    3,transformations:设置样式

    CircleCropTransformation 圆形裁剪
    RoundedCornersTransformation 圆角
    GrayscaleTransformation 灰度 
    BlurTransformation 高斯模糊 

    @Composable
    fun imageTest() {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp)
                .verticalScroll(state = rememberScrollState())
        ) {
            Image(
                modifier = Modifier
                    .size(120.dp, 120.dp),
                painter = rememberImagePainter(
                    data = "https://img-blog.csdnimg.cn/20210823085620179.jpeg",
                    builder = {
                        placeholder(R.drawable.head_icon)//占位图
                        crossfade(true)//淡出效果
                        transformations(CircleCropTransformation())//圆形效果
                    }),
                contentDescription = null
            )
            Spacer(modifier = Modifier.padding(2.dp))
            Image(
                modifier = Modifier
                    .size(120.dp, 120.dp),
                painter = rememberImagePainter(
                    data = "https://img-blog.csdnimg.cn/20210823085620179.jpeg",
                    builder = {
                        placeholder(R.drawable.head_icon)//占位图
                        crossfade(true)//淡出效果
                        transformations(RoundedCornersTransformation(0.8f))//圆角效果
                    }),
                contentDescription = null
            )
            Spacer(modifier = Modifier.padding(2.dp))
            Image(
                modifier = Modifier
                    .size(120.dp, 120.dp),
                painter = rememberImagePainter(
                    data = "https://img-blog.csdnimg.cn/20210823085620179.jpeg",
                    builder = {
                        placeholder(R.drawable.head_icon)//占位图
                        crossfade(true)//淡出效果
                        transformations(GrayscaleTransformation())//灰度效果
                    }),
                contentDescription = null,
                contentScale = ContentScale.Crop
            )
            Spacer(modifier = Modifier.padding(2.dp))
            Image(
                modifier = Modifier
                    .size(120.dp, 120.dp),
                painter = rememberImagePainter(
                    data = "https://img-blog.csdnimg.cn/20210823085620179.jpeg",
                    builder = {
                        placeholder(R.drawable.head_icon)//占位图
                        crossfade(true)//淡出效果
                        transformations(BlurTransformation(LocalContext.current, 0.1f, 2f))//高斯效果
                    }),
                contentDescription = null,
                contentScale = ContentScale.Crop
            )
        }
    }

    效果如图:

     

    Compose加载GIF图片

    首先添加依赖:

    implementation("io.coil-kt:coil-gif:1.4.0")

     使用:

            Image(
                modifier = Modifier
                    .size(300.dp),
                painter = rememberImagePainter(
                    data = "https://img-blog.csdnimg.cn/e6bb95f89399404195212196fdaf3964.gif",
                    builder = {
                        decoder(GifDecoder())//添加GIF解码
                        placeholder(R.drawable.head_icon)//占位图
                        crossfade(true)//淡出效果
                    }),
                contentDescription = null
            )

    效果如图:

    但是这里会出现一个问题:如果图片是jpg等格式的是没办法加载出来的,解决方案:

    自己构建一个图片加载器赋值给imageLoader

            //自己构建图片加载器
            val imageLoaderM = ImageLoader.Builder(LocalContext.current)
                .componentRegistry {
                    add(GifDecoder())
                }
                .build()
            Image(
                modifier = Modifier
                    .size(300.dp),
                painter = rememberImagePainter(
                    data = "https://img-blog.csdnimg.cn/e6bb95f89399404195212196fdaf3964.gif",
                    imageLoader = imageLoaderM,
                    builder = {
                        placeholder(R.drawable.head_icon)//占位图
                        crossfade(true)//淡出效果
                    }),
                contentDescription = null
            )
            Spacer(modifier = Modifier.padding(2.dp))
            Image(
                modifier = Modifier
                    .size(300.dp),
                painter = rememberImagePainter(
                    data = "https://img-blog.csdnimg.cn/20210823085620179.jpeg",
                    imageLoader = imageLoaderM,
                    builder = {
                        placeholder(R.drawable.head_icon)//占位图
                        crossfade(true)//淡出效果
                    }),
                contentDescription = null
            )

     效果如图:(可以加载出来)

    Compose加载SVG图片

    首先添加依赖

     implementation("io.coil-kt:coil-svg:1.4.0")

     使用:

            //自己构建图片加载器
            val imageLoaderM = ImageLoader.Builder(LocalContext.current)
                .componentRegistry {
                    add(GifDecoder())//添加GIF图片解码
                    add(SvgDecoder(LocalContext.current))//添加SVG图片解码
                }
                .build()
            Image(
                modifier = Modifier
                    .size(300.dp),
                painter = rememberImagePainter(
                    data = "https://coil-kt.github.io/coil/images/coil_logo_black.svg",
                    imageLoader = imageLoaderM,
                    builder = {
                        placeholder(R.drawable.head_icon)//占位图
                        crossfade(true)//淡出效果
                    }),
                contentDescription = null
            )

    效果如图:

    展开全文
  • 解决思路:前端将网络图片转换成64位格式 1、准备一个canvas标签用于转换64位格式图片 <canvas ref="headCanvas" style="position: absolute;height: 0; width: 0;opacity: 0;"></canvas> 2、关键...

    解决思路:前端将网络图片转换成64位格式 

    不需要设置什么阿里云服务器跨域,nginx配置header等等

    1、准备一个canvas标签用于转换64位格式图片

    <canvas ref="headCanvas" style="position: absolute;height: 0; width: 0;opacity: 0;"></canvas>
    

    2、关键方法

    注意:一点要给网络图片手动添加在后面拼接时间戳,否则canvas.toDataURL方法会报错

    //将网络图片转化为Base64
          ImageToBase64() {
            let vm = this
            //一定要设置为let,不然图片不显示,下面解释↓
            let image = new Image();
    
            //解决跨域问题
            image.setAttribute('crossOrigin', 'anonymous');
    //this.invincibleData.thumb这里是网络图片路径,
    //比如:https://down.yantongtech.cn/data/upload/images/2021-03-29/8567a979ba7ab9fd94e49866f095b9e5.jpg?1617081289278
            image.src = this.invincibleData.thumb;
    
            //image.onload为异步加载
            image.onload = () => {
              var canvas = vm.$refs.headCanvas;
              var context = canvas.getContext('2d');
              canvas.width = image.width;
              canvas.height = image.height;
              context.drawImage(image, 0, 0, image.width, image.height);
              var dataurl = canvas.toDataURL("image/png");
    //得到64位格式
              this.invincibleData.thumb64 = dataurl
            }
          },

    3、网络图片成功转换成64位图片之后,在使用html2canvas的时候,完美解决图片空白或图片跨域,有疑问欢迎评论交流

    展开全文
  • 去除网络图片水印

    万次阅读 2020-12-31 11:12:41
    1 问题描述 在网络上看到的图片经常有水印,如CSDN中的图片就是带有水印的,如下图所示,如果直接复制...网络图片在markdown文件中的格式为“!”,!表示这是一个图片,[]中是保存图片的描述,()表示图片的url。 ...

    1 问题描述

    在网络上看到的图片经常有水印,如CSDN中的图片就是带有水印的,如下图所示,如果直接复制粘贴到Word,看着非常不好。
    在这里插入图片描述
    本文就是要解决此问题的,让复制粘贴到Word中的图片的水印消失。

    2 解决方法

    2.1 原理分析

    网络图片在markdown文件中的格式为“![]()”,!表示这是一个图片链接,[]中是保存图片的描述,()表示图片的url。熟悉markdown的同学知道,()中的url除了网址外,还有参数拼接,如:https://img-blog.csdnimg.cn/20201231110638971.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA3MjUzNQ==,size_16,color_FFFFFF,t_70
    参数拼接部分:x-oss-process=image/watermark,image表示这是一个图片,watermark表示图片有水印。简单粗暴的方法就是把watermark去掉,本人已经尝试,确实可行,在后面本人还会给出测试结果。
    这里需要借助的工具是Typora,一个markdown编辑器。

    2.2 详细步骤与测试

    1. 下载安装Typora,链接:Typora
    2. 打开Typora
    3. 将网络上带有水印的图片复制粘贴到Typora中:
      在这里插入图片描述
    4. 将上述图片url中的x-oss-process=image/watermark改为x-oss-process=image,即删除/watermark,如下图所示:
      在这里插入图片描述
    5. 此时再将图片从Typora中复制粘贴到Word中,就消除了水印。在Typora中选中图片,右击,选择“复制图片”,如下图所示:
      在这里插入图片描述
    6. 粘贴到Word,前后对比如下图所示:
      在这里插入图片描述
    展开全文
  • 1.加载网络图片: /** * SimpleDraweeView加载网络图片 * @param iv * @param url 网络图片地址 */ public static void loadUrl(SimpleDraweeView iv, String url){ iv.setImageURI(url); } 2.加载sd卡中...
  • uniapp image动态绑定网络图片

    千次阅读 2021-07-13 17:35:29
    <image style="width: 60upx;height: 60upx;border-radius: 50upx;" :src="($baseUrl+`${clientInfo.avatar}`)"></image> ...clientInfo.avatar:"avatar":"/Uploads/user/4/20210713/avatar_4444.png", ...
  • 网络权限与Android版本 既然是加载网络图片,那就肯定要有网络访问权限, 在AndroidManifest.xml中增加 然后就是确认你的Android终端的版本,不管你是用模拟器还是使用真机,都会有Android对应的版本,而Android9.0...
  • AndroidStudio的ImageView使用网络图片

    千次阅读 热门讨论 2021-01-25 11:39:58
    关于AndroidStudio的ImageView使用网络上的图片的方法 1.新建一个Activity名为 ImageActivity 2.在layout下的activity_img_view.xml下新建ImageView <ImageView android:id="@+id/imgv01" android:layout_...
  • UnityWebRequest 请求网络图片

    千次阅读 2021-01-22 16:34:21
    UnityWebRequest可以用来请求网络上的图片或者请求一张本地图片。 除了GetTexture之外,还有ab包的下载等。 using System.Collections; using System.Collections.Generic; using UnityEngine; using ...
  • 第一种方法转载自:android ImageView网络图片加载、动态设置尺寸、圆角.. - L-H - 博客园 package com.example.hangliao.oneyuanrecharge.helper; import android.graphics.Bitmap; import android.graphics....
  • * 将图片转为file * * @param url 图片url * @return File */ private static File getFile(String url) throws Exception { //读取图片类型 String fileName = url.substring(url.lastIndexOf("."),url....
  • Android jetpack compose 全屏显示网络图片,可缩放拖拽,双击还原,单击关闭前言依赖代码使用完事 前言 jetpack compose 真的是个好东西,以前老费劲才能弄出来的效果,用它几行代码就能实现了,真香。 依赖 我这边...
  • 在使用Image.network()的时候,有个图片网址404了,flutter真机调试一直卡死,绝对是一个大BUG。 网上找了各种方法: 一: Image image = Image(image: new CachedNetworkImageProvider('')); Image image = ...
  • android中的ImageView,ImageView加载网路图片 在布局文件中加入标签????️ <ImageView android:layout_width="300dp" android:layout_height="200dp" android:background="#111111" android:id="@+id/...
  • Glide加载图片、加载进度监听前言正文总结 前言   在日常开发中使用url加载图片是常见的。这也是Glide图片加载框架这么受欢迎的原因。当然本文如果只是简单的加载一个图片出来那就完全没有必要了,自然要搞点...
  • 该图片由后端处理好,返回url地址供移动端加载使用,每次在页面中点击分享,加载对应参数拼接的图片地址,可是在同一参数,获取不同结果时,图片地址不变,图片内容数据却在更新,这时,移动端加载网络图片时,...
  • 安卓加载网络图片VSiOS加载网络图片

    千次阅读 2021-12-02 06:55:06
    记得打开网络权限 <!-- 打开网络权限 --> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> ...
  • 对抗网络GAN生成图片

    千次阅读 2021-11-20 20:46:09
    GAN是从一个简单分布中生成数据,而他的训练则是处于一种对抗博弈过程,其核心是由一个生成器(Generator)和一个判别器D(Discriminator)互相冲突的神经网络组成,这两个网络会以越来越复杂的方法来“蒙骗”对方。...
  • 文章目录GAN (生成对抗网络) 手写数字图片生成Discriminator NetworkGenerator Network简单版本的生成对抗网络判别器 Discriminator生成器 Generator超参数设置训练网络生成图片 这种训练方式定义了一种全新的网络...
  • Python:网络图片的爬取和存储

    千次阅读 2021-04-12 19:46:51
    >>> import requests >>> path="d:/del.jpg" >>> url="https://img-blog.csdnimg.cn/20210317155124696.png" >>> r=requests.get(url) >>> r.status_code ... .
  • 免费将图片转换成网络链接

    千次阅读 2021-04-01 11:52:52
    一、引用网络图片 直接鼠标右键复制图片地址 二、本地图片 将图片上传到QQ空间或其他的公共网站,例如qq空间发布动态。
  • Android Glide加载网络URL的svg图片

    千次阅读 2021-01-05 11:46:53
    项目对接第三方,三方显示图片有.svg在使用glide加载不出来,于是就记录一下笔记 1,首先在app的build.gradle中添加依赖 //svg图片 implementation 'com.github.bumptech.glide:glide:4.9.0' implementation '...
  • java将网络上的url图片转换成File对象

    千次阅读 2021-01-05 10:13:01
    public static File getFile(String url) throws Exception { //对本地文件命名 String fileName = url.substring(url.lastIndexOf("."),url.length()); File file = null; URL urlfile; InputStream inStream...
  • 我一直在运行项目,都挺正常的,但是突然有一次运行图片全没了,我惊了,以为是模拟器是这样,没想到安装在真机上居然也没图片。。然后找了好久,最后终于解决了。。 二、问题 问题所在就是xcode版本的问题,是...
  • Hutool - 对于图片的基本处理

    千次阅读 2021-01-19 19:46:05
    文章目录Hutool - 对于图片的基本处理1、缩放图片2、剪裁图片3、图片格式的转换4、图片变成黑白5、添加水印6、旋转图片7、水平翻转图片8、图片压缩 Hutool - 对于图片的基本处理 1、缩放图片 ImgUtil.scale( ...
  • 卷积神经网络特别适合处理像图片、视频、音频、语言文字等,这些与相互位置有一定关系的数据。 卷积神经网络(Convolutional Nerual Network,CNN) 为什么计算机可以处理图片--因为在计算机语言中图片可以用数字...
  • 一、首先看一下我们的源代码和报错原因 1.1源代码是这个样子的 1.2先来看下我们的页面 1.2.1原设计图是这个样子的 1.2.2而此时我们的页面 1.3然后来看下我们的报错 二、解决方法 2.1先来看下我们的源代码 ...
  • Image.network加载网络图片无效的解决办法 按照学习教程使用Image组件时,发现教程中图片可以显示,而自己的demo却显示不出图片。将图片地址扔到浏览器可以正常访问,神奇了~ 一、原因分析及解决方案 1. 本地没有...
  • CNN卷积神经网络及图像识别

    千次阅读 2021-02-22 21:13:34
    神经网络(neual networks)是人工智能研究领域的一部分,当前最流行的神经网络是深度卷积神经网络(deep convolutional neural networks, CNNs),虽然卷积网络也存在浅层结构,但是因为准确度和表现力等原因很少使用。...
  • 使用卷积神经网络进行图像分类

    千次阅读 多人点赞 2021-02-23 22:36:21
    介绍卷积神经网络属于深度学习的子域。深度学习中的算法以与人脑相同的方式来处理信息,但其规模很小,因为我们的大脑太复杂了(我们的大脑大约有860亿个神经元)。为什么使用CNN进行图像分类?图...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 859,792
精华内容 343,916
关键字:

网络图片