jquery頭像上傳剪裁插件cropper的前後臺demo

来源:https://www.cnblogs.com/l024/archive/2018/09/27/9714176.html
-Advertisement-
Play Games

因為一個項目要做一個頭像上傳的功能，因此選擇了使用jquery的頭像插件cropper，cropper是一款使用簡單且功能強大的圖片剪裁jQuery插件，但是在使用的時候，有一個很大的坑需要註意，那就是當上傳的文件不需要轉換成base64傳輸給後臺的時候，使用FormData對象非同步上傳的時候，需要 ...


因為一個項目要做一個頭像上傳的功能，因此選擇了使用jquery的頭像插件cropper，cropper是一款使用簡單且功能強大的圖片剪裁jQuery插件，但是在使用的時候，有一個很大的坑需要註意，那就是當上傳的文件不需要轉換成base64傳輸給後臺的時候，使用FormData對象非同步上傳的時候，需要加上兩個參數為false，此外還給除了兩種上傳頭像的方式，一種直接上傳到文件伺服器，類似<input type="file" name="file"> 還有一種是將圖片進行base64，在後臺解密轉換成圖片。

contentType: false,

processData: false,

1.不進行base64轉換直接上傳後臺

頁面顯示

<div class="up-img-cover" id="up-img-touch" >

    <img class="img-thumbnail" alt="點擊圖片上傳" src="img/hu.jpg" th:src="${user.avatar}"
         data-am-popover="{position:'left',content: '點擊上傳', trigger: 'hover focus'}" >
    <div style="background:#F8F8FF;width:180px;position:absolute;height:26px;top:100px;left:24px;z-index: 2;text-align: center;opacity:0.8;" >
        <span>修改頭像</span>
    </div>
</div>

此外附上代碼（這裡直接給出custom_up_img.js）的前端代碼:

$(document).ready(function(){
        $("#up-img-touch").click(function(){
                $("#doc-modal-1").modal({width:'600px'});
        });
});
$(function() {
    'use strict';
    // 初始化
    var $image = $('#image');
    $image.cropper({
        aspectRatio: '1',
        autoCropArea:0.8,
        preview: '.up-pre-after',
        
    });

    // 事件代理綁定事件
    $('.docs-buttons').on('click', '[data-method]', function() {
   
        var $this = $(this);
        var data = $this.data();
        var result = $image.cropper(data.method, data.option, data.secondOption);
        switch (data.method) {
            case 'getCroppedCanvas':
            if (result) {
                // 顯示 Modal
                $('#cropped-modal').modal().find('.am-modal-bd').html(result);
                $('#download').attr('href', result.toDataURL('image/jpeg'));
            }
            break;
        }
    });
    
    

    // 上傳圖片
    var $inputImage = $('#inputImage');
    var URL = window.URL || window.webkitURL;
    var blobURL;

    if (URL) {
        $inputImage.change(function () {
            var files = this.files;
            var file;

            if (files && files.length) {
               file = files[0];

               if (/^image\/\w+$/.test(file.type)) {
                    blobURL = URL.createObjectURL(file);
                    $image.one('built.cropper', function () {
                        // Revoke when load complete
                       URL.revokeObjectURL(blobURL);
                    }).cropper('reset').cropper('replace', blobURL);
                    $inputImage.val('');
                } else {
                    window.alert('請選擇圖片！！！');
                }
            }

            // Amazi UI 上傳文件顯示代碼
            var fileNames = '';
            $.each(this.files, function() {
                fileNames += '<span class="am-badge">' + this.name + '</span> ';
            });
            $('#file-list').html(fileNames);
        });
    } else {
        $inputImage.prop('disabled', true).parent().addClass('disabled');
    }
    
    //綁定上傳事件
    $('#up-btn-ok').on('click',function(){
       var $modal = $('#my-modal-loading');
       var $modal_alert = $('#my-alert');
       var img_src=$image.attr("src");
       if(img_src==""){
          set_alert_info("沒有選擇上傳的圖片");
          $modal_alert.modal();
          return false;
       }
       
       $modal.modal();
        $("#image").cropper('getCroppedCanvas').toBlob(function(blob){
            var formData = new FormData();  //這裡創建FormData()對象
            formData.append('file', blob);  //給表單對象中添加一個name為file的文件  blod是這個插件選擇文件後返回的文件對象
            console.log(blob);
            $.ajax({
                url:"http://localhost:8081/file/upload",  //這裡我上傳的是我自己開源的一個文件伺服器  github地址:https://github.com/Admin1024Admin/FileServer.git
                type: "POST",
                data: formData,
                contentType: false,  //這裡需要註意
                processData: false,
                success: function(data, textStatus){
                    $modal.modal('close');
                    set_alert_info(data.result);
                    $modal_alert.modal();
                    if(data.result=="ok"){
                        $("#up-img-touch img").attr("src",data.file);
                        var img_name=data.file.split('/')[2];
                        console.log(img_name);
                        alert("ok");
                        //非同步更新頭像地址
                        $.ajax({
                            url:"/space/"+url+"/updataAvatar",
                            type:"post",
                            data:{"imgUrl":data.file},
                            success:function (data) {
                                if(data=="ok"){
                                    window.location.reload();
                                }
                            },
                            error:function () {
                                alert("更新失敗");
                            }
                        })
                        window.location.reload();
                    }
                },
                error: function(){
                    $modal.modal('close');
                    set_alert_info("上傳頭像失敗了！");
                    $modal_alert.modal();
                    //console.log('Upload error');
                }
            });
        })
    });
    
});

