演示webuploader和cropperjs圖片裁剪上傳

来源:https://www.cnblogs.com/xiaoyangjia/archive/2022/03/29/15677347.html
-Advertisement-
Play Games

最近有個項目要在瀏覽器端裁剪並上傳圖片。由於缺乏人力，只能我上陣殺敵。通過參考各種文章，最後決定用croopperjs進行圖片裁剪，用webuploader上傳文件。本文涉及到的知識至少有Java基礎、SpringMVC、thymeleaf模版引擎、JS基礎、JQuery基礎、Bootstrap組件... ...


最近有個項目要在瀏覽器端裁剪並上傳圖片。由於缺乏人力，只能我上陣殺敵。通過參考各種文章，最後決定用cropperjs進行圖片裁剪，用webuploader上傳文件。本文涉及到的知識至少有Java基礎、SpringMVC、thymeleaf模版引擎、JS基礎、JQuery基礎、Bootstrap組件，但是文章重點只是cropperjs和webuploader的組合運用，其他的都是輔助。

1. 依賴JS庫

webuploader官網
cropperjs演示主頁
cropperjs開源主頁

2. 核心流程

  • 2.1 選擇文件按鈕

previewImg用於預覽上傳後的圖片；picker用於選擇圖片，webuploader會自動給picker賦予選擇文件的特性。fileInput用於接收文件數據。

<div class="form-group"> 
   <img id="previewImg" width="200px" /> 
   <div> 
    <a href="javascript:void(0)" id="picker">選擇圖片</a> 
    <input type="file" id="fileInput" style="display: none" /> 
   </div> 
  </div>

下麵代碼給fileInput組件觸發了點擊事件

    $("#picker").on('click', function () {
        $("#fileInput").trigger("click");
    });
  • 2.2 定義組件參數和事件

以下代碼定義上傳組件對象

    var uploader = WebUploader.create({
        auto: true,// 選完文件後，是否自動上傳。
        server: '/upload',
        fileSingleSizeLimit: 2 * 1024 * 1024,
        duplicate: true,
        accept: {// 只允許選擇圖片文件。
            title: 'Images',
            extensions: 'jpg,jpeg,png',
            mimeTypes: 'image/jpg,image/jpeg,image/png'
        },
        //如果有表單數據要上傳，可以給formData賦值
        formData: {
            id: 0
        }
    });

以下代碼定義上傳組件事件。WebUploader組件不提供UI，如果需要定製界面，實現下麵的方法即可。

    //提交額外的表單數據
    uploader.on('uploadBeforeSend', function (object, data, header) {
        data.id = $('#id').val();
    });

    // 當有文件被添加進隊列的時候
    uploader.on('fileQueued', function (file) {
        $('#file_list').append('<div id="' + file.id + '" class="item">' +
            '<h4 class="info">' + file.name + '</h4>' +
            '<p class="state">等待上傳...</p>' +
            '</div>');
    });

    // 上傳成功
    uploader.on('uploadSuccess', function (file, response) {
        $('#' + file.id).find('p.state').text('已上傳');
        console.log(response._raw);
        var object = $.parseJSON(response._raw);
        //給預覽組件賦值
        $('#previewImg').attr("src", object.url);
    });

    // 上傳發生錯誤
    uploader.on('uploadError', function (file) {
        $('#' + file.id).find('p.state').text('上傳出錯');
    });

    // 上傳中
    uploader.on('startUpload', function (file, rs) {
        console.log("文件正在上傳中，請稍候");
    });
  • 2.3 定義裁剪組件參數和事件

以下代碼定義裁剪圖片的對話框，cropperImage是上傳後的圖片，被裁剪的目標對象。

<div class="modal" id="cropperImageModal" tabindex="-1" role="dialog" aria-labelledby="cropperImageModal"
     aria-hidden="true">
    <div class="modal-dialog" style="width: 50%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">裁剪圖片</h4>
            </div>
            <div class="modal-body">
                <!-- cropperImage是上傳後的圖片，被裁剪的目標對象 -->
                <img src="" id="cropperImage" style="max-width: 100%"/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="modalClose">關閉</button>
                <button type="button" class="btn btn-primary" id="modalSubmit">保存</button>
            </div>
        </div>
    </div>
</div>

以下代碼定義圖片裁剪參數，更多參數參考cropper.js的API詳解。如果不需要固定裁剪區域大小，刪除ready函數即可。

    var cropperImage = $("#cropperImage");
    var cropperOptions = {
        viewMode: 1,
        dragMode: 'none',
        aspectRatio: 1,
        background: false,
        autoCropArea: 0.6,
        crop: function (event) {
            //裁剪的實時事件
            console.log(event.detail.width);
            console.log(event.detail.height);
        },
        ready: function () {
            //限定裁剪區域大小為500
            cropperImage.cropper('crop');
            cropperImage.cropper('setData', {
                width: 500,
                height: 500
            })
        }
    };
  • 2.5 觸發裁剪和上傳事件

