react-native 画一画和保存为图片分享及保存。
本文主要使用知识webview和rn通讯；html 中的canvas画布保存为base64地址回掉给rn；
本篇为本人亲自写的一个项目活动，现在分享给大家；
1.ValentinesDay.js
文件
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TouchableOpacity, Image, Dimensions,
View, ScrollView, TouchableWithoutFeedback
} from 'react-native';
import WebCanvas from './webCanvasss'; //引入 webview中html的代码
import { cal } from './../Common/Cal.js'; //我自己封装的适配，你们可以把下面的cal()都去掉看效果
const base64= 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA。。。。。'; // 随便写个base64地址，
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TouchableOpacity, Image, Dimensions,
View, ScrollView, TouchableWithoutFeedback
} from 'react-native';
import WebCanvas from './webCanvasss'; //引入 webview中html的代码
import { cal } from './../Common/Cal.js'; //我自己封装的适配，你们可以把下面的cal()都去掉看效果
const base64= 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA。。。。。'; // 随便写个base64地址，
const url = 'http://192.168.0.43:8080/teacher/data/01010072/1/438/4257-1-0-0.jpg';
const BACKGROUND = require('../image/activity/background.png');//这些图片是我本地的，复制代码时候，随便用你自己本地图片代替，这样避免报错
const CANVASIMAGE = require('../image/activity/canvas.png');
const BI = require('../image/activity/pen.png');
const BIED = require('../image/activity/ penEd.png');
const CA = require('../image/activity/grater.png');
const CAED = require('../image/activity/ graterEd.png');
const BTN = require('../image/activity/btn.png');
const MODALCANVAS = require('../image/activity/activeModal.png');
const { width, height } = Dimensions.get("window");
import ValentinesDaySub from "./ValentinesDaySub";//跳到下一个页面
export default class ValentinesDay extends Component {
constructor(props) {
super(props);
SplashScreen.hide();
this.state = {
scrollEnabled: true, //判断画笔和橡皮擦
modal: false
}
}
_pen() {
this.setState({
scrollEnabled: true
})
this.refs.canvas._pen();
}
const BACKGROUND = require('../image/activity/background.png');//这些图片是我本地的，复制代码时候，随便用你自己本地图片代替，这样避免报错
const CANVASIMAGE = require('../image/activity/canvas.png');
const BI = require('../image/activity/pen.png');
const BIED = require('../image/activity/ penEd.png');
const CA = require('../image/activity/grater.png');
const CAED = require('../image/activity/ graterEd.png');
const BTN = require('../image/activity/btn.png');
const MODALCANVAS = require('../image/activity/activeModal.png');
const { width, height } = Dimensions.get("window");
import ValentinesDaySub from "./ValentinesDaySub";//跳到下一个页面
export default class ValentinesDay extends Component {
constructor(props) {
super(props);
SplashScreen.hide();
this.state = {
scrollEnabled: true, //判断画笔和橡皮擦
modal: false
}
}
_pen() {
this.setState({
scrollEnabled: true
})
this.refs.canvas._pen();
}
_clean() {
this.setState({
scrollEnabled: false
})
this.refs.canvas._clean();
}
this.setState({
scrollEnabled: false
})
this.refs.canvas._clean();
}
// 以url的形式添加背景
_addImageUrl() {
this.refs.canvas._addImageUrl(url);
}
_addImageUrl() {
this.refs.canvas._addImageUrl(url);
}
// 以base64的形式添加背景
_addImageBase64() {
this.refs.canvas._addImageBase64(base64);
}
_addImageBase64() {
this.refs.canvas._addImageBase64(base64);
}
// 得到图片的base64形式
_getBase64() {
this.refs.canvas._getBase64(base64);
}
_getBase64() {
this.refs.canvas._getBase64(base64);
}
// 保存base64
_handleBase64(data) {
// console.log(data)
this.props.navigator.push({
component: ValentinesDaySub,
params: {
navigator: this.props.navigator,
canvasUrl: data,
new:this.props.new
}
})
}
// 图片右转
_rotateRight() {
this.refs.canvas._rotateRight();
}
_Modal() {
if(!this.state.modal) return false;
return (
source={MODALCANVAS}
style={{
width: cal(343),
height: cal(496),
resizeMode: 'cover',
marginTop: cal(-30),
justifyContent: "flex-end",
alignItems: "center"
}}
>
width: cal(303),
height: cal(350), marginBottom: cal(30)
}}>
1. 活动时间：2018年2月14日—2018年2月21日 。
2. 活动玩法：用户在指定区域勾勒任意图像，然后会随机生成一支签。没有上上签，也没有下下签，只有几句有意思的新年寄语。（ps：新用户参与活动后，需继续完成注册 获得中奖资格）。
3. 活动奖励：我们会在所有参与活动的新老注册用户中随机抽取，每位用户可不限次数画图抽签（你可以刷爆我们的图库，只为你满意的那根签），不过不会增加中奖概率。
4. 奖品：一等奖：价值4000元 的单人或双人游 二等奖： 200元 红包 三等奖：66元 红包 （各档中奖人数视活动人数而定）。
5. 获奖名单将于活动结束三天内 ，在app中公布，而奖品会在工作人员与获奖者核实信息后的五个工作日 内寄出。
6. 本活动最终解释权归爱特缘所有。
onPress={() => {
this.setState({
modal :false
})
}}
style={{
position: "absolute", width: cal(50),
height: cal(50), right: 0, top: cal(-1)
}}>
)
}
render() {
return (
//
{this._Modal()}
handleBase64={this._handleBase64.bind(this)}
ref='canvas'
width={cal(250)}
height={cal(280)}
/>
_handleBase64(data) {
// console.log(data)
this.props.navigator.push({
component: ValentinesDaySub,
params: {
navigator: this.props.navigator,
canvasUrl: data,
new:this.props.new
}
})
}
// 图片右转
_rotateRight() {
this.refs.canvas._rotateRight();
}
_Modal() {
if(!this.state.modal) return false;
return (
style={{
width: cal(343),
height: cal(496),
resizeMode: 'cover',
marginTop: cal(-30),
justifyContent: "flex-end",
alignItems: "center"
}}
>
height: cal(350), marginBottom: cal(30)
}}>
this.setState({
modal :false
})
}}
style={{
position: "absolute", width: cal(50),
height: cal(50), right: 0, top: cal(-1)
}}>
)
}
render() {
return (
//
{this._Modal()}
ref='canvas'
width={cal(250)}
height={cal(280)}
/>
this.setState({
modal:true
})
}}>
{/*
source={{uri: this.state.imageData, scale: 3}}
/> */}
);
}
}
const styles = StyleSheet.create({
imagecontainer: {
width: width,
height: height,
resizeMode: 'cover',
// height: cal(603),
flex: 1
},
container: {
// justifyContent: 'center',
// alignItems: 'center',
flex: 1,
backgroundColor: '#F5FCFF',
},
canvasViewImage: {
alignItems: "center",
marginTop: cal(50)
},
canvasImage: {
width: cal(317),
height: cal(390),
// justifyContent:"center",
alignItems: "center",
paddingTop: cal(75),
},
canvasStart: {
width: cal(250),
height: cal(280),
backgroundColor: "rgba(0,0,0,0)",
},
btnView: {
alignItems: "center",
marginTop: cal(15)
},
btnTouchableOpacity: {
width: cal(150),
height: cal(52)
},
activityRules: {
marginTop: cal(15),
},
activityRulesView: {
alignItems: "center"
},
activityRulesTextH1: {
color: "#b40e12",
fontSize: cal(16)
},
ModalBackground: {
width: width,
height: height,
position: "absolute",
top: 0,
left: 0,
backgroundColor: "rgba(0,0,0,0.7)",
zIndex: 99,
justifyContent: "center",
alignItems: "center"
},
imagecontainer: {
width: width,
height: height,
resizeMode: 'cover',
// height: cal(603),
flex: 1
},
container: {
// justifyContent: 'center',
// alignItems: 'center',
flex: 1,
backgroundColor: '#F5FCFF',
},
canvasViewImage: {
alignItems: "center",
marginTop: cal(50)
},
canvasImage: {
width: cal(317),
height: cal(390),
// justifyContent:"center",
alignItems: "center",
paddingTop: cal(75),
},
canvasStart: {
width: cal(250),
height: cal(280),
backgroundColor: "rgba(0,0,0,0)",
},
btnView: {
alignItems: "center",
marginTop: cal(15)
},
btnTouchableOpacity: {
width: cal(150),
height: cal(52)
},
activityRules: {
marginTop: cal(15),
},
activityRulesView: {
alignItems: "center"
},
activityRulesTextH1: {
color: "#b40e12",
fontSize: cal(16)
},
ModalBackground: {
width: width,
height: height,
position: "absolute",
top: 0,
left: 0,
backgroundColor: "rgba(0,0,0,0.7)",
zIndex: 99,
justifyContent: "center",
alignItems: "center"
},
});
2. webCanvasss.js
/**
* Created by liudawei on 2017/8/2.
* 基于webview的Canvas画布
*/
import
React
, {
Component
}
from
'react'
;
import
{
StyleSheet
,
View
,
Text
,
WebView
,
TouchableOpacity
}
from
'react-native'
;
var
html
=
`
您的浏览器不支持canvas
`
;
var
_width
,
_height
;
export
default
class
WebCanvas
extends
Component
{
webview
=
{};
constructor
(
props
) {
super
(
props
);
this
.
state
=
{
height:
this
.
props
.
height
,
width:
this
.
props
.
width
}
}
// 铅笔
_pen
(){
this
.
post
({
action:
1
})
}
// 橡皮
_clean
(){
this
.
post
({
action:
2
})
}
// 初始化画板
_init
(){
this
.
post
({
action:
'-1'
})
}
// 以url的形式添加背景
_addImageUrl
(
data
){
this
.
post
({
action:
4
,
data:
data
})
}
// 以base64的形式添加背景
_addImageBase64
(
data
){
this
.
post
({
action:
5
,
data:
data
})
}
_addImage
(
data
){
this
.
post
({
action:
4
,
data:
data
})
}
// 得到图片的base64形式
_getBase64
(){
this
.
post
({
action:
0
})
}
// 图片右转
_rotateRight
(){
this
.
post
({
action:
3
})
}
post
(
obj
){
this
.
webview
.
postMessage
(
JSON
.
stringify
(
obj
));
}
webviewload
(){
// alert('加载成功！')
this
.
webview
.
injectJavaScript
(
'init_canvas('
+
this
.
props
.
width
+
', '
+
this
.
props
.
height
+
');'
);
if
(
this
.
props
.
onLoad
){
this
.
props
.
onLoad
();
}
}
messageHandler
(
e
){
var
obj
=
JSON
.
parse
(
e
.
nativeEvent
.
data
);
if
(
obj
.
action
==
0
){
this
.
props
.
handleBase64
(
obj
.
data
);
}
}
render
() {
return
(
<
View
style
=
{
[
styles
.
container
, {
width:
this
.
state
.
width
,
height:
this
.
state
.
height
}]
}
>
<
WebView
style
=
{
{
width:
this
.
state
.
width
,
height:
this
.
state
.
height
,
backgroundColor:
"rgba(0,0,0,0)"
}
}
ref
=
{
(
w
)
=>
{
this
.
webview
=
w
}
}
onLoad
=
{this
.
webviewload
.
bind
(
this
)
}
source
=
{
{
html:
html
}
}
onMessage
=
{this
.
messageHandler
.
bind
(
this
)
}
javaScriptEnabled
=
{true}
domStorageEnabled
=
{false}
automaticallyAdjustContentInsets
=
{true}
scalesPageToFit
=
{false}
/>
{
/* this.webview.reload()}>
*/
}
View
>
);
}
}
const
styles
=
StyleSheet
.
create
({
container:
{
backgroundColor:
'rgba(0,0,0,0)'
,
}
});