1. 程式人生 > >上傳圖片時壓縮圖片 - 前端(canvas)做法

上傳圖片時壓縮圖片 - 前端(canvas)做法

als ase java use reac ice efi 壓縮圖片 basic

HTML前端代碼:

<?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>

PHP後端接收前端 ajax方法傳來base64格式圖片保存:

    // 測試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;
    }

需要註意的是:圖片寬高 250 x 250 太小會失真,我這裏就設置成 800 x 800

上傳圖片時壓縮圖片 - 前端(canvas)做法