利用imageCropper插件在X5平台上实现头像剪裁上传功能

Masion

总的思路时先用前端压缩插件将图片变小在使用imageCropper剪裁

初步测试是好用，怎么实现正在研究中

XiaoQLuo

点赞

Masion

经过调试验证，如果必须使用iphone6的话，可以在导入文件时使用如下代码

1. Model.prototype.file1Change = function(event){
   
2.        
   
3.         //从选取文件对话框返回后，检查用户是否选择了文件，是否选择了图片文件
   
4.         if(!event.target.files){
   
5.                         return;
   
6.         }
   
7.        
   
8.        var $image = $('.cropper-example-1 > img');
   
9.          var file = event.target.files[0];
   
10.          if (/^image\/\w+$/.test(file.type)) {
    
11.              canvasResize(file, {
    
12.                         width: 700,
    
13.                         height: 0,
    
14.                         crop: false,
    
15.                         quality: 80,
    
16.                         callback: function(data, width, height) {
    
17.                      //   $image.cropper("destroy");
    
18.                          $('.cropper-example-1 > img').cropper("reset").cropper("replace",data);
    
19.                            // $image.attr('src', data);
    
20.                         }});
    
21.                   $image.load(function(){
    
22.                          // $('.cropper-example-1 > img').cropper("reset").cropper("replace",data);
    
23.                   });
    
24.                
    
25. /*               var  blobURL = URL.createObjectURL(file);   //
    
26.             $image.one('built.cropper', function () {       //则把用户新选择的图片文件用imageCropper进行剪裁
    
27.               URL.revokeObjectURL(blobURL); // Revoke when load complete
    
28.             }).cropper('reset').cropper('replace', blobURL);
    
29.                   */
    
30.                                   
    
31.           } else {
    
32.             this.comp("messageDialog1").show({"message":'请选择图片格式文件！'});
    
33.            
    
34.           }
    
35.         
    
36.         };

复制代码

Masion

使用前需要进入jquery的压缩图片插件

我是在.w的resource中引用的
<resource xid="resource2"><require xid="require1" url="$UI/lawranceMob/picCut/demo/binaryajax"></require>
  <require xid="require2" url="$UI/lawranceMob/picCut/demo/canvasResize"></require>
  <require xid="require3" url="$UI/lawranceMob/picCut/demo/exif"></require></resource>

Masion

jQuery的压缩插件见附件

wangzhen7499

请教一个问题，如何去获取手机里面的所有图片的数据库

Masion

这个是有系统通过 input type=file提供的，不需要程序员关心

wangzhen7499

不是关于本帖子的例子，是我想用X5 写一个相册的demo ，遇到了一个问题：
在android 开发中我们可以通过MediaStore.Images 来获取手机中的所有图片信息。
但是在X5 开发中，我们该怎么去获取手机里面所有图片的信息呢，看楼主之前的帖子有写过相册的demo，可否指教一下～

漫步者

楼主，发现个问题，pc端和模拟器测试是好的，手机浏览器 上传是 后台获取不到 image 的二进制字符串

Masion

什么类型的手机，什么浏览器？