因为现在手机屏幕的多样化,导致我们的图片会存在一些拉缩变形的情况,所以这里我针对这块进行了一个方案的解决,如果大家还有更好的,感谢大家分享一下。(特别说明:我这里用的是本地图片,网络图片我没有研究过,所以如果您的是网络图用不了,麻烦您自己自行解决哈!)
我这里采用的方案是使用原生对图片进行处理,然后同步回传给uniapp进行展示(异步也可以),这种方案本人亲测有效(公司项目已经在使用),效果也还是蛮不错的,如果需要更高端更有效的,大家可以自行研究!
在开始讲解方案前,大家可以先去看我之前写的uniapp和原生交互数据文章,下面是文章地址:
iOS和uniapp数据交互:https://blog.csdn.net/yun199466/article/details/106269636
Android和uniapp数据交互:https://blog.csdn.net/yun199466/article/details/106269779
我这里使用的同步从原生回传图片的,大家也可以用异步回传图片,这个看个人需求。
好了,废话不多说,开始讲解源码和流程了!!!
一、需要先获取到展示图片容器的宽高(注意:这个宽高是要传到原生进行使用的,别忘记了)
//获取素材版本号(这个版本号是为了在后期修改、新增图片后,可以重新进行生成而设定的)
let native_image_base_key = "image_V1";
//获取本地存储的base64图片
let localBaseData = uni.getStorageSync(native_image_base_key);
//查找图片容器元素
let that = this;
const query = uni.createSelectorQuery().in(this);
query.select('.你的容器的样式名称').boundingClientRect(data => {
let containerW = data.width;//容器的宽
let containerH = data.height;//容器的高
//保存图片时的key值,这个看个人怎么定义,注意多个图片的时候不要设置一样的,防止图片被覆盖
let key = "my_img";
//优先判断本地是否存储过了base64编码,存储了就拿本地,否则传到原生进行压缩处理
//同时判断是否存在指定版本素材的图片(考虑后期可能会更换图片)
if (localBaseData != "" && localBaseData != null && localBaseData != undefined &&
localBaseData[key] != null && localBaseData[key] != "" && localBaseData[key] != undefined) {
console.log("取本地的Base64图片");
var base64Data = localBaseData[key];
} else {
//将图片传到原生压缩到指定宽高后回传base64回来进行替换展示
let baseImage = NativePlugin.NativeImageSplitter("图片名或者图片路径(这里传给原生是为了原生项目可以拿到本地图片)",containerW,containerH);
if (baseImage != null && baseImage != undefined){
if (Array.isArray(baseImage) && baseImage.length > 0) {
//处理iOS端返回的数据
that.nativaBaseData[key] = baseImage[0];
//TODO:记得同时更新图片容器的图片显示
} else {
//处理Android返回的数据
if (baseImage != "") {
that.nativaBaseData[key] = baseImage;
//TODO:记得同时更新图片容器的图片显示
}
}
}
uni.setStorage({key:native_image_base_key,data:this.nativaBaseData,success() {
console.log("保存本地base64成功");
}});
}).exec();
nativaBaseData : 这是我定义的一个全局对象,用来存储Base64编码图片的。格式{"my_img":"处理过的base64编码图片字符串"}
二、原生将base64编码图片传到uniapp代码
(1)iOS端回传代码
(2)Android端回传代码
注意点:
1、本地图片最好是叫美工设计成有边缘拉伸效果的;
2、图片回传可使用同步、异步都可以,这个看个人需求而定,这里我只是才有同步来讲解下思路;
三、原生两端的代码
(1)iOS端原生代码
https://download.csdn.net/download/yun199466/16744224
(2)Android端原生代码