正文

mui开发app之js将base64转图片文件

devil  2022-02-08  349

关键词：

之前我已经做过一个利用cropper裁剪并且制作头像的功能。如何在mui app中实现相册或相机获取图片后裁剪做头像请看另一篇博客：mui开发app之cropper裁剪后上传头像的实现

但是当时裁剪后图片是保存为base64格式的，这是h5 canvas建议使用的图片传输方式。

很多时候很多api，比如mui中第三方插件map中有一个setIcon传入的必须是本地的图片文件地址，目前的第三方地图系统任然不支持base64的标注图，所以折腾了一晚之后终于在native.js中找到了将base64转化为图片的办法

官网文档请看：http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.BitmapSaveOptions

将bitmap实现放入app的公共js当中，比如我放在app.js中，并且塞在app这个闭包当中，随出引用调用：

(function($, owner) {
//将BASE 64保存为文件
　　
owner.baseImgFile = function(uid, base64, quality, callback) {
        quality = quality || 10;
        callback = callback || $.noop;
        var bitmap = new plus.nativeObj.Bitmap();
        // 从本地加载Bitmap图片
        bitmap.loadBase64Data(base64, function() {
            //    console.log('加载图片成功');
            bitmap.save("_doc/" + uid + ".jpg", {
                overwrite: true,
                quality: quality
            }, function(i) {
                callback(i);
                //    console.log('保存图片成功：'+JSON.stringify(i));
            }, function(e) {
                console.log('保存图片失败：' + JSON.stringify(e));
            });
        }, function(e) {
            console.log('加载图片失败：' + JSON.stringify(e));
        });
    }
}(mui, window.app = {}));

第一个参数是文件名，我直接使用用户id，第二个参数是base64字符串，第三个参数是图片质量1-100，最后一个参数回掉函数，可获取保存图片文件的信息

使用：

app.baseImgFile(app.getUserInfo().id,my_icon,1,function(i){
                                alert(JSON.stringify(i));
                            });

也可以直接定义为function xxx(){}这样在调用的时候就不是从闭包中获取，通过原函数名调用

在官方文档中：

bitmap对象下的方法：

其中我们使用的save方法：

官方示例：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <title>NativeObj Example</title>
        <script type="text/javascript">
var wc=null,bitmap=null;
// H5 plus事件处理
function plusReady(){
    wc = plus.webview.currentWebview();
    bitmap = new plus.nativeObj.Bitmap("test");
    // 将webview内容绘制到Bitmap对象中
    wc.draw(bitmap,function(){
        console.log('绘制图片成功');
    },function(e){
        console.log('绘制图片失败：'+JSON.stringify(e));
    });
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener("plusready",plusReady,false);
}
// 保存图片
function saveBitmap(){
    bitmap.save( "_doc/a.jpg"
    ,{}
    ,function(i){
        console.log('保存图片成功：'+JSON.stringify(i));
    }
    ,function(e){
        console.log('保存图片失败：'+JSON.stringify(e));
    });
}
        </script>
    </head>
    <body>
        保存图片<br/>
        <button onclick="saveBitmap()">Save</button>
    </body>
</html>

javacv音视频开发宝典：实现base64编码图片转换成图片文件通用转换器，以base64转png图片文件为例，其他图片格式也全部支持

《JavaCV音视频开发宝典》专栏目录导航《JavaCV音视频开发宝典》专栏介绍和目录前言在上一章中https://eguid.blog.csdn.net/article/details/123093352，我们使用几行代码就实现了JavaCV读取解析BASE64编码的图片，本章将在上一章的基础上将b... 查看详情

javacv音视频开发宝典：实现base64编码图片转换成图片文件通用转换器，以base64转png图片文件为例，其他图片格式也全部支持

将图片转成base64写进hml，无需依赖本地文件

因项目需求更改，本来html中的图片是需要本地图片支持的，结果改了经过自己查阅资料，轻松搞定 1，通过base64encodee.encode(byte[]),将文件的字节数组传入，得到一个字符串 str，2，标签<img src=""/>, 将字符串... 查看详情

base64图片

