使用Phonegap(javascript),我正在尝试缩小用户从其图库中选择的图像并将其复制到另一个文件夹结构中。
我一直在尝试我能想到的一切,但我的想法已经不多了。我知道有几个类似的问题,但没有一个适合我。
方法1
尝试从canvas对象中获取图像,并使用PhoneGap将其存储在手机的本地存储中。这样可以保存图像,但是它已损坏。我尝试了很多不同的方法。我尝试使用Uint8Array
,atob
转换等。请参阅下面的一些代码。
方法2
尝试使用copyTo功能。但是,我有两个问题。 1)我不想要全尺寸图像(占用太多存储空间) 2)由于某种原因,我正在复制的对象总是0字节。
以下是一些主要代码,请帮助。
function gotFileEntry(fe, file, type) {
alert("gotFileEntry: " + file.size);
// copy file
fe.file(function (f) { alert(f.size); }, function (e) { alert(e.code); });
fe.copyTo(dirImg, "copy.jpg", function(f) {alert("successful copy: " + f.fullPath);}, null);
var reader = new FileReader();
reader.onloadend = function (event) {
// shrink image
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = document.createElement('img');
img.src = reader.result;
img.onload = function () {
var newWidth = $(".page").width() * .8;
var newHeight = img.height / img.width * newWidth;
canvas.width = newWidth;
canvas.height = newHeight;
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, newWidth, newHeight);
// use setTimeout to allow the canvas to finish drawing
setTimeout(function () {
var shrunkImg = canvasToData(type, canvas); //canvas.toDataURL('image/jpeg');
// save image data to the phone storage
var imgData64 = canvas.toDataURL("image/png").replace(/data:image\/png;base64,/, ''); //canvas.toDataURL("image/png");//.replace("image/png", "image/octet-stream");
setTimeout(function () {
dirImg.getFile("test.png", { create: true, exclusive: false }, function (f) { getWin(imgData64, f); }, getFail);
//dirImg.getFile(file.name, { create: true, exclusive: false }, function (f) { getWin(imgData, f); }, getFail);
}, 0);
setTimeout(function () {
// returns data as Uint8Array array
var data = Base64Binary.decode(imgData64);
dirImg.getFile("test2.png", { create: true, exclusive: false }, function (f) { getWin(data, f); }, getFail);
//dirImg.getFile(file.name, { create: true, exclusive: false }, function (f) { getWin(imgData, f); }, getFail);
}, 0);
//var uintArray = Base64Binary.decode(data);
//fe.createWriter(gotFileWriter, function (error) { alert("CreateWriter failed: " + error.code); });
// Save the image path to the database
editCardView.card().UpdateImagePath(fe.fullPath);
// Display the image
$("#imgDisplay").attr({ "src": shrunkImg });
}, 0)
}
};
reader.onerror = function (event) {
errorHandler2(event.target.error.code);
};
reader.readAsDataURL(file);
}
function getWin(data, f) { f.createWriter(function(w) { writeWin(data, w); }, writeFail); };
function writeWin(data, writer) {
writer.write(data);
//writer.write(atob(data64));
};
答案 0 :(得分:1)
试试这个插件我的工作。将canvas base64保存到sdcard上的图像
<head>
<title>
Hello World
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,
width=device-width, height=device-height, target-densitydpi=device-dpi" />
<script type="text/javascript" src="phonegap.js">
</script>
<script type="text/javascript">
//Base64code indicate about our canvas base64.
var Base64code = "iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAgAElEQVR42sS9d5xl11Xn+937hJtj5djVObdaauVkWZIt29gYbDlhjHkwJANDmmGY8ObBzGMew4c3MDAwQ3jYfgYeOQx4HL";
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
cordova.exec(function(winParam) {
console.log(winParam)
}, function(error) {}, "Base64toImagePlugin", "base64Data", [Base64code]);
}
</script>
</head>
<body>
</body>
Plugin类名的Java代码:Base64toImagePlugin.java
package com.inic.base64toimage.Plugin;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Environment;
import android.util.Base64;
import android.util.Log;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
/**
* Created by ind652 on 08/10/13.
*/
public class Base64toImagePlugin extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals("base64Data")) {
Log.i("BASE64DATA", "FastCanvas queueing set background color " + args.getString(0));
byte[] imageAsBytes = Base64.decode(args.getString(0).getBytes(), 0);
Bitmap b= BitmapFactory.decodeByteArray(imageAsBytes, 0, imageAsBytes.length);
storeImage(b,"amitd.png");
return true;
}else{
return false;
}
}
private boolean storeImage(Bitmap imageData, String filename) {
//get path to external storage (SD card)
String iconsStoragePath = Environment.getExternalStorageDirectory() + "/myAppDir/amit/";
File sdIconStorageDir = new File(iconsStoragePath);
//create storage directories, if they don't exist
sdIconStorageDir.mkdirs();
try {
String filePath = sdIconStorageDir.toString() + filename;
FileOutputStream fileOutputStream = new FileOutputStream(filePath);
BufferedOutputStream bos = new BufferedOutputStream(fileOutputStream);
//choose another format if PNG doesn't suit you
imageData.compress(Bitmap.CompressFormat.PNG, 100, bos);
bos.flush();
bos.close();
} catch (FileNotFoundException e) {
// Log.i("TAG", "Error saving image file: " + e.getMessage());
return false;
} catch (IOException e) {
// Log.i("TAG", "Error saving image file: " + e.getMessage());
return false;
}
return true;
}
}
config.xml中:
com.inic.base64toimage.Plugin是包名,您可以在其中创建插件类
<feature name="Base64toImagePlugin">
<param name="android-package" value="com.inic.base64toimage.Plugin.Base64toImagePlugin" />
</feature>