3861634290999_.pic.jpg

import React, {Component} from 'react';
import {View, Text, PixelRatio} from 'react-native'
import Header from "../../app2/common/header";
import Util from "../../app2/common/util";
import Canvas, {Image as CanvasImage, ImageData} from "react-native-canvas";
const pixelRatio = PixelRatio.get();//设备dpi  不同设备可能有不同的 dpi, 当前手机的 dpi 为 3 ，即手机的像素单位

class NcFile extends Component {

    constructor(p) {
        super(p);
        this.state = {
            getDataStore: {
                width: this.props.route.params.imgInfo.width, //选择相册获取的图片像素宽度
                height: this.props.route.params.imgInfo.height,
                yMirror: false,
                xMirror: true,
                fileBase64: `data:image/jpeg;base64,${this.props.route.params.imgInfo.data}`,  //base64图片数据
                workSpeed: 3000,   // 雕刻速度
                intensity: 300,    // 激光头功率
            },
            deep:0
        }
    }


    componentDidMount() {
        this.handleCanvas()
    }


    handleCanvas(){
        //图片信息
        let imageInfo = this.state.getDataStore
        let fileBase64 = imageInfo.fileBase64
        let imgW = imageInfo.width/pixelRatio   //imageInfo.width是像素宽度，要在手机上显示需要除以手机像素单位
        let imgH = imageInfo.height/pixelRatio   //imageInfo.width是像素高度，要在手机上显示需要除以手机像素单位
        let yMirror = imageInfo.yMirror   //是否Y轴镜像
        let xMirror = imageInfo.xMirror   //是否X轴镜像
        console.log('pixelRatio===',pixelRatio)

        //画布
        let canvas = this.canvas
        canvas.width = Util.size.width - 30    // 即 Dimensions.get('window').width
        canvas.height = Util.size.width - 30
        let cxt = canvas.getContext('2d')
        cxt.fillStyle = '#FF7620';
        cxt.fillRect(0, 0, canvas.width,canvas.height);  //这是画布的大小 给画布填充颜色方便看到区域限制

        //图片放到画布上
        let img = new CanvasImage(canvas);   // 选择的是canvas这个画布画图
         img.width = imgW
         img.height = imgH
         img.src = fileBase64
         img.addEventListener('load',()=>{   //填充图片(原图)
            if(yMirror){
                cxt.scale(-1, 1)
                cxt.translate(-imgW, 0)
            }
            if(xMirror){
                cxt.scale(1, -1)
                cxt.translate(0, -imgH)
            }
            cxt.drawImage(
                img,
                0,
                0,
                imgW,
                imgH
            )

             //处理图片
             cxt.getImageData(0, 0, imgW*pixelRatio, imgH*pixelRatio).then(imageData => {  //这里为什么又  * pixelRatio 是因为图片的像素点就是这么多
                 const MyData = Object.values(imageData.data);
                 const length = Object.keys(MyData).length;
                 for (let i = 0; i < length; i += 4) {
                     let r,g,b,a,average;
                     r = MyData[i];
                     g = MyData[i + 1];
                     b = MyData[i + 2];
                     a = 255;
                     average = Math.floor((r + g + b) / 3);

                     MyData[i] = average    // 设置成灰色
                     MyData[i + 1] = average
                     MyData[i + 2] = average

                     // MyData[i] = r + 100
                     // MyData[i + 1] = g + 100
                     // MyData[i + 2] = b + 100

                 }
                 const myImgData = new ImageData(canvas, MyData, imgW*pixelRatio, imgH*pixelRatio);
                 cxt.putImageData(myImgData, 0, 0);
             })
        })


    }

