手机打开html5base64闪退,Bitmap.loadBase64Data卡死,app闪退

本文介绍如何使用JavaScript动态创建canvas,将图片加载并在其上添加时间戳水印,最后通过Plus NativeObj将图片转换为JPEG格式并保存。重点在于图像处理和前端技术的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

var Img = new Image();

Img.src = sd_path;

console.log("1=================================");

Img.onload() = function() {

console.log("2=================================");

var myCanvas = document.createElement("canvas");

myCanvas.width = Img.width;

myCanvas.height = Img.height;

var ctx = myCanvas.getContext("2d");

ctx.drawImage(Img, 0, 0);

ctx.font = "80px microsoft yahei";

ctx.fillStyle = "rgba(255,0,0,1)";

ctx.fillText("拍照时间:" + getNowFormatDate(), 0, Img.height - 100, myCanvas.width - 10);

console.log("3=================================");

data = myCanvas.toDataURL();

//TODO bitmap 修改图片 start

var bitmap = new plus.nativeObj.Bitmap();

console.log("4=================================");

bitmap.loadBase64Data(data, function() {

console.log("加载图片成功");

}, function() {

console.log("加载图片失败");

});

bitmap.save(sd_path, {

overwrite: true,

format: "jpg",

}, function(i) {

var result = JSON.stringify(i);

var data = JSON.parse(result);

var target = data.target;

console.log('保存图片成功:' + result);

//start

var imageDiv = document.createElement("div");

imageDiv.className = "media-item image-item mui-col-"

imageDiv.innerHTML = '' +

''%20+%20target%20+%20'' +

'';

imageList.appendChild(imageDiv);

console.log("加入图片列表的地址:" + target);

//在这里获取到图片的路径

photoPath = target;

bitmap.clear();

//end

}, function(e) {

console.log('保存图片失败:' + JSON.stringify(e));

});

//TODO bitmap 修改图片 end

}*/

### 将图片转换为 Base64 编码是 Node.js 中常见的操作,尤其在处理上传、嵌入图片或前后端数据交互时非常有用。以下是几种常见方法: #### 通过读取本地文件生成 Base64 字符串 可以使用 `fs.readFileSync` 同步读取图片文件,并通过 `Buffer.from()` 转换为 Base64 编码字符串。 ```javascript const fs = require('fs'); function base64_encode(file) { const bitmap = fs.readFileSync(file); return `data:image/png;base64,${Buffer.from(bitmap).toString('base64')}`; } // 示例:将图片编码后写入文件 fs.writeFile('./output.txt', base64_encode('./image.png'), err => { if (err) throw err; }); ``` 此方法适用于静态资源的编码需求,如 CSS 或 HTML 中内联小图标[^3]。 #### 使用 Koa 框架接收上传的图片并转为 Base64 在 Web 应用中,可以通过中间件(如 `koa-body`)接收上传的图片文件,并将其内容读取为 Buffer 对象进行编码。 ```javascript const fs = require('fs'); const Router = require('koa-router'); module.exports = router => { router.post('/upload', async ctx => { const file = ctx.request.body.files.file; // 获取上传的文件对象 const buffer = fs.readFileSync(file.path); // 读取临时路径中的文件 const base64String = `data:image/jpeg;base64,${buffer.toString('base64')}`; ctx.body = { base64: base64String }; }); }; ``` 该方式适用于需要从前端上传图片并在服务端直接进行 Base64 编码的场景[^4]。 #### 从远程 URL 下载图片并转换为 Base64 对于网络图片资源,可以使用 `http` 或 `https` 模块下载图片,然后拼接 Buffer 并进行 Base64 编码。 ```javascript const http = require('http'); const https = require('https'); const path = require('path'); const url = 'https://example.com/image.jpg'; const mod = /^https/.test(url) ? https : http; mod.get(url, res => { const chunks = []; let size = 0; res.on('data', chunk => { chunks.push(chunk); size += chunk.length; }); res.on('end', () => { const data = Buffer.concat(chunks, size); const ext = path.extname(url).substring(1); const base64Image = `data:image/${ext};base64,${data.toString('base64')}`; console.log(base64Image); }); }); ``` 这种方式适合用于抓取外部资源并进行编码处理的情况[^5]。 #### 设置请求体大小限制以避免 Base64 数据过大导致报错 Base64 图片数据通常较大,因此在使用 Express 接收 Base64 字符串时,需设置 body-parser 的请求体大小限制。 ```javascript const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json({ limit: '50mb' })); app.use(bodyParser.urlencoded({ limit: '50mb', extended: true })); app.post('/decode', (req, res) => { const base64Data = req.body.image.replace(/^data:image\/\w+;base64,/, ''); const binaryData = Buffer.from(base64Data, 'base64'); fs.writeFile('./decoded_image.png', binaryData, err => { if (err) console.error('保存失败'); else console.log('保存成功'); }); res.send('完成'); }); ``` 该配置可确保服务端能够正确接收和处理较大的 Base64 数据流[^1]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值