目录
 
加载网络图片
获取网络图片
将图片输入流转换为PixelMap
子线程进行网络请求
网络请求枚举类
 

 
加载网络图片
 
在实际的项目中，我们并不总是显示资源文件的图片，在浏览资讯、微博时，基本上都是要从网络上进行加载的。
 
所以，掌握网络图片加载，或者说网络获取的相关知识，才是真正开发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个步骤：
 
调用NetManager.getInstance(Context)获取网络管理的实例对象。
调用NetManager.getDefaultNet()获取默认的数据网络。
调用NetHandle.openConnection()打开一个URL。
通过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步骤：
 
首先创建SourceOptions，指定图片的格式
然后通过ImageSource.create()创建ImageSource
最后，通过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;
    }
}
}
 
运行之后，效果如下：
 

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位格式 
 
不需要设置什么阿里云服务器跨域，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的时候，完美解决图片空白或图片跨域，有疑问欢迎评论交流

 
目录
 
1 问题描述
2 解决方法
2.1 原理分析
2.2 详细步骤与测试
  
 

 
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 详细步骤与测试
 
下载安装Typora，链接：Typora
打开Typora
将网络上带有水印的图片复制粘贴到Typora中：
 
将上述图片url中的x-oss-process=image/watermark改为x-oss-process=image，即删除/watermark，如下图所示：
 
此时再将图片从Typora中复制粘贴到Word中，就消除了水印。在Typora中选中图片，右击，选择“复制图片”，如下图所示：
 
粘贴到Word，前后对比如下图所示：