上传图片时压缩图片 - 前端（canvas）做法

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