    render() {

        return (
            <View style={{backgroundColor: '#fff', height: '100%'}}>
                <Header navigation={this.props.navigation} initObj={{title: '预览'}}/>
                <View style={{flex: 1,}}>
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <View style={{
                            width: Util.size.width - 30,
                            height: Util.size.width - 30,
                            borderWidth: 1,
                            borderColor: '#eee',
                            backgroundColor: '#ffc',
                            justifyContent: 'center',
                            alignItems: 'center',
                        }}>
                            <Canvas ref={(ref) => this.canvas = ref}/>
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}

export default NcFile;

以上仅做图片滤镜

将图片切成nc文件，上传到打印机

import React, {Component} from 'react';
import {View, Text, PixelRatio} from 'react-native'
import Header from "../../app2/common/header";
import Util from "../../app2/common/util";
import Canvas, {Image as CanvasImage, ImageData} from "react-native-canvas";
import MyGradientBtn from "../common/MyGradientBtn";
import {ceil, floor} from "react-native-reanimated";

const RNFS = require('react-native-fs');
const moment = require('moment');

const pixelRatio = PixelRatio.get();//设备dpi  不同设备可能有不同的 dpi, 当前手机的 dpi 为 3 ，即手机的像素单位

class NcFile extends Component {

    constructor(p) {
        super(p);
        this.state = {
            getDataStore: {
                width: this.props.route.params.imgInfo.width, //选择相册获取的图片像素宽度
                height: this.props.route.params.imgInfo.height,
                yMirror: false,
                xMirror: true,
                fileBase64: "data:image/jpeg;base64," + this.props.route.params.imgInfo.data,  //base64图片数据
                // workSpeed: 3000,   // 雕刻速度
                // intensity: 300,    // 激光头功率
            },
            deep: 0,

            imgNcData: ''
        }
    }


    componentDidMount() {
        let path = this.props.route.params.imgInfo.path
        // RNFS.readFile(path, 'base64')
        //     .then((content) => {
        //         // console.log('图片的base64数据===',content)
        //         // 得到的结果就可以 传给接口了 ，如果想要在网页上预览效果不要忘记格式转换
        //         // params.idImage = content;
        //
        //     })
        //     .catch((err) => {
        //         console.log("图片读取失败", err)
        //     });


        // this.VerticalSliceCanvas()
        this.HorizontalSliceCanvas()
    }


    VerticalSliceCanvas() {
        //图片信息
        let imageInfo = this.state.getDataStore
        let fileBase64 = imageInfo.fileBase64
        let imgW = imageInfo.width / pixelRatio   //imageInfo.width是像素宽度，要在手机上显示需要除以手机像素单位
        let imgH = imageInfo.height / pixelRatio   //imageInfo.width是像素高度，要在手机上显示需要除以手机像素单位
        let yMirror = imageInfo.yMirror   //是否Y轴镜像
        let xMirror = imageInfo.xMirror   //是否X轴镜像
        console.log('pixelRatio===', pixelRatio)

        //画布
        let canvas = this.canvas
        canvas.width = Util.size.width - 30
        canvas.height = Util.size.width - 30
        let cxt = canvas.getContext('2d')
        cxt.fillStyle = '#FF7620';
        cxt.fillRect(0, 0, canvas.width, canvas.height);  //这是画布的大小 给画布填充颜色方便看到区域限制

        //图片放到画布上
        let img = new CanvasImage(canvas);   // 选择的是canvas这个画布画图
        img.width = imgW
        img.height = imgH
        img.src = fileBase64
        img.addEventListener('load', () => {   //填充图片(原图)
            if (yMirror) {
                cxt.scale(-1, 1)
                cxt.translate(-imgW, 0)
            }
            if (xMirror) {
                cxt.scale(1, -1)
                cxt.translate(0, -imgH)
            }

            cxt.drawImage(
                img,
                0,
                0,
                imgW,
                imgH
            )

            //处理图片
            cxt.getImageData(0, 0, imgW * pixelRatio, imgH * pixelRatio).then(imageData => {  //这里为什么又  * pixelRatio 是因为图片的像素点就是这么多
                console.log('imageData1===', imageData)
                const MyData = Object.values(imageData.data);
                const length = Object.keys(MyData).length;
                for (let i = 0; i < length; i += 4) {
                    let r, g, b, a, average;
                    r = MyData[i];
                    g = MyData[i + 1];
                    b = MyData[i + 2];
                    a = 255;
                    average = Math.floor((r + g + b) / 3);
                    MyData[i] = average    // 设置成灰色
                    MyData[i + 1] = average
                    MyData[i + 2] = average
                }
                const myImgData = new ImageData(canvas, MyData, imgW * pixelRatio, imgH * pixelRatio);
                cxt.putImageData(myImgData, 0, 0);

                console.log('MyData===', MyData, MyData.length);  //MyData就是用来生成nc文件的图片数据
                let listAll = []
                let listX = []
                let listY = []
                let width = (imgW * pixelRatio).toFixed(0)
                let height = (imgH * pixelRatio).toFixed(0)
                for (let m = 0; m < MyData.length; m++) {
                    let item = []
                    item = [MyData[m], MyData[m + 1], MyData[m + 2], MyData[m + 3]]
                    listX.push(item)
                    if (listX.length == width) {
                        listY.push(listX)
                        listX = []
                    }

                    if (listY.length == height) {
                        listAll.push(listY)
                        console.log('listAll==', listAll)
                        listY = []
                    }
                    m += 3
                }


                var workSpeed = 2000 // 雕刻速度
                var intensity = 450 // 激光头功率
                var lineNum = 10
                var mMpixel = Math.round((1.0 / lineNum) * 1000) / 1000.0// 每行的高度
                var heads = intensity / 255
                var nowX = 0
                var xStr = ' X'
                var yStr = ' Y'

                console.log('listAll==', listAll)
                let data = 'G90 \nG0 X0 Y0 \nM3 S0 \nF' + workSpeed + ' \n'
                for (var i = 0; i < width; i++) {
                    var nowY = 0
                    var lastDeep = -1
                    var average = -1
                    var averagelist = []
                    nowX += mMpixel
                    nowX = Math.round(nowX * 1000) / 1000.0
                    var list = []
                    for (var j = 0; j < height; j++) {
                        var imgData = listAll[0][j][i]
                        var r = imgData[0]
                        var g = imgData[1]
                        var b = imgData[2]
                        var a = imgData[3]
                        var gray = (0.3 * r + 0.59 * g + 0.11 * b) * (a / 255)
                        if (lastDeep === -1) {
                            lastDeep = gray
                            nowY += mMpixel
                            nowY = Math.round(nowY * 1000) / 1000.0
                            if (j === (height - 1)) {
                                list.push([lastDeep, nowY])
                            }
                            // } else if (Math.abs(lastDeep - gray) > 5) {
                        } else if (lastDeep !== gray) {
                            list.push([lastDeep, nowY])
                            average = -1
                            averagelist = []
                            nowY += mMpixel
                            nowY = Math.round(nowY * 1000) / 1000.0
                            lastDeep = gray
                            if (j === (height - 1)) {
                                list.push([lastDeep, nowY])
                            }
                        } else {
                            averagelist.push(gray)
                            if (average === -1) {
                                average = gray
                            } else {
                                var total = 0
                                for (var z = 0; z < averagelist.length; z++) {
                                    total += averagelist[z]
                                }
                                average = total / averagelist.length - 1
                            }
                            // lastDeep = average
                            lastDeep = gray
                            nowY += mMpixel
                            nowY = Math.round(nowY * 1000) / 1000.0
                            if (j === (height - 1)) {
                                list.push([lastDeep, nowY])
                            }
                        }
                    }
                    if (list.length === 1 && lastDeep === 255) {
                        continue
                    } else {
                        var isEven = false
                        var nLastdeep = 255
                        if (i !== 0 && (i % 2) !== 0) {
                            // 奇数行
                            list.reverse() // 翻转数组
                        } else {
                            isEven = true
                        }
                        for (var n = 0; n < list.length; n++) {
                            var line = list[n]
                            if (isEven) {
                                if (n === 0 && line[0] === 255) {
                                    data += 'G0' + xStr + nowX + yStr + line[1] + ' S0 \n'
                                } else if (n === 0 && line[0] !== 255) {
                                    data += 'G0' + xStr + nowX + ' Y0' + ' S0 \n'
                                    var pvm0 = Math.round(heads * (255 - line[0]))
                                    data += 'G1' + xStr + nowX + yStr + line[1] + ' S' + pvm0 + '\n'
                                } else if (line[0] !== 255) {
                                    var pvm = Math.round(heads * (255 - line[0]))
                                    data += 'G1' + yStr + line[1] + ' S' + pvm + '\n'
                                } else if (line[0] === 255 && n !== list.length - 1) {
                                    data += 'G0' + yStr + line[1] + ' S0 \n'
                                }
                                if (n === list.length - 1 && line[0] !== 255) {
                                    data += 'G1' + yStr + line[1] + ' S' + Math.round(heads * (255 - line[0])) + '\n'
                                }
                            } else {
                                if (n === 0 && line[0] === 255) {
                                    for (var k = 0; k < list.length; k++) {
                                        var aa = list[k][0]
                                        if (aa !== 255) {
                                            data += 'G0 X' + nowX + ' Y' + list[k][1] + ' S0\n'
                                            nLastdeep = aa
                                            break
                                        }
                                    }
                                } else if (n === 0 && line[0] !== 255) {
                                    data += 'G0' + xStr + nowX + yStr + line[1] + ' S0 \n'
                                    nLastdeep = line[0]
                                } else if (nLastdeep === 255) {
                                    data += 'G0' + yStr + line[1] + ' S0 \n'
                                    nLastdeep = line[0]
                                } else if (n !== list.length - 1) {
                                    var pvms = Math.round(heads * (255 - nLastdeep))
                                    data += 'G1' + yStr + line[1] + ' S' + pvms + ' \n'
                                    nLastdeep = line[0]
                                }
                                if (n === list.length - 1 && nLastdeep !== 255) {
                                    // 倒数第二段
                                    data += 'G1 Y' + line[1] + ' S' + Math.round(heads * (255 - nLastdeep)) + '\n'
                                    nLastdeep = line[0]
                                    // 最后一段
                                    if (nLastdeep !== 255) {
                                        data += 'G1 Y0' + ' S' + Math.round(heads * (255 - nLastdeep)) + ' \n'
                                    }
                                }
                            }
                        }
                    }
                }

                data += 'M5 \nG90 \nG0 X0 Y0'
                this.setState({
                    imgNcData: data
                })

                // console.log('data====',data)
                console.log('RNFS.ExternalDirectoryPath=====>>>>', RNFS.ExternalDirectoryPath,)
                // console.log('RNFS.DocumentDirectoryPath===>>>',RNFS.DocumentDirectoryPath)

                global.fileName = `/福窝横向切割NC文件${moment().format("X")}.nc`
                global.filePath = RNFS.ExternalDirectoryPath + global.fileName;  // write the file

                RNFS.writeFile(global.filePath, data, 'utf8')   //android 11 的外部存储不能这么搞,本测试机是 Android 8.1.0 可以这么搞,高版本 RNFS.DocumentDirectoryPath
                    // ios RNFS.LibraryDirectoryPath
                    .then((success) => {                      //若只为测试可以用低版本android测试生成然后查看生成文件,高版本有权限限制
                        console.log('FILE WRITTEN!', success);
                    })
                    .catch((err) => {
                        console.log('文件写入失败==', err.message);
                    });

            })
        })

    }


    HorizontalSliceCanvas() {
        //图片信息
        let imageInfo = this.state.getDataStore
        let fileBase64 = imageInfo.fileBase64
        let imgW = imageInfo.width / pixelRatio   //imageInfo.width是像素宽度，要在手机上显示需要除以手机像素单位
        let imgH = imageInfo.height / pixelRatio   //imageInfo.width是像素高度，要在手机上显示需要除以手机像素单位
        let yMirror = imageInfo.yMirror   //是否Y轴镜像
        let xMirror = imageInfo.xMirror   //是否X轴镜像
        console.log('pixelRatio===', pixelRatio)

        //画布
        let canvas = this.canvas
        canvas.width = Util.size.width - 30
        canvas.height = Util.size.width - 30
        let cxt = canvas.getContext('2d')
        cxt.fillStyle = '#FF7620';
        cxt.fillRect(0, 0, canvas.width, canvas.height);  //这是画布的大小 给画布填充颜色方便看到区域限制

        let sign = this.limitArea(canvas.width, canvas.height, imgW, imgH)
        imgW = sign.imgW
        imgH = sign.imgH

        //图片放到画布上
        let img = new CanvasImage(canvas);   // 选择的是canvas这个画布画图
        img.width = imgW
        img.height = imgH
        img.src = fileBase64

        console.log('Util.size.width ====', Util.size.width)
        console.log('Util.size.height ====', Util.size.height)
        console.log('canvas.width ====', canvas.width)
        console.log('canvas.height ====', canvas.height)
        console.log('img.width ====', img.width)
        console.log('img.height ====', img.height)


        img.addEventListener('load', () => {   //填充图片(原图)
            if (yMirror) {
                cxt.scale(-1, 1)
                cxt.translate(-imgW, 0)
            }
            if (xMirror) {
                cxt.scale(1, -1)
                cxt.translate(0, -imgH)
            }

            cxt.drawImage(
                img,
                0,
                0,
                imgW,
                imgH
            )

            //处理图片
            cxt.getImageData(0, 0, imgW * pixelRatio, imgH * pixelRatio).then(imageData => {  //这里为什么又  * pixelRatio 是因为图片的像素点就是这么多
                console.log('imageData1===', imageData)
                const MyData = Object.values(imageData.data);
                const length = Object.keys(MyData).length;
                for (let i = 0; i < length; i += 4) {
                    let r, g, b, a, average;
                    r = MyData[i];
                    g = MyData[i + 1];
                    b = MyData[i + 2];
                    a = 255;
                    // average = Math.floor((r + g + b) / 3);
                    // MyData[i] = average    // 设置成灰色
                    // MyData[i + 1] = average
                    // MyData[i + 2] = average
                }
                const myImgData = new ImageData(canvas, MyData, imgW * pixelRatio, imgH * pixelRatio);
                cxt.putImageData(myImgData, 0, 0);

                // console.log('MyData===', MyData, MyData.length);  //MyData就是用来生成nc文件的图片数据
                let listAll = []
                let listX = []
                let listY = []
                let width = (imgW * pixelRatio).toFixed(0)
                let height = (imgH * pixelRatio).toFixed(0)
                for (let m = 0; m < MyData.length; m++) {
                    let item = []
                    item = [MyData[m], MyData[m + 1], MyData[m + 2], MyData[m + 3]]
                    listX.push(item)
                    if (listX.length == width) {
                        listY.push(listX)
                        listX = []
                    }

                    if (listY.length == height) {
                        listAll.push(listY)
                        console.log('listAll==', listAll)
                        listY = []
                    }
                    m += 3
                }


                var workSpeed = 2000 // 雕刻速度
                var intensity = 450 // 激光头功率
                var lineNum = 10
                var mMpixel = Math.round((1.0 / lineNum) * 1000) / 1000.0// 每行的高度
                var heads = intensity / 255
                var nowY = 0
                var xStr = ' X'
                var yStr = ' Y'

                console.log('listAll==', listAll)
                let data = 'G90 \nG0 X0 Y0 \nM3 S0 \nF' + workSpeed + ' \n'
                for (var i = 0; i < height; i++) {
                    var nowX = 0
                    var lastDeep = -1
                    var average = -1
                    var averagelist = []
                    nowY += mMpixel
                    nowY = Math.round(nowY * 1000) / 1000.0
                    var list = []
                    for (var j = 0; j < width; j++) {
                        var imgData = listAll[0][i][j]
                        var r = imgData[0]
                        var g = imgData[1]
                        var b = imgData[2]
                        var a = imgData[3]
                        var gray = (0.3 * r + 0.59 * g + 0.11 * b) * (a / 255)
                        if (lastDeep === -1) {
                            lastDeep = gray
                            nowX += mMpixel
                            nowX = Math.round(nowX * 1000) / 1000.0
                            if (j === width - 1) {
                                list.push([lastDeep, nowX])
                            }
                            // } else if (Math.abs(lastDeep - gray) > 5) {
                        } else if (lastDeep !== gray) {
                            list.push([lastDeep, nowX])
                            average = -1
                            averagelist = []
                            nowX += mMpixel
                            nowX = Math.round(nowX * 1000) / 1000.0
                            lastDeep = gray
                            if (j === width - 1) {
                                list.push([lastDeep, nowX])
                            }
                        } else {
                            averagelist.push(gray)
                            if (average === -1) {
                                average = gray
                            } else {
                                var total = 0
                                for (var z = 0; z < averagelist.length; z++) {
                                    total += averagelist[z]
                                }
                                average = total / averagelist.length - 1
                            }
                            // lastDeep = average
                            lastDeep = gray
                            nowX += mMpixel
                            nowX = Math.round(nowX * 1000) / 1000.0
                            if (j === width - 1) {
                                list.push([lastDeep, nowX])
                            }
                        }
                    }
                    if (list.length === 1 && lastDeep === 255) {
                        continue
                    } else {
                        var isEven = false
                        var nLastdeep = 255
                        if (i !== 0 && (i % 2) !== 0) {
                            // 奇数行
                            list.reverse() // 翻转数组
                        } else {
                            isEven = true
                        }
                        for (var n = 0; n < list.length; n++) {
                            var line = list[n]
                            if (isEven) {
                                if (n === 0 && line[0] === 255) {
                                    data += 'G0' + xStr + line[1] + yStr + nowY + ' S0 \n'
                                } else if (n === 0 && line[0] !== 255) {
                                    data += 'G0 X0' + yStr + nowY + ' S0 \n'
                                    data += 'G1 X' + line[1] + yStr + nowY + ' S' + Math.round(heads * (255 - line[0])) + ' \n'
                                } else if (line[0] !== 255) {
                                    data += 'G1 X' + line[1] + ' S' + Math.round(heads * (255 - line[0])) + ' \n'
                                } else if (line[0] === 255 && n !== list.length - 1) {
                                    data += 'G0 X' + line[1] + yStr + nowY + ' S0 \n'
                                }
                            } else {
                                if (n === 0 && line[0] === 255) {
                                    for (var kkk = 0; kkk < list.length; kkk++) {
                                        var aa = list[kkk][0]
                                        if (aa !== 255) {
                                            data += 'G0' + xStr + list[kkk][1] + yStr + nowY + ' S0 \n'
                                            nLastdeep = aa
                                            break
                                        }
                                    }
                                } else if (n === 0 && line[0] !== 255) {
                                    data += 'G0 X' + line[1] + yStr + nowY + ' S0 \n'
                                    nLastdeep = line[0]
                                } else if (nLastdeep === 255) {
                                    data += 'G0 X' + line[1] + yStr + nowY + ' S0 \n'
                                    nLastdeep = line[0]
                                } else if (n !== list.length - 1) {
                                    data += 'G1 X' + line[1] + ' S' + Math.round(heads * (255 - nLastdeep)) + ' \n'
                                    nLastdeep = line[0]
                                }
                                if (n === list.length - 1 && nLastdeep !== 255) {
                                    // 倒数第二段
                                    data += 'G1 X' + line[1] + ' S' + Math.round(heads * (255 - nLastdeep)) + ' \n'
                                    nLastdeep = line[0]
                                    // 最后一段
                                    if (nLastdeep !== 255) {
                                        data += 'G1 X0' + ' S' + Math.round(heads * (255 - nLastdeep)) + ' \n'
                                    }
                                }
                            }
                        }
                    }
                }

                data += 'M5 \nG90 \nG0 X0 Y0'
                // this.setState({
                //     imgNcData: data
                // })

                // console.log('data====',data)
                console.log('RNFS.ExternalDirectoryPath=====>>>>', RNFS.ExternalDirectoryPath,)
                // console.log('RNFS.DocumentDirectoryPath===>>>',RNFS.DocumentDirectoryPath)

                global.fileName = `/${moment().format("YYYYMMDDHHmmss")}.nc`
                global.filePath = RNFS.ExternalDirectoryPath + global.fileName;  // write the file

                RNFS.writeFile(global.filePath, data, 'utf8')   //android 11 的外部存储不能这么搞,本测试机是 Android 8.1.0 可以这么搞,高版本 RNFS.DocumentDirectoryPath
                    // ios RNFS.LibraryDirectoryPath    ExternalDirectoryPath Android 外部存储--文件可在目录 /Android/data/com.包名/files/......   里面查找
                    .then((success) => {                      //若只为测试可以用低版本android测试生成然后查看生成文件,高版本有权限限制
                        console.log('FILE WRITTEN!',success);
                    })
                    .catch((err) => {
                        console.log('文件写入失败==',err.message);
                    });

            })
        })
    }


    limitArea(canvasW, canvasH, imgW, imgH) {
        let w
        let h
        if (imgW > canvasW) {
            w = canvasW
            h = imgH * (canvasW / imgW)
        } else if (imgH > canvasH) {
            h = canvasH
            w = imgW * (canvasH / imgH)
        } else {
            w = imgW
            h = imgH
        }
        imgW = Math.floor(w)
        imgH = Math.floor(h)
        return {imgW, imgH}
    }

    nextStep() {
        this.props.navigation.push('F_ParamsSetting', {data: this.state.imgNcData})
    }

    render() {

        return (
            <View style={{backgroundColor: '#fff', height: '100%'}}>
                <Header navigation={this.props.navigation} initObj={{title: '预览'}}/>
                <View style={{flex: 1,}}>
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <View style={{
                            width: Util.size.width - 30,
                            height: Util.size.width - 30,
                            borderWidth: 1,
                            borderColor: '#eee',
                            backgroundColor: '#ffc',
                            justifyContent: 'center',
                            alignItems: 'center',
                        }}>
                            <Canvas ref={(ref) => this.canvas = ref}/>
                        </View>
                    </View>

                    <View style={{height: 233, paddingHorizontal: 15}}>
                        <Text>注：可以手动调整图案大小</Text>


                        <View style={{flexDirection: 'row'}}>
                            <View style={{flex: 1, alignItems: 'center'}}>
                                <MyGradientBtn
                                    style={{borderRadius: 999, height: 30, width: 90}}
                                    LinearGradientBgColor={['#F7BE1F', '#FF6E35']}
                                    onPress={() => {
                                        console.warn('确定')
                                    }}
                                >
                                    <Text style={{color: '#fff', fontSize: 12}}>重置图片</Text>
                                </MyGradientBtn>
                            </View>
                            <View style={{flex: 1, alignItems: 'center'}}>
                                <MyGradientBtn
                                    style={{borderRadius: 999, height: 30, width: 90}}
                                    // LinearGradientBgColor={['#5FB7FE','#4772FF']}
                                    onPress={() => this.nextStep()}
                                >
                                    <Text style={{color: '#fff', fontSize: 12}}>下一步</Text>
                                </MyGradientBtn>
                            </View>

                        </View>

                    </View>
                </View>
            </View>
        );
    }
}

export default NcFile;