function rotateimgright() {
$("#image").cropper('rotate', 90);
}


function rotateimgleft() {
$("#image").cropper('rotate', -90);
}

function set_alert_info(content){
   $("#alert_content").html(content);
}

後臺代碼:基於springboot

/**
 * 博客頭像上傳
 * @param file
 * @return
 */
@PostMapping("/file/upload")
@ResponseBody
public Map<String,Object> handleFileUpload(@RequestParam("file") MultipartFile file) {
    File returnFile = null;
    Map<String,Object> map = new HashMap<String,Object>();
    try {
       File f = new File(file.getOriginalFilename(),  file.getContentType(), file.getSize(),file.getBytes());  //需要註意，這裡的File對象是我自定義的模型類。並非java.io.File對象
       f.setMd5( MD5Util.getMD5(file.getInputStream()) );
       returnFile = fileService.saveFile(f);
       returnFile.setPath("http://localhost:8080/file/view/"+f.getId());
       returnFile.setContent(null) ;
        map.put("result","ok");
        map.put("file","http://localhost:8081/file/view/"+f.getId());
        return map;

    } catch (IOException | NoSuchAlgorithmException ex) {
        ex.printStackTrace();
        map.put("result","no");
        map.put("message",ex.getMessage());
        return map;
    }
}

2.轉換成base64後傳給後臺，在後臺解碼保存圖片

前端代碼:

$(document).ready(function(){
        $("#up-img-touch").click(function(){
                $("#doc-modal-1").modal({width:'600px'});
        });
});
$(function() {
    'use strict';
    // 初始化
    var $image = $('#image');
    $image.cropper({
        aspectRatio: '1',
        autoCropArea:0.8,
        preview: '.up-pre-after',
        
    });

    // 事件代理綁定事件
    $('.docs-buttons').on('click', '[data-method]', function() {
   
        var $this = $(this);
        var data = $this.data();
        var result = $image.cropper(data.method, data.option, data.secondOption);
        switch (data.method) {
            case 'getCroppedCanvas':
            if (result) {
                // 顯示 Modal
                $('#cropped-modal').modal().find('.am-modal-bd').html(result);
                $('#download').attr('href', result.toDataURL('image/jpeg'));
            }
            break;
        }
    });
    
    

    // 上傳圖片
    var $inputImage = $('#inputImage');
    var URL = window.URL || window.webkitURL;
    var blobURL;

    if (URL) {
        $inputImage.change(function () {
            var files = this.files;
            var file;

            if (files && files.length) {
               file = files[0];

               if (/^image\/\w+$/.test(file.type)) {
                    blobURL = URL.createObjectURL(file);
                    $image.one('built.cropper', function () {
                        // Revoke when load complete
                       URL.revokeObjectURL(blobURL);
                    }).cropper('reset').cropper('replace', blobURL);
                    $inputImage.val('');
                } else {
                    window.alert('請選擇圖片！！！');
                }
            }

            // Amazi UI 上傳文件顯示代碼
            var fileNames = '';
            $.each(this.files, function() {
                fileNames += '<span class="am-badge">' + this.name + '</span> ';
            });
            $('#file-list').html(fileNames);
        });
    } else {
        $inputImage.prop('disabled', true).parent().addClass('disabled');
    }
    
    //綁定上傳事件
    $('#up-btn-ok').on('click',function(){
       var $modal = $('#my-modal-loading');
       var $modal_alert = $('#my-alert');
       var img_src=$image.attr("src");
       if(img_src==""){
          set_alert_info("沒有選擇上傳的圖片");
          $modal_alert.modal();
          return false;
       }
       
       $modal.modal();       
       var url=$(this).attr("imgurl");
       var canvas=$("#image").cropper('getCroppedCanvas'); //獲取到圖片轉換成的canvas對象
       var data=canvas.toDataURL(); //將圖片轉成base64
            $.ajax({
                url:"http://localhost:8081/file/upload",
                type: "POST",
                data: {"img":data.toString},  //這裡傳遞參數給後臺
                success: function(data, textStatus){
                    $modal.modal('close');
                    set_alert_info(data.result);
                    $modal_alert.modal();
                    if(data.result=="ok"){
                        $("#up-img-touch img").attr("src",data.file);
                        var img_name=data.file.split('/')[2];
                        console.log(img_name);
                        alert("ok");                    
                        window.location.reload();
                    }
                },
                error: function(){
                    $modal.modal('close');
                    set_alert_info("上傳頭像失敗了！");
                    $modal_alert.modal();
                    //console.log('Upload error');
                }
            });

    });
    
});

