cropper裁剪圖片（一）

阿新 • • 發佈：2019-01-11

1、前言

在上傳圖片的過程中，我們經常會限制上傳圖片的尺寸，但是我們的圖片來源尺寸各異。所以在上傳之前需要先裁剪圖片然後再上傳。今天使用一種外掛cropper.js這個外掛完成幾個小demo，記錄一下，以備後續使用。

2、使用前準備

cropper該外掛有兩種版本，一種是依賴於jquery，另一種則不依賴，使用原生的JS。本例使用依賴jquery的版本。
使用的時候需要引入依賴的js和css：（可以直接才github上去下載）

<link rel="stylesheet" href="css/cropper.css"> 
 
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="js/cropper.js"></script>

3、示例—通過縮放圖片來裁剪圖片

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>圖片裁剪示例</title> 

    <link rel="stylesheet" href="css/cropper.css">
    <style type="text/css">
        .container,img{
            width: 400px;
            height: 300px;
            float: left;
        }
        button{
            margin-top: 9px;
            width: 70px;
            height: 30px;
        } 

        .preview {
            width: 120px;
            height: 90px;
            overflow: hidden;
            float: left;
            margin-left: 15px;
        }
        .btn-div{
            margin-top: 320px;
        }
    </style>
</head>
<body>
<h3>圖片源</h3>
<div class="container">
    <img id="image" src="img/mm.jpeg"/>
</div>
<div class="preview"></div>
<div class="btn-div">
    <button id="btn">裁剪</button>
    <button id="reset">重置</button>
</div>
<h3>裁剪結果</h3>
<div id="result"></div>
</body>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/cropper.js"></script>
<script type="text/javascript">
    $(function(){
        //初始化資料
        $("#image").cropper({
            aspectRatio: 4 / 3, //顯示裁剪比例
            preview: '.preview', //這裡預覽如果沒有效果，需要加上一段css（overflow: hidden）
            viewMode: 3,        //全屏鋪滿，再縮小都沒有空隙
            dragMode: 'move',   //制動拖動方式
            autoCropArea: 1,    //合適裁剪區域的比例
            restore: false,     //調賬視窗大小，不儲存裁剪區域
            modal: false,       //取消遮罩
            guides: false,      //去掉裁剪虛線
            highlight: false,   //取消高亮裁剪框
            cropBoxMovable: false,  //禁止裁剪框移動
            cropBoxResizable: false //禁止裁剪框改變大小
        });

        $("#btn").click(function(){
            //獲取裁剪的圖片資訊
            /*
            如果是外界傳值的話，需要在官網查詢有沒有set方法，如果有可以用$().cropper("set方法名","需要賦的值")，這樣的方法傳遞。
            */
            var croppedCanvas = $("#image").cropper('getCroppedCanvas');
            $("#result").empty().html('<img src="' + croppedCanvas.toDataURL() + '">');
        });

        $("#reset").click(function(){
            //還原圖片的初始值，reset方法時cropper中自帶的方法。
            $("#image").cropper('reset');
        });
    });
</script>
</html>

3、執行效果

這裡寫圖片描述

4、參考資料

官網： https://www.awesomes.cn/repo/fengyuanchen/cropper
官網示例：http://fengyuanchen.github.io/cropper/
技術部落格：http://www.jianshu.com/p/b252a7cbcf0b

cropper裁剪圖片（一）

1、前言在上傳圖片的過程中，我們經常會限制上傳圖片的尺寸，但是我們的圖片來源尺寸各異。所以在上傳之前需要先裁剪圖片然後再上傳。今天使用一種外掛cropper.js這個外掛完成幾個小demo，記錄一下，以備後續使用。 2、使用前準備 cropper該外掛有兩

cropper裁剪圖片（二）

1、前言為了更好的裁剪圖片，並且適用於企業開發中，總結了一個彈框裁剪的小demo，為此記錄下來。 2、效果頁面效果：上傳圖片效果選擇圖片效果裁剪效果編輯效果 3、原始碼 &l

angularjs手機webapp 利用input拍照，相簿選擇、縮圖顯示上傳圖片（一）

執行後的截圖： html程式碼 <ul class="list_img"> <li ng-repeat="imageSrc in imgshows track by $index"> <img n

wangEditor的使用及上傳圖片（一）

由於業務需要，最近新入手了一款富文字編輯器wangEditor，這是一款輕量級的富文字編輯器，比起百度的ueditor，這款編輯器的介面更加簡單，文件也很詳細。對於需求不是很高的功能來說，這款編輯器實在是不二之選。一、wangEditor的基

利用協程asyncio爬取搜狗美女圖片（一）——asyncio庫的介紹和使用

上一節，我們通過分析ajax爬取搜狗美女圖片，（連結https://blog.csdn.net/MG1723054/article/details/81735834）這樣爬取的效率相對來說比較高，在文章的末尾我們使用程序池來提高效率，但是由於爬蟲主要是密集型IO操作，利用程序對其提高時效率不高，

WPF GDI+字串繪製成圖片（一）

