<?php $this->layout('head'); ?>

<?php $this->layout('sidebar'); ?>

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

        <style type="text/css">

            #preview {

                display: inline-block;

                width: 24.56rem;

                height: 24.56rem;

                position: relative;

                background-image: url(img/iconfont-tianjia.png);

                background-repeat: no-repeat;

                background-size:cover ;

            }

            #file {

                /*width: 100%;*/

                height: 100%;

                /*opacity: 0;*/

                position: absolute;

                left: 0;

                top: 0;

                cursor: pointer;

                z-index: 5;

            }

        </style>

<!-- Content Wrapper. Contains page content -->

<div class="content-wrapper">

  <!-- Content Header (Page header) -->

  <section class="content-header">

  </section>

  <div class="col-md-12">

    <div class="box">

      <div class="box-header with-border">

        <h3 class="box-title">商品图库</h3>

      </div>

    <!-- 第一种 -->

    <input type="file" accept="image/*" name="picture"  id="file" value="点击" />

    <div id="preview"></div>

    <!-- 第二种 -->

    <input type="file" id="tesImg" onchange="tes(this)" />

    <img      id="tesId">

    <img      id="tesId1">

    <img      id="tesId2">

      <!-- /.box-header -->

      <div class="box-body" style="font-size: 1.3rem">

      </div><!-- /.box-body -->

      <div class="box-footer clearfix ">

      </div>

    </div><!-- /.box -->

  </div>

  <div class=" clearfix "></div>

</div>

<?php $this->layout('footer'); ?>

<!-- 第一种 -->

<script type="text/javascript">

    var eleFile = document.querySelector('#file');

    var preview = document.querySelector('#preview');

    // 压缩图片需要的一些元素和对象

    var reader = new FileReader(),

    //创建一个img对象

        img = new Image();

    // 选择的文件对象

    var file = null;

    // 缩放图片需要的canvas

    var canvas = document.createElement('canvas');

    var context = canvas.getContext('2d');

    // base64地址图片加载完毕后

    img.onload = function() {

        // 图片原始尺寸

        var originWidth = this.width;

        var originHeight = this.height;

        // 最大尺寸限制，可通过设置宽高来实现图片压缩程度

        var maxWidth = 800,

            maxHeight = 800

        // 目标尺寸

        var targetWidth = originWidth,

            targetHeight = originHeight;

        // 图片尺寸超过400x400的限制

        if(originWidth > maxWidth || originHeight > maxHeight) {

            if(originWidth / originHeight > maxWidth / maxHeight) {

                // 更宽，按照宽度限定尺寸

                targetWidth = maxWidth;

                targetHeight = Math.round(maxWidth * (originHeight / originWidth));

            } else {

                targetHeight = maxHeight;

                targetWidth = Math.round(maxHeight * (originWidth / originHeight));

            }

        }

        // canvas对图片进行缩放

        canvas.width = targetWidth;

        canvas.height = targetHeight;

        // 清除画布

        context.clearRect(0, 0, targetWidth, targetHeight);

        // 图片压缩

        context.drawImage(img, 0, 0, targetWidth, targetHeight);

        /*第一个参数是创建的img对象；第二个参数是左上角坐标，后面两个是画布区域宽高*/

        //压缩后的图片base64 url

        /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/jpeg';

         * qualityArgument表示导出的图片质量，只要导出为jpg和webp格式的时候此参数才有效果，默认值是0.92*/

        var newUrl = canvas.toDataURL('image/jpeg', 0.8);//base64 格式

        $.post(

            '/business/test_canvas'

            ,{img:newUrl}

            ,function(data){

                console.log(data);

            }

        );

        // console.log(canvas.toDataURL('image/jpeg', 0.92));return;

　　　　 preview.style.backgroundImage='url(' + newUrl + ')';

    };

    // 文件base64化，以便获知图片原始尺寸

    reader.onload = function(e) {

        img.src = e.target.result;

    };

    eleFile.addEventListener('change', function(event) {

        file = event.target.files[0];

        // 选择的文件是图片

        if(file.type.indexOf("image") == 0) {

            reader.readAsDataURL(file);

        }

    });