...是用于app的小图标的格式。Base64目前主要用于HTML5、移动开发等不考虑IE6的场景中。减少一个HTTP请求，适合小尺寸的图片。若大尺寸的图片使用base64的话，会导致数据太大，加载过慢。怎么把图片转成这个格式呢？通过base64... 查看详情

处理项目中的资源文件：es6css图片压缩图片转成base64的编码形式

新建目录 Coponents:放需要的应用组件，创建layer组件；--App.js：应用的入口 --创建layer组件：Layer.html Layer.less Layer.js --修改配置文件： *记得安装插件html-webpack-plugins; loader官网=>UsingLoaders&nb 查看详情

将inputtype="file"类型的图片文件转成base64

带有图片的form表单上传数据是很麻烦的，因为图片通常都是和文字分开上传，这是很麻烦的，所有吧图片转成base64就可以和当成文字上传了。话不多少，看代码：首先定义一个类型为file的input标签还要定义一个onchange事件，并传... 查看详情

img2base64util，图片转base64码(代码片段)

importorg.apache.commons.codec.binary.Base64;importjava.io.*;publicclassImg2Base64Util/***将图片转换成Base64编码*@paramimgFile待处理图片*@return*/publicstaticStringgetImgStr(StringimgFile)//将图片文件转化为字节数组字符串，并对其进行查看详情

同一个app，华为荣耀添加图片提示转base64失败,小米却成功了？

同一个app，华为荣耀添加图片提示转base64失败,小米却成功了荣耀是安卓11，小米是安卓9同一个App如果是华为荣耀系列的，它可以添加图片的，但是小米的手机是没这个能力的。参考技术A同一个App如果是华为荣耀系列的，它可以... 查看详情

vue、js图片url转base64

参考技术A调用问题：同时要转多个图片怎么弄呢？添加方法然后查看详情

elementui之图片上传以base64的格式传给后端

参考技术A upload上传组件默认以文件流的方式传给后端，如果需要改变文件格式，则要设置auto-upload="false"阻止自动上传，使用on-change方法获得上传的文件并进行相应的处理。具体流程如... 查看详情

js图片压缩转成base64

HTML:<!doctypehtml><html><head><metacharset="UTF-8"><metaname="viewport"content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/><title>测试</title><l 查看详情

node图片转base64

抓取网络图片需要加载http模块//假定这是index.js文件varhttp=require(‘http‘);varurl=‘http://p0.meituan.net/tuanpic/3df525af5a3f7fe04077567d2a6caf794904.png‘; //一张网络图片 http.get(url,function(res){　　varchunks=[];// 查看详情

使用js将图片转换为base64格式-在线示例(代码片段)

图片转base64-在线工具<!Doctypehtml><html> <head> <metacharset="utf-8"/> <title>html5imagetobase64</title> </head> <body> <scripttype=" 查看详情

html之dataurl（转）

DataURL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在DataURL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。本文中，... 查看详情

用到了base64转图片文件的函数，记录一下

importjava.io.*;importsun.misc.*;//对图片文件进行Base64编码publicStringgetImagebase64(StringimgFileName)byte[]data=null;tryInputStreamin=newFileInputStream(imgFileName);data=newbyte[in.available()] 查看详情

解决将网络图片转成base64格式报跨域的问题

参考技术A此前开发了一个前端生成海报的功能。但是由于海报的图片是网络路径的图片。所以在生成海报前需要把网络图片转成base64格式。但是在转的途中。。发现，报跨域了。。。然后百度了一大堆看似靠谱的方法。本来以... 查看详情

将图片转成数据：image/png;base64用于网页显示

】将图片转成数据：image/png;base64用于网页显示【英文标题】：Convertingimageintodata:image/png;base64forwebpagedisaplay【发布时间】：2012-04-0111:22:50【问题描述】：如果访问jQuery-File-UploadDemopage并尝试上传图片，然后查看JSON响应，他会注意... 查看详情

知识巩固——性能优化之减少http请求

...rites其实更高深的应该是把图标做成字体文件直接引用2、图片地图类似上，area标签的coords属性3、合并脚本和样式表，js和css4、使用base64码减少请求，只针对教小的图片，还是归到1去，可以设成字体5、新思路，将图片转码后放... 查看详情