a***@163.com
a***@163.com
  • 发布:2022-03-17 11:13
  • 更新:2024-12-12 10:11
  • 阅读:4588

安卓uni.previewImage预览file://本地图片失败,一直转圈

分类:uni-app

背景

自己开发的安卓原生插件,会返回安卓绝对路径形式的图片,如:file:///data/user/0/com.sample.test/cache/20220316.jpg
这是在应用的cache目录下直接写入的图片。
返回到uniapp端后,在template中通过<image>组件能正常显示图片。但通过uni.previewImage预览图片的话会一直转圈:


参数为:

{  
    "current": 0,  
    "urls": ["file:///data/user/0/com.sample.test/cache/20220316.jpg",  
        "file:///data/user/0/com.sample.test/cache/20220316_2.jpg",  
    ]  
}

接口返回:{"errMsg":"previewImage:ok"},没有错误。

解决方法

uni.previewImage只支持预览uniapp沙盒目录下的文件,即 只支持下面的目录和子目录下的图片预览:

  • PRIVATE_WWW 对应相对路径URL为"_www"开头的地址
  • PRIVATE_DOC 对应相对路径URL为"_doc"开头的地址
  • PUBLIC_DOCUMENTS 对应相对路径URL为"_documents"开头的地址
  • PUBLIC_DOWNLOADS 对应相对路径URL为"_downloads"开头的地址

所以原生插件生成图片时,将图片写入上面任意一个目录下即可。
以“_doc”为例,获取绝对路径可通过下面方式:

File parentDir = new File(mUniSDKInstance.rewriteUri(Uri.parse("_doc/"), URIAdapter.FILE).getPath());  

成功!

完整代码

原生安卓端
注意需要在app/src/main/assets/dcloud_uniplugins.json文件中注册原生插件。

import android.graphics.Bitmap;  
import android.graphics.BitmapFactory;  
import android.graphics.Canvas;  
import android.graphics.Color;  
import android.net.Uri;  
import com.alibaba.fastjson.JSONObject;  
import com.taobao.weex.adapter.URIAdapter;  
import java.io.File;  
import java.io.FileOutputStream;  
import java.util.HashMap;  

import io.dcloud.feature.uniapp.annotation.UniJSMethod;  
import io.dcloud.feature.uniapp.bridge.UniJSCallback;  
import io.dcloud.feature.uniapp.common.UniModule;  

public class MyImgUni extends UniModule {  

    @UniJSMethod(uiThread = false)  
    public void getNativeImg(JSONObject opts, UniJSCallback callback) {  
        if (callback == null) return;  
        if (opts == null) {  
            callback.invoke(new HashMap<String, String>() {{  
                put("error", "`opts` required!");  
            }});  
            return;  
        }  
        try {  
            String imgPath = opts.getString("path");  
            if(imgPath.startsWith("_")){  
                // 将沙盒路径转为uri路径  
                imgPath = mUniSDKInstance.rewriteUri(Uri.parse(imgPath), URIAdapter.FILE).toString();  
            }  
            // 转为绝对路径  
            imgPath = imgPath.replace("file://", "");  
            Bitmap bitmap = BitmapFactory.decodeFile(imgPath);  

            // 对图片进行处理  
            Bitmap outImg = bitmap.copy(Bitmap.Config.ARGB_8888, true);  
            Canvas canvas = new Canvas(outImg);  
            canvas.drawColor(Color.argb(170, 255, 0, 0));  

            // 【重点】获得输出目录(这里需要时沙盒目录,否则无法使用uni.previewImage预览)  
            File parentDir = new File(mUniSDKInstance.rewriteUri(Uri.parse("_doc/"), URIAdapter.FILE).getPath());  
            // 创建输出图片  
            File outFile = new File(parentDir, "newImg.jpg");  
            try (FileOutputStream outputStream = new FileOutputStream(outFile)) {  
                outImg.compress(Bitmap.CompressFormat.JPEG, 80, outputStream);  
            }  
            callback.invoke(new HashMap<String, String>() {{  
                put("resPath", "file://" + outFile.getAbsolutePath());  
            }});  
        } catch (Exception e) {  
            callback.invoke(new HashMap<String, String>() {{  
                put("error", e.toString());  
            }});  
        }  
    }  
}  

uniapp端调用(使用static目录下的一个图片测试)

                const handler = uni.requireNativePlugin('img-handle');  
                const ntvData = {path: '_www/static/inner/office_green_sm.png'};  
                handler.getNativeImg(ntvData, ({error, resPath}) => {  
                    if(error){  
                        console.error('handle img error:', error);  
                        return;  
                    }  
                    uni.previewImage({  
                        current: 0,  
                        urls:[resPath]  
                    })  
                });
2 关注 分享
y***@foxmail.com 1***@qq.com

要回复文章请先登录注册

醉清风

醉清风

回复 makeit :
解决了吗, mate30pro也有这个问题, 其他测试手机可以
2024-12-12 10:11
makeit

makeit

我的安卓也一直转圈,xiaomi 12X, 图片是网络图片 http的
2024-09-15 12:19
a***@163.com

a***@163.com (作者)

回复 1***@qq.com :
不好意思刚看到,文章补充了完整代码,测试过了没有问题。
2022-09-02 10:42
1***@qq.com

1***@qq.com

你的描述,我还是不能写出来
2022-08-29 16:40
1***@qq.com

1***@qq.com

我需要看代码 谢谢
2022-08-29 16:39
a***@163.com

a***@163.com (作者)

回复 4***@qq.com :
更新了下文章,换了个更简单的方式。
2022-06-08 10:00
4***@qq.com

4***@qq.com

有具体的代码吗
2022-06-07 17:27