北京百思可瑞教育：Uniapp与原生交互实现图片边缘拉伸效果的技术方案

objectivec// ImageStretchModule.m#import "ImageStretchModule.h"@implementation ImageStretchModule UNI_EXPORT_METHOD(@selector(stretchImage:withInsets:callback:)) - (void)stretchImage:(NSString *)imagePath           withInsets:(NSDictionary *)insetsDict            callback:(UNIModuleCallback)callback {    UIImage *originalImage = [UIImage imageWithContentsOfFile:imagePath];    if (!originalImage) {        callback(@[@{@"error": @"Image loading failed"}]);        return;    }        CGFloat top = [insetsDict[@"top"] floatValue];    CGFloat left = [insetsDict[@"left"] floatValue];    CGFloat bottom = [insetsDict[@"bottom"] floatValue];    CGFloat right = [insetsDict[@"right"] floatValue];        UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);    UIImage *stretchedImage = [originalImage resizableImageWithCapInsets:insets                                                             resizingMode:UIImageResizingModeStretch];        NSData *imageData = UIImagePNGRepresentation(stretchedImage);    NSString *base64String = [imageData base64EncodedStringWithOptions:0];        callback(@[@{@"success": @YES, @"base64": base64String}]);}@end

javascript// 封装原生模块调用const imageStretch = {  stretch(imagePath, insets) {    return new Promise((resolve, reject) => {      const module = uni.requireNativePlugin('ImageStretchModule');      module.stretchImage(        imagePath,        insets,        (res) => {          if (res.success) {            resolve(`data:image/png;base64,${res.base64}`);          } else {            reject(res.error);          }        }      );    });  }}; // 使用示例async function handleStretch() {  try {    const stretchedImage = await imageStretch.stretch(      '/path/to/image.png',      { top: 20, left: 20, bottom: 20, right: 20 }    );    this.imageSrc = stretchedImage;  } catch (error) {    console.error('Stretch failed:', error);  }}

java// ImageStretchPlugin.javapublic class ImageStretchPlugin extends UniModule {    @UniJSMethod(uiThread = true)    public void stretchImage(String imagePath, JSONObject insets, final UniJSCallback callback) {        try {            int left = insets.getInt("left");            int top = insets.getInt("top");            int right = insets.getInt("right");            int bottom = insets.getInt("bottom");             Bitmap originalBitmap = BitmapFactory.decodeFile(imagePath);            if (originalBitmap == null) {                callback.invoke(-1, "Image decode failed");                return;            }             // 创建NinePatchDrawable            byte[] chunk = createNinePatchChunk(originalBitmap, left, top, right, bottom);            NinePatchDrawable drawable = new NinePatchDrawable(                getResources(),                 originalBitmap,                 chunk,                 new Rect(),                 null            );             // 转换为Base64            Bitmap stretchedBitmap = drawableToBitmap(drawable);            ByteArrayOutputStream baos = new ByteArrayOutputStream();            stretchedBitmap.compress(Bitmap.CompressFormat.PNG, 100, baos);            byte[] bytes = baos.toByteArray();            String base64 = Base64.encodeToString(bytes, Base64.DEFAULT);             callback.invoke(0, base64);        } catch (Exception e) {            callback.invoke(-1, e.getMessage());        }    }     private byte[] createNinePatchChunk(Bitmap bitmap, int left, int top, int right, int bottom) {        // 实现NinePatch chunk生成逻辑        // 关键点：设置拉伸区域和固定区域        // 完整实现需参考Android源码中的NinePatch类        return new byte[0]; // 简化示例    }}

javapublic Bitmap createStretchedBitmap(Bitmap original, int left, int top, int right, int bottom) {    int stretchWidth = original.getWidth() - left - right;    int stretchHeight = original.getHeight() - top - bottom;     Bitmap result = Bitmap.createBitmap(        original.getWidth(),         original.getHeight(),         Bitmap.Config.ARGB_8888    );     Canvas canvas = new Canvas(result);    BitmapShader shader = new BitmapShader(original, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);    Paint paint = new Paint();    paint.setShader(shader);     // 绘制边缘区域    canvas.drawBitmap(original, 0, 0, null);     // 创建可拉伸区域（实际实现需更复杂的矩阵变换）    // 此处为简化示例    return result;}

javascript// stretch-image.jsexport default {  async stretch(imagePath, options = {}) {    const defaultOptions = {      platform: uni.getSystemInfoSync().platform,      insets: { top: 10, left: 10, bottom: 10, right: 10 },      quality: 80    };        const finalOptions = { ...defaultOptions, ...options };        if (finalOptions.platform === 'ios') {      return this._iosStretch(imagePath, finalOptions.insets);    } else if (finalOptions.platform === 'android') {      return this._androidStretch(imagePath, finalOptions.insets);    } else {      // H5 fallback方案      return this._h5Fallback(imagePath, finalOptions.insets);    }  },    _iosStretch(imagePath, insets) {    // 调用iOS原生模块  },    _androidStretch(imagePath, insets) {    // 调用Android原生模块  },    _h5Fallback(imagePath, insets) {    // 使用CSS实现基础效果    return new Promise(resolve => {      const img = new Image();      img.onload = () => {        const canvas = document.createElement('canvas');        // 实现基于Canvas的边缘拉伸        resolve(canvas.toDataURL());      };      img.src = imagePath;    });  }};

javascript// 加载WASM模块async function initWasm() {  const { default: wasmModule } = await import('./image-stretch.wasm');  return wasmModule;} // 使用示例const wasm = await initWasm();const stretchedData = wasm.stretchImage(  originalData,   width,   height,   { left: 10, top: 10, right: 10, bottom: 10 });

javascriptasync function autoDetectInsets(imageElement) {  const model = await tf.loadGraphModel('https://example.com/edge-detection/model.json');  const tensor = tf.browser.fromPixels(imageElement);  const prediction = model.predict(tensor.expandDims(0));  const insets = prediction.dataSync();  return {    left: insets[0],    top: insets[1],    right: insets[2],    bottom: insets[3]  };}