I've done this before, using cropper to crop and make avatars. How to implement a photo album or camera in the MUI app to get a picture and cut it for the avatar please see another blog:MUI Development app Cropper the implementation of the upload avatar after cropping
But the picture was saved in base64 format when it was cropped, which is the recommended image transfer method for H5 canvas.
Many times, many APIs, such as the MUI in the third-party plug-in map has a seticon incoming must be a local image file address, the current third-party map system does not support base64 annotation map, So, after a night of tossing and turning, I finally found a way to transform Base64 into a picture in native.js.
Official documents Please see: http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.BitmapSaveOptions
Put the bitmap implementation into the app's public JS, such as I put in the app.js, and plug in the application of this closure, with the reference call:
(function($, owner) {//Save Base 64 as a fileOwner.baseimgfile=function(UID, base64, quality, callback) {quality= Quality | | 10; Callback= Callback | |$.noop; varBitmap =NewPlus.nativeObj.Bitmap (); //loading bitmap pictures from localBitmap.loadbase64data (Base64,function() { //console.log (' Load picture Success ');Bitmap.save ("_doc/" + uid + ". jpg", {overwrite:true, quality:quality},function(i) {callback (i); //console.log (' Save picture Success: ' +json.stringify (i));},function(e) {Console.log (' Save picture failed: ' +json.stringify (e)); }); }, function(e) {Console.log (' Load picture failed: ' +json.stringify (e)); }); }} (MUI, Window.app= {}));
The first parameter is the file name, I use the user ID directly, the second parameter is the Base64 string, the third parameter is the picture quality 1-100, the last parameter returns the function, can get information to save the picture file
Use:
App.baseimgfile (App.getuserinfo (). id,my_icon,1,function(i) { alert (json.stringify (i)); });It can also be defined directly as function xxx () {} so that it is not fetched from the closure at the time of invocation, and is called by the original function name
In the official documentation:
Methods under the Bitmap object:
Where we use the Save method:
Official Example:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"/> <Metaname= "Viewport"content= "initial-scale=1.0, maximum-scale=1.0, User-scalable=no"/> <title>Nativeobj Example</title> <Scripttype= "Text/javascript">varWC=NULL, Bitmap=NULL;//H5 Plus event handlingfunctionPlusready () {WC=Plus.webview.currentWebview (); Bitmap= NewPlus.nativeObj.Bitmap ("Test"); //drawing WebView content into a bitmap objectWc.draw (Bitmap,function() {Console.log ('draw a picture successfully'); },function(e) {Console.log ('failed to draw picture:'+json.stringify (e)); });}if(window.plus) {Plusready ();}Else{Document.addeventlistener ("Plusready", Plusready,false);}//Save PicturefunctionSavebitmap () {Bitmap.save ("_doc/a.jpg" ,{} ,function(i) {Console.log ('Save Picture success:'+json.stringify (i)); } ,function(e) {Console.log ('failed to save Picture:'+json.stringify (e)); });} </Script> </Head> <Body>Save Picture<BR/> <Buttononclick= "Savebitmap ()">Save</Button> </Body></HTML>
The MUI Development app JS will base64 to the picture file
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