function rotateimgright() {
$("#image").cropper('rotate', 90);
}


function rotateimgleft() {
$("#image").cropper('rotate', -90);
}

function set_alert_info(content){
   $("#alert_content").html(content);
}

後臺base64解碼代碼:

/**
 * 頭像上傳
 */
@PostMapping("/{username}/avatar")
@ResponseBody
public Map<String,Object> uploadAvatar(@RequestParam("image")String image){
    String imgBase64 = image.replace("data:image/png;base64,","");
    boolean b = GenerateImage(imgBase64);
    System.out.println("保存成功---->"+b);
    Map<String,Object> map = new HashMap<String,Object>();
    map.put("result","ok");
    map.put("file","圖片路徑");
   return map;
}
//base64字元串轉化成圖片   
 public boolean GenerateImage(String imgStr){
 //對位元組數組字元串進行Base64解碼並生成圖片       
     if (imgStr == null) { //圖像數據為空           
         return false;
     }
     try{
         BASE64Decoder decoder = new BASE64Decoder();
        // Base64解碼           
         byte[] b = decoder.decodeBuffer(imgStr);
         for(int i=0;i<b.length;++i)
         {
            if(b[i]<0){//調整異常數據                   
                b[i]+=256;
            }
         }
         //生成jpeg圖片           
         String imgFilePath = "D:\\images\\new.jpg";//新生成的圖片           
         OutputStream out = new FileOutputStream(imgFilePath);
         out.write(b);
         out.flush();
         out.close();
         return true;
     }
     catch (Exception e){
        return false;
     }
 }

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • javascript列印1-100內的質數
    ...
  • HTTP的Referrer和Referrer Policy設置
    Referrer referrer是HTTP請求header的報文頭，用於指明當前流量的來源參考頁面。通過這個信息，我們可以知道訪客是怎麼來到當前頁面的。這對於Web Analytics非常重要，可以用於分析不同渠道流量分佈、用戶搜索的關鍵詞等。 但是，這個欄位同時會造成用戶敏感信息泄漏（如：帶有敏 ...
  • react系列（三）組件間通信
    組件間通信 React的基本組件元素是一個個組件，組件之間可能存在關聯、組合等關係。不同的組件之間，經常會發生數據傳遞或者交換，我們稱之為組件間通信。 根據傳遞的複雜程度，可以分為三種情況： 父子間通信，兄弟間通信，同其他外部庫通信。 父子間通信 在學習組件的時候，props是輸入，組件是輸出。在這 ...
  • js函數式編程(三)-compose和pointFree
    compose即函數嵌套組合 組合compose在第一篇已經初見端倪，可以感受一下。compose函數的實現用閉包的方法。不完善實現如下： const compose = (f, g) = { return x = f(g(x)); }; compose使用實例 你可以用ramda的compose函 ...
  • JavaScript switch語句
    JavaScriptswitch語句 switch語句用於基於不同的條件來執行不同的動作。 JavaScript switch 語句 使用switch語句可以進行多項選擇。 語法： switch( 變數1 ){ case 變數2: //語句1; break; case 變數3: //語句2; bre ...
  • CSS的再深入2（更新中···）
    在上一章中，我們又引出了一個知識點： margin的問題 margin：0 auto；（上下為0，左右自適應）會解決元素的居中問題（auto 自適應） 同時，我們又要學習新的知識： CSS的兩個性質和一個標準 1.繼承性：後代會繼承父系的一些屬性（fon、color、text、line），這種現象叫 ...
  • JavaScript初識(三)
    十三丶JS中的面向對象 創建對象的幾種常用方式: 1.使用Object或對象字面量創建對象 2.工廠模式創建對象 3.構造函數模式創建對象 4.原型模式創建對象 下麵我們詳細看一下如何創建對象 1.使用Object或對象字面量創建對象 JS中最基本創建對象的方式: 字面量方式創建對象: 2.工廠模式 ...
  • ant-design form
    表單配置 示例代碼 FormItem const FormItem = Form.Item; 封裝過的表單域 ` 支持label屬性 通過getFieldDecorator返回封裝好的表單域 getFieldDecorator(id,options) id唯一， options.initialVal ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類