音乐平台项目的几个问题总结(头像裁剪以及跨页面播放音乐)

Posted 2020-09-07

关于头像裁剪

1.上传图片的裁剪,并没有采用后端裁剪,而采用前端裁剪,基于cropbox进行了修改

编码使用一个隐藏的input框存放 存放到数据库

2.本来想在后端解析base64编码重新生成文件,后来发现并没有必要,如果图片不是很大直接保存字符串到数据库就行了,这样还可以少一些http请求,不过缺点是Ie6不支持date:url的解析

3.图片变成base64编码之后,保存在数据库的字符长度高达16W

个字符,后来想办法改成jpeg+中等保存之后,长度变成3W,可以接受

下面从代码说起 界面显示

如图所示，3个部分,一个用于显示图片 一个是按钮 右边的是图片裁剪之后的图，有3张 分别是180*180 128*128 64*64 就不多说了 

 

 1 <div class="imageBox">
 2 
 3     <div class="thumbBox"></div>
 4 
 5     <div class="spinner"  style="display: none"></div>
 6 
 7   </div>
 8 
 9   <div class="action"> 
10 
11     <div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
12 
13       <label for="upload-file">请先选择图片...</label>
14 
15       </a>
16 
17       <input type="file" class="" name="upload-file" id="upload-file" />
18 
19     </div>
20     
21         
22     <input type="button"  id="btnCrop" class="Btnsty_peyton" value="?">
23 
24     <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
25 
26     <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
27     
28     <input type="button"  class="Btnsty_peyton"  value="?" onclick="cancel_shield()">
29   </div>
30 
31   <div class="cropped"></div>
32 
33 </div>

 

 关于JS的

注意42行

swal("操作成功!", "图片上传喽!", "success"); 这是用了sweet-alert的弹窗效果,要注意引入sweet-alert的js文件
对用户上传上来的图片进行裁剪 然后转成Base64 字符串分别保存在56 58 60行的img src里
通过apepnd标签添加到

<div class="cropped"></div> 预留的这个DIV里 

40     $(‘#btnCrop‘).on(‘click‘, function(){
41 
42     swal("操作成功!", "图片上传喽!", "success");
43     $("#IconMessage").html("头像选择成功,再次点击更换头像");
44     var s=$("#haha1").attr("src");
45     $("#hideInput").val(s);
46     cancel_shield();
47     })
然后将这个SRC放到表单里的隐藏INPUT框里，提交到到后台传到数据库,数据里保存的是BASE64编码,对上传进行了一定的限制之后 一般字符串大小为3W~5W的样子 如图

直接用img的src 可以在浏览器解析出来

 1 $(window).load(function() {
 2     var options =
 3 
 4     {
 5 
 6         thumbBox: ‘.thumbBox‘,
 7 
 8         spinner: ‘.spinner‘,
 9 
10         imgSrc: ‘‘
11 
12     }
13 
14     var cropper = $(‘.imageBox‘).cropbox(options);
15 
16     var img="";
17 
18     $(‘#upload-file‘).on(‘change‘, function(){
19 
20         var reader = new FileReader();
21 
22         reader.onload = function(e) {
23 
24             options.imgSrc = e.target.result;
25 
26             cropper = $(‘.imageBox‘).cropbox(options);
27 
28             getImg();
29 
30         }
31 
32         reader.readAsDataURL(this.files[0]);
33 
34         this.files = [];
35 
36 //        getImg();
37 
38     })
39 
40     $(‘#btnCrop‘).on(‘click‘, function(){
41 
42     swal("操作成功!", "图片上传喽!", "success");
43     $("#IconMessage").html("头像选择成功,再次点击更换头像");
44     var s=$("#haha1").attr("src");
45     $("#hideInput").val(s);
46     cancel_shield();
47     })
48     
49 
50     function getImg(){
51 
52         img = cropper.getDataURL();
53 
54         $(‘.cropped‘).html(‘‘);
55 
56         $(‘.cropped‘).append(‘<img src="‘+img+‘" align="absmiddle"  style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>‘);
57 
58         $(‘.cropped‘).append(‘<img src="‘+img+‘" align="absmiddle"  id="haha1" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>‘);
59 
60         $(‘.cropped‘).append(‘<img src="‘+img+‘" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>‘);
61 
62         }
63 
64         
65 
66     $(".imageBox").on("mouseup",function(){
67 
68          getImg();
69 
70           });
71 
72 
73     $(‘#btnZoomIn‘).on(‘click‘, function(){
74 
75         cropper.zoomIn();
76 
77     })
78 
79     $(‘#btnZoomOut‘).on(‘click‘, function(){
80 
81         cropper.zoomOut();
82 
83     })
84 
85 });

 

跨音乐播放音乐（待定,有空写）