Skip to content

Commit 415595c

Browse files
JimmyDaddyJimmyDaddy
committed
feat: base64 export fix #53 
1 parent e116892 commit 415595c

File tree

7 files changed

+115
-63
lines changed

7 files changed

+115
-63
lines changed

‎README.MD‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,17 @@ pod 'RNImageMarker', :path => '../node_modules/react-native-image-marker'
5252
|`scale`| scale image |
5353
|`quality`| image qulaity |
5454
|`filename` | set filename for the result |
55-
|`saveFormat`| `png` or `jpg` |
55+
|`saveFormat`| `png` `jpg` `base64` |
5656
|`textBackgroundStyle` | text background style |
5757

5858
```typescript
59+
60+
export enum ImageFormat {
61+
png = 'png',
62+
jpg = 'jpg',
63+
base64 = 'base64',
64+
}
65+
5966
export type TextMarkOption = {
6067
// image src, local image
6168
src: ImageSourcePropType,
@@ -92,7 +99,7 @@ export type TextMarkOption = {
9299
|`scale`| scale image |
93100
|`quality`| image qulaity |
94101
|`filename` | set filename for the result |
95-
|`saveFormat`| `png` or `jpg`, default is `jpg` |
102+
|`saveFormat`| `png` `jpg` `base54`, default is `jpg` |
96103
97104
```typescript
98105
export type ImageMarkOption = {

‎android/src/main/java/com/jimmydaddy/imagemarker/ImageMarkerManager.java‎

Lines changed: 41 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
import android.text.StaticLayout;
1313
import android.text.TextPaint;
1414
import android.text.TextUtils;
15+
import android.util.Base64;
1516
import android.util.Log;
1617

1718
import com.facebook.common.references.CloseableReference;
@@ -30,6 +31,7 @@
3031
import com.facebook.react.views.text.ReactFontManager;
3132

3233
import java.io.BufferedOutputStream;
34+
import java.io.ByteArrayOutputStream;
3335
import java.io.FileOutputStream;
3436
import java.io.IOException;
3537
import java.net.URI;
@@ -48,6 +50,7 @@ public class ImageMarkerManager extends ReactContextBaseJavaModule {
4850
private ReactApplicationContext context;
4951
private static final String PROP_ICON_URI = "uri";
5052
private static final String IMAGE_MARKER_TAG = "[ImageMarker]";
53+
private static final String BASE64 = "base64";
5154

5255

5356
public ImageMarkerManager(ReactApplicationContext reactContext) {
@@ -229,13 +232,26 @@ private void markImageByBitmap (
229232
canvas.save();
230233
// 存储
231234
canvas.restore();
232-
bos = new BufferedOutputStream(new FileOutputStream(dest));
235+
// export base64
236+
if (dest.equals(BASE64)) {
237+
ByteArrayOutputStream base64Stream = new ByteArrayOutputStream();
238+
icon.compress(Bitmap.CompressFormat.PNG, quality, base64Stream);
239+
base64Stream.flush();
240+
base64Stream.close();
241+
byte[] bitmapBytes = base64Stream.toByteArray();
242+
String result = Base64.encodeToString(bitmapBytes, Base64.DEFAULT);
243+
promise.resolve("data:image/png;base64,".concat(result));
244+
} else {
245+
bos = new BufferedOutputStream(new FileOutputStream(dest));
233246

234247
// int quaility = (int) (100 / percent > 80 ? 80 : 100 / percent);
235-
icon.compress(getSaveFormat(saveFormat), quality, bos);
236-
bos.flush();
237-
//保存成功的
238-
promise.resolve(dest);
248+
icon.compress(getSaveFormat(saveFormat), quality, bos);
249+
bos.flush();
250+
bos.close();
251+
//保存成功的
252+
promise.resolve(dest);
253+
}
254+
239255
} catch (Exception e) {
240256
e.printStackTrace();
241257
promise.reject("error", e.getMessage(), e);
@@ -393,12 +409,24 @@ private void markImageByText(
393409
textLayout.draw(canvas);
394410
canvas.restore();
395411

396-
bos = new BufferedOutputStream(new FileOutputStream(dest));
412+
if (dest.equals(BASE64)) {
413+
ByteArrayOutputStream base64Stream = new ByteArrayOutputStream();
414+
icon.compress(Bitmap.CompressFormat.PNG, quality, base64Stream);
415+
base64Stream.flush();
416+
base64Stream.close();
417+
byte[] bitmapBytes = base64Stream.toByteArray();
418+
String result = Base64.encodeToString(bitmapBytes, Base64.DEFAULT);
419+
promise.resolve("data:image/png;base64,".concat(result));
420+
} else {
421+
bos = new BufferedOutputStream(new FileOutputStream(dest));
422+
icon.compress(getSaveFormat(saveFormat) , quality, bos);
423+
bos.flush();
424+
bos.close();
425+
//保存成功的
426+
promise.resolve(dest);
427+
}
428+
397429

398-
icon.compress(getSaveFormat(saveFormat) , quality, bos);
399-
bos.flush();
400-
//保存成功的
401-
promise.resolve(dest);
402430
} catch (Exception e) {
403431
e.printStackTrace();
404432
promise.reject("error", e.getMessage(), e);
@@ -781,6 +809,9 @@ static Position getRectFromPosition(String position, int width, int height, int
781809
private String generateCacheFilePathForMarker(String imgSavePath, String filename, String saveFormat){
782810
String cacheDir = this.getReactApplicationContext().getCacheDir().getAbsolutePath();
783811

812+
if (saveFormat != null && saveFormat.equals(BASE64)) {
813+
return BASE64;
814+
}
784815
String ext = saveFormat != null && (saveFormat.equals("PNG") || saveFormat.equals("png"))? ".png" : ".jpg";
785816
if (null != filename) {
786817
if (filename.endsWith(".jpg") || filename.endsWith(".png"))

‎example/markerExample/App.js‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,8 @@ export default class MarkerTest extends React.Component {
6565
base64: false,
6666
useTextShadow: true,
6767
useTextBgStyle: true,
68-
textBgStretch: 0
68+
textBgStretch: 0,
69+
saveFormat: ImageFormat.png
6970
}
7071
}
7172

@@ -85,7 +86,16 @@ export default class MarkerTest extends React.Component {
8586
})
8687
}
8788

89+
_switchBase64Res = () => {
90+
this.setState({
91+
saveFormat: this.state.saveFormat === ImageFormat.base64 ? ImageFormat.png : ImageFormat.base64
92+
})
93+
}
94+
8895
render () {
96+
console.log('====================================')
97+
console.log(this.state.saveFormat, ImageFormat.base64, this.state.uri)
98+
console.log('====================================')
8999
return (
90100
<ScrollView style={s.container}>
91101
<View>
@@ -104,6 +114,14 @@ export default class MarkerTest extends React.Component {
104114
<Text style={s.text}>switch to mark {this.state.markImage ? 'text' : 'image'}</Text>
105115
</TouchableOpacity>
106116
</View>
117+
<View>
118+
<TouchableOpacity
119+
style={[s.btn, { backgroundColor: '#FF7043' }]}
120+
onPress={this._switchBase64Res}
121+
>
122+
<Text style={s.text}>export {this.state.saveFormat === ImageFormat.base64 ? 'base64' : 'png'} result</Text>
123+
</TouchableOpacity>
124+
</View>
107125
<View>
108126
<TouchableOpacity
109127
style={[s.btn, { backgroundColor: '#2296F3' }]}
@@ -233,13 +251,10 @@ export default class MarkerTest extends React.Component {
233251
scale: 1,
234252
markerScale: 1,
235253
quality: 100,
236-
saveFormat: ImageFormat.jpg
254+
saveFormat: this.state.saveFormat
237255
}).then((path) => {
238-
console.log('====================================')
239-
console.log(path)
240-
console.log('====================================')
241256
this.setState({
242-
uri: Platform.OS === 'android' ? 'file://' + path : path,
257+
uri: this.state.saveFormat === ImageFormat.base64 ? path : Platform.OS === 'android' ? 'file://' + path : path,
243258
show: true
244259
})
245260
}).catch((err) => {
@@ -269,15 +284,13 @@ export default class MarkerTest extends React.Component {
269284
paddingX: 10,
270285
paddingY: 10,
271286
color: '#0f0'
272-
} : null
287+
} : null,
288+
saveFormat: this.state.saveFormat
273289
})
274290
.then((path) => {
275-
console.log('====================================')
276-
console.log(path)
277-
console.log('====================================')
278291
this.setState({
279292
show: true,
280-
uri: Platform.OS === 'android' ? 'file://' + path : path
293+
uri: this.state.saveFormat === ImageFormat.base64 ? path : Platform.OS === 'android' ? 'file://' + path : path
281294
})
282295
}).catch((err) => {
283296
console.log('====================================')
@@ -296,13 +309,11 @@ export default class MarkerTest extends React.Component {
296309
Y: 150,
297310
scale: 1,
298311
markerScale: 0.5,
299-
quality: 100
312+
quality: 100,
313+
saveFormat: this.state.saveFormat
300314
}).then((path) => {
301-
console.log('====================================')
302-
console.log(path)
303-
console.log('====================================')
304315
this.setState({
305-
uri: Platform.OS === 'android' ? 'file://' + path : path,
316+
uri: this.state.saveFormat === ImageFormat.base64 ? path : Platform.OS === 'android' ? 'file://' + path : path,
306317
show: true
307318
})
308319
}).catch((err) => {
@@ -332,14 +343,12 @@ export default class MarkerTest extends React.Component {
332343
color: '#0f0'
333344
} : null,
334345
scale: 1,
335-
quality: 100
346+
quality: 100,
347+
saveFormat: this.state.saveFormat
336348
}).then((path) => {
337-
console.log('====================================')
338-
console.log(path)
339-
console.log('====================================')
340349
this.setState({
341350
show: true,
342-
uri: Platform.OS === 'android' ? 'file://' + path : path
351+
uri: this.state.saveFormat === ImageFormat.base64 ? path : Platform.OS === 'android' ? 'file://' + path : path
343352
})
344353
}).catch((err) => {
345354
console.log('====================================')

‎index.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ export declare enum TextBackgroundType {
1414
}
1515
export declare enum ImageFormat {
1616
png = "png",
17-
jpg = "jpg"
17+
jpg = "jpg",
18+
base64 = "base64"
1819
}
1920
export declare type ShadowLayerStyle = {
2021
'dx': number;

‎index.js‎

Lines changed: 3 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* @Author: JimmyDaddy
33
* @Date: 2017-09-14 10:40:09
44
* @Last Modified by: JimmyDaddy
5-
* @Last Modified time: 2019-09-29 14:58:39
5+
* @Last Modified time: 2019-09-29 15:36:11
66
* @Description
77
* @flow
88
*/
@@ -29,6 +29,7 @@ export enum TextBackgroundType {
2929
export enum ImageFormat {
3030
png = 'png',
3131
jpg = 'jpg',
32+
base64 = 'base64',
3233
}
3334

3435

0 commit comments

Comments
 (0)