请教PHP输入框的文本传值。

籹汉子一枚 2016-11-07 09:27:57

小白一个，请教各位帮帮忙解决一下，现在遇到的问题如下；

最近在网上找了个头像裁剪的插件，现在呢我想在页面上增加2个输入框。

主要问题是，输入框是加上去了，可是不懂的怎么才能把输入的文字传值到合成图片的页面。弄了好多次都没能实现。

这是前端的图片上传和文字输入页面。

这是图片合成后的页面。我想让输入的文字都显示在同一张背景图上。

各位高手能否告诉我怎么弄，或者帮忙修改一下代码。

下面是源代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>测试- 页面</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <link rel="stylesheet" href="css/base.min.css"/>

    <link rel="stylesheet" href="css/style.css"/>	



</head>

<body>

<div id="loading"></div>

<div class="body">

<!-- Wrap the image or canvas with a block element -->

<div id="imgBox">

    <div class="container"><img src="tx.jpg"></div>

	

    <div class="f-mt15 f-tac"  >

		<br><input type="text" id="name" value="请输入前4位数字"/><br>

		

		<br><input type="text" id="name1" value="请输入后4位数字"/><br>

		

        <button class="u-btn u-btn-c2 u-btn-lg f-pr">上传头像<input id="inputImage" type="file" capture="camera" /></button>

        <button class="imgBox-save u-btn u-btn-lg u-btn-c3" >确定提交</button>

    </div>



        <input type="text" style="width:50px; display: none" id="liangdu" value="30" placeholder="亮度值0-100"/>



</div>

<!--图片合成-->

<canvas id="layer"></canvas>

<div id="mask">

    <div id="mask-layer">

        <div id="mask-layer-con">

            <a href="javascript:;" id="close">X</a>

            <div id="show"><img src="712.gif" class="lode"/></div>

        </div>

    </div>

</div></div>

<link rel="stylesheet" href="cropper/cropper.min.css"/>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script src="cropper/cropper.min.js"></script>

<script>

    var imgBox= $('.container > img');

    imgBox.on({

        'built.cropper': function (e) {

            $('#loading').hide();

            $('.body').css('visibility','visible');

            imgBox.cropper('reset')

        }

    }).cropper({

        aspectRatio: 150 / 150,/

        data: {

            width: 150,

            height: 150,

        },

        autoCropArea: 0.65,

        strict: false,

        guides: false,

        highlight: false,

        responsive:true,

        dragCrop: false,

        cropBoxMovable: false,

        cropBoxResizable: false,

        preview: '.img-preview',

        crop: function(data) {

            // Output the result data for cropping image.

            // hcPic(imgBox.cropper('getCroppedCanvas'));



        }

    });

    //上传图片

    var $inputImage = $('#inputImage');

    $inputImage.change(function () {

        lrz(this.files[0], {done:function (results) {

            file=results.base64;

            imgBox.cropper('reset').cropper('replace',file);

            $inputImage.val('');

        }});

    });



</script>

<script>

    (function($) {

        $.fn.openMask = function(){ 

            $('#open').click(function() {

                $('#mask').show();

            });

        };

        $.fn.closeMask=function(){ 

            $('#close').click(function() {

                $('#mask').hide();

                $('#show').html('<img src="712.gif" class="lode"/>');

            });

        };

        $.fn.maskLocation=function(){  //调整遮罩层位置

            var mHeight=$(document).height();//获取页面高度

            var mWidth=$(document).width();  //获取页面宽度

            var sHeight=$(window).height();  //获取可视区域高度

            var dHeight=$('#mask-layer-con').height(); 

            var dWidth=$('#mask-layer-con').width();  

            $('#mask').height(mHeight);

            // 使遮罩层居中

            $('#mask-layer').css('left',function(){

                var Left=(mWidth-dWidth)/2+'px'

                return Left;

            });

            $('#mask-layer').css('top',function(){

                var Top=(sHeight-dHeight)/2+'px'

                return Top;

            });

        };



    })(jQuery);



    $('#close').closeMask();

    $('.imgBox-save').click(function(){

        $('#mask').show();

        hcPic(imgBox.cropper('getCroppedCanvas'));

    });

    var brightness = function (pixels, delta) {



        var d = pixels.data;



        for (var i = 0; i < d.length; i += 4) {

            d[i] += delta;     // red

            d[i + 1] += delta; // green

            d[i + 2] += delta; // blue

        }



        return pixels;



    };

    new Image().src="bg.png";//加载背景图片

    function hcPic(pic){//合成图片

        var pctx = pic.getContext('2d');

        var imageData = pctx.getImageData(0, 0, pic.width, pic.height);

        brightness(imageData,parseInt($('#liangdu').val()));

        pctx.putImageData(imageData, 0, 0);



        var c=document.getElementById('layer');

        var ctx=c.getContext('2d');

        c.width=640;

        c.height=896;

        ctx.rect(0,0,c.width,c.height);

        ctx.fillStyle='';

        ctx.fill();



        var bg=new Image;/* 获取背景图 */

        bg.src='bj.jpg';			

        bg.onload=function() {

            ctx.drawImage(bg, 0, 0, 640, 896);/* 背景层位置以及尺寸 */

            ctx.drawImage(pic,250,50,150,150);/* 上传的图片 */

            var imgData=c.toDataURL('image/jpeg');

            console.log(imgData);

            $('#show').html('<img src="'+imgData+'" />');

        };



    };

</script>



</body>

</html>