</script>

<!-- 第二种 -->

<script>

    /*

    var imgOb=new Image();

    var imgDom=$("#tesId");

    imgOb是图片对象，而imgDom是dom对象；

    imgDom[0]是图片对象，与imgOb一样。

    要想获取图片对象的宽与高

    必须等图片对象加载后才能获取

    imgOb.onload=function(e){

        alert(imgOb.width);

     alert(imgOb.width);

    }

   */

    function tes(ob){

        var file=ob.files[0];

        var reader=new FileReader();

        reader.readAsDataURL(file);

        reader.onload=function(e){

            var imgObj=new Image();

            imgObj.src=this.result;

            imgObj.onload=function(a){

                var canvas = document.createElement('canvas');

                canvas.width = 100;

                canvas.height = 100;

                var ctx = canvas.getContext("2d");

                ctx.drawImage(imgObj, 0, 0, 100, 100);

                $("#tesId").attr('src',canvas.toDataURL("image/jpeg", 0.9));

                canvas.width = 800;

                canvas.height = 800;

                ctx.drawImage(imgObj, 0, 0, 800, 800);

                var img = canvas.toDataURL("image/jpg", 0.1);

                $("#tesId1").attr('src',canvas.toDataURL("image/jpg", 0.1));

                $.post(

                    '/business/test_canvas'

                    ,{img: img}

                    ,function(data){

                    }

                );

                canvas.width = 300;

                canvas.height = 100;

                ctx.drawImage(imgObj, 0, 0, 300, 100);

                $("#tesId2").attr('src',canvas.toDataURL("image/jpeg", 0.6));

            }

        }

    }

</script>

    // 测试canvas

    public function test_canvas()

    {

        if($_POST){

            // echo new BasicReturn(true, 0, '', $_POST);

            $img = $_POST['img'];

            $abs_path = \sdk\config\Config::getUpPath()['upload'];

            $goods_path = "goods/" . date("Y/m/d/");  //图片上传路径

            if (!file_exists($abs_path . $goods_path))

                mkdir($abs_path . $goods_path, 0777, 1);

            $file_name = microtime(true) * 10000;

            $imgPath = $goods_path . $file_name;

            // 保存图片

            $type = $this->save_img_real($abs_path . $imgPath,$img);

        }

        $this->view('test_canvas');

    }

    private function save_img_real($path, $base64_image_content)

    {

        //匹配出图片的格式

        if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)) {

            $type = $result[2];

            if ($type == 'jpeg') {

                $type = 'jpg';

            }

            if ($type == 'jpg' || $type == 'gif' || $type == 'png') {

                if (file_put_contents($path . '.' . $type, base64_decode(str_replace($result[1], '', $base64_image_content)))) {

                    return $type;

                } else {

                    return false;

                }

            } else {

                return false;

            }

        } elseif (preg_match('/^(data:;base64,)/', $base64_image_content, $result)) {

            $img_data = base64_decode(str_replace($result[1], '', $base64_image_content));

            $types = $this->check_image_type($img_data);

            if ($types) {

                if (file_put_contents($path . '.' . $types, $img_data)) {

                    return $types;

                } else {

                    return false;

                }

            } else {

                return false;

            }

        }

    }

    private function check_image_type($image)

    {

        $bits = array(

            'jpg' => "\xFF\xD8\xFF",

            'gif' => "GIF",

            'png' => "\x89\x50\x4e\x47\x0d\x0a\x1a\x0a",

        );

        foreach ($bits as $type => $bit) {

            if (substr($image, 0, strlen($bit)) === $bit) {

                return $type;

            }

        }

        return false;

    }