因为现在手机屏幕的多样化，导致我们的图片会存在一些拉缩变形的情况，所以这里我针对这块进行了一个方案的解决，如果大家还有更好的，感谢大家分享一下。（特别说明：我这里用的是本地图片，网络图片我没有研究过，所以如果您的是网络图用不了，麻烦您自己自行解决哈！）
我这里采用的方案是使用原生对图片进行处理，然后同步回传给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端原生代码
网友评论