【HarmonyOS】一文教你如何通过内存图片方式使用image组件加载网络图片资源

【关键字】

内存图片方式、image组件、网络图片资源、api6、服务卡片

1、写在前面

之前写过一篇元服务卡片的开发指导，有需求的可以参考以下文章：

【HarmonyOS】低代码开发之FA卡片开发流程

在2.6 初始化卡片部分，我们实现了加载网络资源的图片，但是直接使用image组件加载网络资源似乎在新版本设备上不太友好，所以今天我们来换一种实现方式。

2、代码实现

这次我们准备通过内存图片的方式来使用image组件加载网络图片资源，详细的教程可以参考官方文档：

通过内存图片方式使用image组件

我们的实现还是以【HarmonyOS】低代码开发之FA卡片开发流程 这篇文章中的代码为例，我们需要修改的是WidgetImpl.java这个类。

首先，我们要准备一个工具类，用户获取网络资源的字节流，这里我们定义HttpRequestUtils.java类，实现doGetRequestForFile()方法，返回一个字节数组，详情如下：

import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;

import java.io.*;
import java.net.HttpURLConnection;
import java.net.URL;

public class HttpRequestUtils {
    private static final HiLogLabel TAG = new HiLogLabel(HiLog.DEBUG, 0x0, MainAbility.class.getName());