本章講述：在WPF中，使用GDI+技術，把字串資料，根據文字字型樣式，大小繪製成字串圖片； 1、XAML前臺程式碼 <Window x:Class="WPF_GDI_Test.MainWindow" xmlns="http://schemas.mic

WPF GDI+字符串繪制成圖片（一）

inf lan acc [] isp tails mea summary blog 原文:WPF GDI+字符串繪制成圖片（一）

零基礎爬取堆糖網圖片（一）

## 零基礎爬取堆糖網圖片（一） ### 全文介紹：首先**堆糖網**是一個美圖桌布興趣社群，有大量的~~美女~~圖片今天我們實現搜尋關鍵字爬取堆糖網上相關的美圖。當然我們還可以實現多執行緒爬蟲，加快爬蟲爬取速度 ![](https://img2020.cnblogs.com/blog/1579925/

opencv影象處理（一）：讀取圖片，裁剪圖片

1.利用opencv讀取圖片： # -*- coding: utf-8 -*- # !/usr/bin/env python # @Time : 2018/11/19 14:59 # @Author : xhh # @Desc : 讀取圖片 # @File : open

android圖片裁剪拼接實現（一）：Matrix基本使用

一、前文之前有個朋友委託我實現一個圖片拼接的元件，感覺挺有意思，於是週末花了些時間去研究了下，其實拼接這一步並不難，但是我在研究中發現了Matrix這個東西，非常好的東西。為此，我竟然拾起了多年沒有動過的線性代數。二、原理要徹底搞懂mat

Python爬蟲實例（一）爬取百度貼吧帖子中的圖片

選擇圖片查看負責 targe mpat wid agent html headers 程序功能說明：爬取百度貼吧帖子中的圖片，用戶輸入貼吧名稱和要爬取的起始和終止頁數即可進行爬取。思路分析：一、指定貼吧url的獲取例如我們進入秦時明月吧，提取並分析其有效url如下

常見圖片格式詳解系列（一） ----簡介

圖片格式 png jpg bmp 常見圖片格式介紹信息時代，豐富多彩的世界，我們用圖片來感知，來記憶，來存儲。多姿多彩的圖片格式，你是否了解其中奧妙呢。接下來的系列文章就要帶大家詳細解析常見圖片格式。（一） BMP BMP格式，是windows的一種位圖格式，同時也是一種未經過壓縮的格式

Python+OpenCV圖像處理（一）——讀取顯示一張圖片

沒有 class 釋放資源圖像 Coding 路徑 troy 如果 nco 　　配置好所有環境後，開始利用python+opencv進行圖像處理第一步。　　讀取和顯示一張圖片： import cv2 as cv src=cv.imread(‘E:\imageload\

elas演算法原始碼賞析（一）：PGM格式圖片的讀取和儲存

image.h原始碼來說說標頭檔案 pgm格式簡約筆記 // basic image I/O, based on Pedro Felzenszwalb's code #ifndef IMAGE_H #define

圖片處理（一）

圖片的處理大概分截圖(capture), 縮放(scale), 設定大小(resize), 儲存(save) 1.等比率縮放 - (UIImage *)scaleImage:(UIImage *)image toScale:(float)scaleSize {

mpvue寫微信小程式-圖片引入（一）

1、快速上手（http://mpvue.com/mpvue/quickstart/）按官網給出流程，建立：執行後，在微信工具檢視：編輯器中檢視目錄結構：為了執行的

python+openCV實現簡單的圖片搜尋功能（一）

一、圖片搜尋引擎有三種不同的模式 1.Search by Meta-Data:元資料搜尋模式，這種和傳統的文字搜尋類似，給索引資料新增文字註釋，上傳待查詢的圖片的時候，需要附加圖片的文字描述，實際在後臺搜尋對應的文字描述，典型的有 https://www.flickr.com/

ATP的OpenCV筆記（一）：對圖片的基本操作

寫在前面 ATP成功進化成棄坑大師。。主要是正式開課以後自己亂搞著玩兒的東西就不想管它了QAQ。。。Python學會了以後也懶得往部落格裡寫了。。這次打算開的坑emmm是上課講的內容？由於要記住的函式用法太多ATP懶得每次遇到都百度所以相當於在blog裡面記一下嗯就是這樣。 OpenCV是個可以用

搭建簡單圖片分類的卷積神經網路（一）-- 訓練模型的圖片資料預處理

一、訓練之前資料的預處理主要包括兩個方面 1、將圖片資料統一格式，以標籤來命名並存到train資料夾中（假設原始圖片按類別存到資料夾中）。 2、對命名好的圖片進行訓練集和測試集的劃分以及圖片資料化。先對整個專案檔案進行說明：專案資料夾

深度學習（一）計算機如何處理和識別圖片揭祕

前言先來一張美景圖，欣賞一下大自然，順便大家猜猜這是哪裡？有時候真感嘆大自然的雄偉壯闊，自然形成了無數的山和風景不需要任何點綴，有

cropper裁剪圖片（一）

相關推薦