01 | <script src= "js/mui.min.js" ></script> |
02 | <script src= "js/jpgtobase64.js" ></script> |
03 | <script> |
04 | var photo; //用以接收图片最终地址 |
05 |
06 | //弹出选择拍照还是从相册获取 |
07 | document.querySelector( '#upload' ).addEventListener( 'tap' , function (){ |
08 | var buttonTit = [{ |
09 | title: "拍照" |
10 | }, { |
11 | title: "从手机相册选择" |
12 | }]; |
13 | plus.nativeUI.actionSheet({ |
14 | title: "上传图片" , |
15 | cancel: "取消" , |
16 | buttons: buttonTit |
17 | }, function (b) { /*actionSheet 按钮点击事件*/ |
18 | switch (b.index) { |
19 | case 0: |
20 | break ; |
21 | case 1: |
22 | getImage(); /*拍照*/ |
23 | break ; |
24 | case 2: |
25 | galleryImg(); /*打开相册*/ |
26 | break ; |
27 | default : |
28 | break ; |
29 | } |
30 | }) |
31 | }) |
32 |
33 | //拍照 |
34 | function getImage(){ |
35 | var cmr = plus.camera.getCamera(1); //获取后面的摄像头 |
36 | cmr.captureImage( function (p) { |
37 | //拍照成功,返回路径 p,但是不是绝对路径 |
38 | //通过p,读取图片文件 |
39 | plus.io.resolveLocalFileSystemURL(p, function (entry) { |
40 | //entry为获取的文件,.file()方法可以获取该文件的文件名、大小等信息,返回包含文件信息的对象 |
41 | entry.file( function (file) { |
42 | //alert("getFile:" + JSON.stringify(file)); |
43 | var fileReader = new plus.io.FileReader(); //开启读取文件 |
44 | fileReader.readAsDataURL(file, 'utf-8' ); //将文件数据对象信息file进行url base64编码 |
45 | fileReader.onloadend = function (evt) { |
46 | //压缩图片 |
47 | convertImgToBase64(evt.target.result, function (retImg) { |
48 | photo = retImg; |
49 | document.querySelector( '.uploaded-imgs' ).innerHTML += '<span><img src="' +photo+ '"></span>' ; |
50 | }); |
51 | } |
52 | }) |
53 | }, function (e) { |
54 | alert(e.message); |
55 | }); |
56 | }, function (e) {}, { |
57 | filename: "_doc/camera/" |
58 | }); //拍照 |
59 | } |
60 |
61 | //从相册选择 |
62 | function galleryImg(){ |
63 | plus.gallery.pick( function (e){ |
64 | for ( var i in e.files){ |
65 | var fileSrc = e.files[i]; |
66 | //压缩图片 |
67 | convertImgToBase64(fileSrc, function (retImg) { |
68 | photo = retImg; |
69 | document.querySelector( '.uploaded-imgs' ).innerHTML += '<span><img src="' +photo+ '"></span>' ; |
70 | }); |
71 | } |
72 | }, function (e) { |
73 | console.log( "取消选择图片" ); |
74 | },{ |
75 | filter: "image" , |
76 | multiple: true , |
77 | maximum: 1, |
78 | system: false , |
79 | onmaxed: function () { |
80 | plus.nativeUI.alert( '最多只能选择1张图片' ); |
81 | } |
82 | }); |
83 | } |
84 | </script> |
01 | function convertImgToBase64(url, callback, outputFormat) { |
02 | var canvas = document.createElement( 'CANVAS' ); |
03 | var ctx = canvas.getContext( '2d' ); |
04 | var img = new Image; |
05 | img.crossOrigin = 'Anonymous' ; |
06 | img.onload = function () { |
07 | var width = img.width; |
08 | var height = img.height; |
09 | // 按比例压缩1倍 |
10 | var rate = (width < height ? width / height : height / width) / 1; |
11 | canvas.width = width * rate; |
12 | canvas.height = height * rate; |
13 | ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate); |
14 | var dataURL = canvas.toDataURL(outputFormat || 'image/png' ); |
15 | callback.call( this , dataURL); |
16 | canvas = null ; |
17 | }; |
18 | img.src = url; |
19 | } |