alibaba / weex

A framework for building Mobile cross-platform UI
https://weexapp.com/
Apache License 2.0
18.28k stars 2.13k forks source link

扩展module 拍照或者选择图库的照片后 怎样将图片显示到weex页面上 #1083

Closed lanxiner123 closed 8 years ago

lanxiner123 commented 8 years ago

我自己扩展了module来调取摄像头,拍照或者选择图库的照片后怎样将图片显示到weex页面上:

pythons commented 8 years ago

紧急的话,可以先把 UIImage 转成 base64

qbcbyb commented 8 years ago

提供一个本人的实现思路: 方法一,暂存回调函数,在选择完图片后,通过回调函数将图片本地路径传递给weex端; 方法二,weex端在调用选择图片模块的方法时,定义个vm的回调字段(set方法),原生实现在选择完图片后,通过refreshInstance将本地图片路径通过回调字段传递给weex端。 以上两个方法都有个前提是需要在自己的ImageAdapter实现里边支持本地路径图片的加载。

sunnycn2013 commented 8 years ago

@qbcbyb 我是按照你的第一个方法回传的,在插件里面我先把callback 回调暂存起来,选择图片结束后,我将图片的路径会掉回去,weex里面我用set的形式设置,还是没效果呀: 插件:

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingImage:(UIImage *)image editingInfo:(nullable NSDictionary<NSString *,id> *)editingInfo
{
    NSLog(@"%@",editingInfo[@"UIImagePickerControllerReferenceURL"]);
    [picker dismissViewControllerAnimated:YES completion:nil];
}

weex: <image class="img" style="width: 196px; height: 196px;" src={{src}}></image> **

 var eventModule = require('@weex-module/eventTest'); 
        eventModule.openURL('url',function(ret) {
          this.src=ret;
          nativeLog(ret);
        });
sunnycn2013 commented 8 years ago

终于搞定了,base64格式的图回传到js ,vue中代码写错了,一直无法显示

<template>
  <scroller>
    <wxc-panel title="Toast" type="primary">
      <wxc-button type="primary" onclick="{{toast}}" value="上传图片"></wxc-button>
      <image class="img" style="width: 196px; height: 196px;" src="{{imgsrc}}"></image>
    </wxc-panel>
  </scroller>
</template>
<script>
  require('weex-components');
  module.exports = {
    data: {
      imgsrc: ''
    },
    methods: {
      toast: function(msg, duration) {
        if (!msg || typeof msg !== 'string') {
          msg = 'I am Toast show!';
        }    
        _this=this;   
        var eventModule = require('@weex-module/eventTest'); 
        eventModule.openURL('url',function(ret) {
            _this.imgsrc=ret;
        });
      }
    }
  }
</script>

<style>
</style>
lanxiner123 commented 8 years ago

@sunnycn2013 请问在iOS中,怎样将回调的图片转成base64格式的呀,你这部分是怎么写的呀

sunnycn2013 commented 8 years ago

测试demo UIImage 对象可以转成base64字符串格式的图的,这个在css里面是可以直接用的

- (BOOL)imageHasAlpha: (UIImage *) image
{
    CGImageAlphaInfo alpha = CGImageGetAlphaInfo(image.CGImage);
    return (alpha == kCGImageAlphaFirst ||
            alpha == kCGImageAlphaLast ||
            alpha == kCGImageAlphaPremultipliedFirst ||
            alpha == kCGImageAlphaPremultipliedLast);
}
- (NSString *)image2DataURL:(UIImage *)image
{
    NSData *imageData = nil;
    NSString *mimeType = nil;

    if ([self imageHasAlpha: image]) {
        imageData = UIImagePNGRepresentation(image);
        mimeType = @"image/png";
    } else {
        imageData = UIImageJPEGRepresentation(image, 1.0f);
        mimeType = @"image/jpeg";
    }

    return [NSString stringWithFormat:@"data:%@;base64,%@", mimeType,
            [imageData base64EncodedStringWithOptions: 0]];

}

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingImage:(UIImage *)image editingInfo:(nullable NSDictionary<NSString *,id> *)editingInfo
{
    NSString * imageBase64 = [self image2DataURL:image];
    self.callBack(imageBase64);
    [picker dismissViewControllerAnimated:YES completion:nil];
}
lanxiner123 commented 8 years ago

@sunnycn2013 嗯嗯 我试一下 多谢多谢!

lanxiner123 commented 8 years ago

@sunnycn2013 终于可以了 我们项目页面中用这个功能的比较多,这次终于可以大量使用了, 再次感谢呀

sunnycn2013 commented 8 years ago

@lanxiner123 不客气...

lanxiner123 commented 8 years ago

@sunnycn2013 你那会有因为内存过大闪退的问题吗,我用到了我的项目中,但是拍照上传时,就会出现内存警告还闪退,提示这个Message from debugger: Terminated due to memory issue 单独测试没有问题

sunnycn2013 commented 8 years ago

@lanxiner123 我这边图片一般不大,就算是拍的照片,我会做个压缩的,没有传过大的图,我记得之前webView 和原生通信传值大小是有限制的,我忘记多大了,不过weex遵循的原理都差不多,你那边拍的照片闪退必现吗?

lanxiner123 commented 8 years ago

@sunnycn2013 我这边扩展demo里也做了压缩,单独写个界面测试没有问题,放在项目里内存就大了,我感觉应该是本身内存消耗就很大了,现在是闪退必现,卡住然后闪退

sunnycn2013 commented 8 years ago

@lanxiner123 我建议不要搞太大,过大的图可以让服务端处理,URL下发显示,如果非的本地上传大量的图,目前我也没想到过好的办法, weex的性能目前我也是在猜测,具体这块还不太清楚也

lanxiner123 commented 8 years ago

@sunnycn2013 嗯嗯 得好好看看内存这块 谢谢了

HJ-StevenSun commented 8 years ago

@sunnycn2013 你好我 使用的方法是第二种方法 ,相册的路径是不能直接拿出来用的 需要存到沙盒以后拿沙盒的路径出来 能实现 ,你可以看一下我的 #1356. 我 刚刚 思考了一下 如果遇见朋友圈类似的张图片的话你的图片也是需要存储到沙盒中的。 因为 上传的时候 要取图片将他上传