日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Ajax — cropper (图片剪裁)基本用法

發布時間：2023/12/13 编程问答 38 豆豆
生活随笔 收集整理的這篇文章主要介紹了 Ajax — cropper (图片剪裁)基本用法 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

jQuery-cropper插件完整的API：http://www.jq22.com/jquery-info9322

1. 基本使用步驟

  • 在 <head> 中導入 cropper.css 樣式表：
    • <link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />
  • 在 <body> 的結束標簽之前，按順序導入如下的 js 腳本：
    • <script src="/assets/lib/jquery.js"></script> <script src="/assets/lib/cropper/Cropper.js"></script> <script src="/assets/lib/cropper/jquery-cropper.js"></script>

    3、在卡片的 layui-card-body 主體區域中，定義如下的 HTML 結構：

    <!-- 第一行的圖片裁剪和預覽區域 --><div class="row1"><!-- 圖片裁剪區域 --><div class="cropper-box"><!-- 這個 img 標簽很重要，將來會把它初始化為裁剪區域 --><img id="image" src="/assets/images/sample.jpg" /></div><!-- 圖片的預覽區域 --><div class="preview-box"><div><!-- 寬高為 100px 的預覽區域 --><div class="img-preview w100"></div><p class="size">100 x 100</p></div><div><!-- 寬高為 50px 的預覽區域 --><div class="img-preview w50"></div><p class="size">50 x 50</p></div></div></div><!-- 第二行的按鈕區域 --><div class="row2"><button type="button" class="layui-btn">上傳</button><button type="button" class="layui-btn layui-btn-danger">確定</button></div>

    4、美化的樣式：

    /* 設置卡片主體區域的寬度 */ .layui-card-body {width: 500px; }/* 設置按鈕行的樣式 */ .row2 {display: flex;justify-content: flex-end;margin-top: 20px; }/* 設置裁剪區域的樣式 */ .cropper-box {width: 350px;height: 350px;background-color: cyan;overflow: hidden; }/* 設置第一個預覽區域的樣式 */ .w100 {width: 100px;height: 100px;background-color: gray; }/* 設置第二個預覽區域的樣式 */ .w50 {width: 50px;height: 50px;background-color: gray;margin-top: 50px; }/* 設置預覽區域下方文本的樣式 */ .size {font-size: 12px;color: gray;text-align: center; }/* 設置圖片行的樣式 */ .row1 {display: flex; }/* 設置 preview-box 區域的的樣式 */ .preview-box {display: flex;flex-direction: column;flex: 1;align-items: center; }/* 設置 img-preview 區域的樣式 */ .img-preview {overflow: hidden;border-radius: 50%; }

    5、實現基本裁剪效果：

    // 1.1 獲取裁剪區域的 DOM 元素var $image = $('#image')// 1.2 配置選項const options = {// 縱橫比aspectRatio: 1,// 指定預覽區域preview: '.img-preview'}// 1.3 創建裁剪區域$image.cropper(options)

    2. 更換裁剪的圖片

  • 拿到用戶選擇的文件
    • var file = e.target.files[0]

    2、根據選擇的文件，創建一個對應的 URL 地址：

    var newImgURL = URL.createObjectURL(file)

    3、先銷毀舊的裁剪區域，再重新設置圖片路徑，之后再創建新的裁剪區域：

    $image.cropper('destroy') // 銷毀舊的裁剪區域.attr('src', newImgURL) // 重新設置圖片路徑.cropper(options) // 重新初始化裁剪區域

    4、將裁剪后的圖片，輸出為 base64 格式的字符串

    var dataURL = $image.cropper('getCroppedCanvas', { // 創建一個 Canvas 畫布width: 100,height: 100}).toDataURL('image/png') // 將 Canvas 畫布上的內容，轉化為 base64 格式的字符串

    Canvas 技術，是瀏覽器網頁中實現繪圖的一門技術。它是由 <canvas> 標簽和一套繪圖 API 組成的！

    $('#sure').click(function(){let i = image.cropper('getCroppedCanvas', { // 創建一個 Canvas 畫布width: 100,height: 100});//將圖片轉為base64var str = i.toDataURL();$.ajax({type:'POST',url:'/my/update/avatar',data :{avatar: str},success:function(res){layer.msg(res.message);if(res.status === 0){window.parent.getUserInfo();}}});});

    總結

    以上是生活随笔為你收集整理的Ajax — cropper (图片剪裁)基本用法的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。