上傳圖片時壓縮圖片 - 前端（canvas）做法
阿新 • • 發佈：2018-08-31
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）做法