fileInput組件的change事件會採用FileReader對象獲得上傳的Image，初始化cropperjs裁剪方法。

    $("#fileInput").on('change', function () {
        var file = this.files[0];
        //定義讀文件對象
        var reader = new FileReader();
        reader.onload = function () {
            imageOnload(reader.result);

        };
        reader.readAsDataURL(file);//File對象轉換為dataURL
    });

    //圖片對象載入方法
    function imageOnload(url) {
        var cropperImg = new Image();
        cropperImg.src = url;
        //destroy方法是為了重入不出錯
        cropperImage.cropper('destroy').attr('src', url).cropper(cropperOptions);
        cropperImg.onload = function () {
            //彈窗裁剪
            $('#cropperImageModal').modal();
            $("#modalClose").on('click', function () {
                $("#fileInput").val('');
                $('#cropperImageModal').modal('hide');
            });

            $("#modalSubmit").on('click', function () {
                var canVas = $("#cropperImage").cropper("getCroppedCanvas", {});//獲取裁剪後得到的canvas數據
                var file = convertBase64UrlToBlob(canVas.toDataURL('image/jpeg', '0.0'));//將canvas轉換為Blob格式
                uploader.addFiles(file);//將裁剪後的圖片添加進webuploader上傳到後臺
                $('#cropperImageModal').modal('hide');
                $("#fileInput").val('');
            });
        };
    }

採用cropperImage.cropper('getCroppedCanvas').toblob(function(blob){})也可以獲取圖片二進位對象，但是預設是png格式，體積很大，不利於網路傳輸，採用下麵的方法可以指定圖片格式。

    /**
     * base64轉為blob，圖片為jpeg格式
     */
    function convertBase64UrlToBlob(urlData) {
        //去掉url的頭，並轉換為byte
        var bytes = window.atob(urlData.split(',')[1]);
        //處理異常,將ascii碼小於0的轉換為大於0
        var ab = new ArrayBuffer(bytes.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }
        return new Blob([ab], {type: 'image/jpeg'});
    }
  • 2.6 後端介面實現

@Controller
public class IndexController {

    protected final Logger logger = LoggerFactory.getLogger(getClass());

    @RequestMapping("/index")
    public String list(ModelMap map) {
        return "index";
    }

    @PostMapping("/upload")
    @ResponseBody
    public UploadFileVo uploadFile(@RequestParam("file") MultipartFile file, @RequestParam("id") Integer id, HttpServletResponse response) {
        response.setContentType("text/html");
        //保存圖片到服務端，返回訪問地址
        UploadFileVo uploadFileVo = new UploadFileVo();
        //這裡為了演示，返回一張網圖
        uploadFileVo.setUrl("https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png");
        logger.info("上傳成功,url:{},id:{}", uploadFileVo.getUrl(), id);
        return uploadFileVo;
    }

}
  • 2.7 最終效果圖
    webuploader和croopper圖片裁剪上傳

3. 完整代碼

查閱演示代碼

參考

https://www.codingbrick.com/archives/456.html

作者：編碼磚家
公眾號：編碼磚家
出處：https://www.cnblogs.com/xiaoyangjia/
本文版權歸作者所有，任何人或團體、機構全部轉載或者部分轉載、摘錄，請在文章明顯位置註明作者和原文鏈接。
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • transition和animation的區別是什麼？
    一、transition（過渡、轉變的意思） transition 屬性是一個簡寫屬性，用於設置四個過渡屬性： 1. transition-property：設置過渡效果的屬性名稱（預設值是all）； 2. transition-duration：設置過渡完成所需要的時間（預設值是0）； 3. tr ...
  • AJAX（Web數據交互方式）
    使用 Ajax 技術網頁應用能夠快速地將增量更新呈現在用戶界面上，而不需要重載（刷新）整個頁面，這使得程式能夠更快地回應用戶的操作。 ...
  • JS—關於排序
    一、冒泡排序 原理：相鄰兩元素之間兩兩比較，比較出大值進行賦值互換，再依次與相鄰的元素比較，層層遞進。#互換元素位置，相互賦值。 時間複雜度：最好O(n)，最差O(n^2) 1、比較相鄰的兩個元素，如果前一個比後一個大，則交換位置。2、比較完第一輪的時候，最後一個元素是最大的元素。3、這時候最後一個 ...
  • JS JSON格式化列印：JSON.stringify方法
    具體示例 //代碼 console.log(JSON.stringify({ x: 5, y: 6 },null,2)); //輸出結果 { "x": 5, "y": 6 } JSON.stringify() 介紹 JSON.stringify()方法將一個JavaScript對象或值轉換為JSON ...
  • VuePress 博客搭建系列 33 篇正式完結！
    前言 VuePress 博客搭建系列是我寫的第 6 個系列文章，前 5 個系列分別是 JavaScript 深入系列，JavaScript 專題系列、underscore 系列、ES6 系列、TypeScript 系列。 VuePress 博客搭建系列共計 33 篇，講解使用 VuePress 搭建 ...
  • 中國軟體杯---電力客戶行為分析---圖表聯動echarts-demo（flask）
    中國軟體杯 電力客戶行為分析 圖表聯動echarts-demo（flask） 題目鏈接（可下載原始CSV數據集）：http://www.cnsoftbei.com/plus/view.php?aid=715 註：其中引用的js文件自行查找 1）完整的原始數據（elec_0） 屬性含義： userid ...
  • Zwibbler—前端Canvas繪圖工具使用記錄
    本人第一次發博客，用意在於記錄自己在開發過程中用到的實用工具並分享出來，寫的可能不好，請大家多多包涵！！！ 工具官網：https://www.zwibbler.com 基於Canvas的一個前端繪畫工具。具體功能本人暫未深究。主要在項目中的應用場景如下： 1.將Canvas畫板植入前端 2.用戶可通 ...
  • 前端工程化 Webpack基礎
    隨著ECMAScript 6.0(ES6)是JavaScript 語言的下一代標準的普及，各個大公司和大的廠商都推出了自己的前端開發框架，如Angular，React，Vue 等，微軟更是錦上添花，開發出Typescript 的JavaScript超集語言，更是讓各個前端框架所採用，這將是前端領域的 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類