    public final static byte[] doGetRequestForFile(String urlStr) {
        InputStream is = null;
        HttpURLConnection conn = null;
        byte[] buff = new byte[1024];
        try {
            URL url = new URL(urlStr);
            conn = (HttpURLConnection) url.openConnection();

            conn.setDoInput(true);
            conn.setRequestMethod("GET");
            conn.setReadTimeout(6000);
            conn.connect();
            is = conn.getInputStream();
            if (conn.getResponseCode() == 200) {
                buff = readInputStream(is);
            } else{
                buff=null;
            }
        } catch (Exception e) {
            HiLog.error(TAG,"【获取图片异常】",e);
        }
        finally {
            try {
                if(is != null){
                    is.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
            conn.disconnect();
        }
        return buff;
    }
}

然后我们进入WidgetImpl类中，我们需要修改初始化卡片数据以及点击事件时需要更新的卡片样式的代码，实现的思路都是一样的。

首先获取当前时间戳用来拼接图片名称，这样是为了保证唯一性：

long onlyOne = System.currentTimeMillis();

然后通过ZSONObject，将{imageSrc，memory:// + picName}的键值对添加到ZSONObject中：

object.put("btnSrc", "memory://btnsrc" + onlyOne + ".png");

然后使用该ZSONObject去创建一个FormBindingData：

FormBindingData bindingData = new FormBindingData(object);
ProviderFormInfo formInfo = new ProviderFormInfo();
formInfo.setJsBindingData(bindingData);

然后获取网络图片资源的字节流：

bytes = HttpRequestUtils.doGetRequestForFile(DataInstance.getInstance().getList().get(0).getBtnSrc());

最后通过addImageData接口添加数据：addImageData("xxx.png", bytes)，其中，"xxx.png"为picName，必须和上面添加到ZSONObject中的键值对的picName一致，否则上面的内存图片路径（"memory://xxx.png"）将读取不到这里添加进去的图片数据。

bindingData.addImageData("btnsrc" + onlyOne + ".png", bytes);

WidgetImpl类的完整代码如下：

public class WidgetImpl extends FormController {

    private static final HiLogLabel TAG = new HiLogLabel(HiLog.DEBUG, 0x0, "jscard");
    private static final int DIMENSION_1X2 = 1;
    private static final int DIMENSION_2X2 = 2;
    private Context mContext;

    public WidgetImpl(Context context, String formName, Integer dimension) {
        super(context, formName, dimension);
        HiLog.info(TAG, "WidgetImpl");
        this.mContext = context;
    }

    @Override
    public ProviderFormInfo bindFormData(long formId) {
        HiLog.info(TAG, "222---" + new Date().getTime());
        HiLog.info(TAG, "bind form data");
        ZSONObject object = new ZSONObject();
        long onlyOne = System.currentTimeMillis();
        byte[] bytes = null;
        if (dimension == DIMENSION_1X2) {
            object.put("smallCard", true);
            object.put("normalCard", false);
            object.put("type", DataInstance.getInstance().getList().get(0).getType());
            object.put("title", DataInstance.getInstance().getList().get(0).getTitle());
            // 根据动态获取的云侧配置项里的字段值动态修改标题内容
            if (!TextUtils.isEmpty(DataInstance.getInstance().getExtFaParamStr())) {
                object.put("title", DataInstance.getInstance().getExtFaParamStr());
            }
        } else if (dimension == DIMENSION_2X2) {
            object.put("smallCard", false);
            object.put("normalCard", true);
            object.put("type", DataInstance.getInstance().getList().get(2).getType());
            object.put("title", DataInstance.getInstance().getList().get(2).getTitle());
            // 根据动态获取的云侧配置项里的字段值动态修改标题内容
            if (!TextUtils.isEmpty(DataInstance.getInstance().getExtFaParamStr())) {
                object.put("title", DataInstance.getInstance().getExtFaParamStr());
            }
        }
        object.put("btnSrc", "memory://btnsrc" + onlyOne + ".png");
        FormBindingData bindingData = new FormBindingData(object);
        ProviderFormInfo formInfo = new ProviderFormInfo();
        formInfo.setJsBindingData(bindingData);
        if (dimension == DIMENSION_1X2) {
            if (!DataInstance.getInstance().isPlay()) {
                bytes = HttpRequestUtils.doGetRequestForFile(DataInstance.getInstance().getList().get(0).getBtnSrc());
            } else {
                bytes = HttpRequestUtils.doGetRequestForFile(DataInstance.getInstance().getList().get(1).getBtnSrc());
            }
        } else if (dimension == DIMENSION_2X2) {
            if (!DataInstance.getInstance().isPlay()) {
                bytes = HttpRequestUtils.doGetRequestForFile(DataInstance.getInstance().getList().get(2).getBtnSrc());
            } else {
                bytes = HttpRequestUtils.doGetRequestForFile(DataInstance.getInstance().getList().get(3).getBtnSrc());
            }
        }
        bindingData.addImageData("btnsrc" + onlyOne + ".png", bytes);
        return formInfo;
    }

    @Override
    public void updateFormData(long formId, Object... vars) {
        HiLog.info(TAG, "updateFormData");
    }

    @Override
    public void onTriggerFormEvent(long formId, String message) {
        HiLog.info(TAG, "onTriggerFormEvent");
        if (!TextUtils.isEmpty(message)) {
            byte[] bytes = null;
            ZSONObject zsonObject = ZSONObject.stringToZSON(message);
            String msg = zsonObject.getString("message");
            if (!TextUtils.isEmpty(msg) && "play".equals(msg)) {
                if (!DataInstance.getInstance().isPlay()) {
                    DataInstance.getInstance().setPlay(true);
                    if (dimension == DIMENSION_1X2) {
                        bytes = HttpRequestUtils.doGetRequestForFile(DataInstance.getInstance().getList().get(1).getBtnSrc());
                    } else if (dimension == DIMENSION_2X2) {
                        bytes = HttpRequestUtils.doGetRequestForFile(DataInstance.getInstance().getList().get(3).getBtnSrc());
                    }
                    updateForm(formId, bytes);
                    play();
                } else {
                    DataInstance.getInstance().setPlay(false);
                    if (dimension == DIMENSION_1X2) {
                        bytes = HttpRequestUtils.doGetRequestForFile(DataInstance.getInstance().getList().get(0).getBtnSrc());
                    } else if (dimension == DIMENSION_2X2) {
                        bytes = HttpRequestUtils.doGetRequestForFile(DataInstance.getInstance().getList().get(2).getBtnSrc());
                    }
                    updateForm(formId, bytes);
                    pause();
                }
            }
        }
    }

    @Override
    public Class getRoutePageSlice(Intent intent) {
        return null;
    }

    // 更新数据
    private void updateForm(long formId, byte[] bb) {
        ZSONObject object = new ZSONObject();
        long onlyOne = System.currentTimeMillis();
        object.put("btnSrc", "memory://btnsrc" + onlyOne + ".png");
        FormBindingData bindingData = new FormBindingData(object);
        ProviderFormInfo formInfo = new ProviderFormInfo();
        formInfo.setJsBindingData(bindingData);
        bindingData.addImageData("btnsrc" + onlyOne + ".png", bb);
        try {
            if (mContext instanceof Ability) {
                ((Ability) mContext).updateForm(formId, bindingData);
            }
        } catch (FormException e) {
            HiLog.error(TAG, e.getMessage());
        }
    }

    // 暂停音乐
    private void pause() {
        DataInstance.getInstance().getPlayer().pause();
    }

    // 播放音乐
    private void play() {
        DataInstance.getInstance().getPlayer().play();
    }
}

OK，通过上面的代码，我们就可以实现使用image组件加载网络图片资源啦。