1. 程式人生 > >圖片裁剪上傳外掛—jquery.photoClip.js

圖片裁剪上傳外掛—jquery.photoClip.js


    .img-preview {
        overflow: hidden;
    }
    .img-preview-box .img-preview-lg {
        width: 150px;
        height: 150px;
    }
    .img-preview-box .img-preview-md {
        width: 100px;
        height: 100px;
    }
    .img-preview-box .img-preview-sm {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
</style>
</head>
<body>
<button class="btn btn-primary" data-target="#changeModal" data-toggle="modal">開啟</button><br/>
<div class="user-photo-box">
    <img id="user-photo" src="">
</div>
</div>
<div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title text-primary">
            <i class="fa fa-pencil"></i>
                        更換頭像
            </h4>
        </div>
        <div class="modal-body">
            <p class="tip-info text-center">
                未選擇圖片
            </p>
            <div class="img-container hidden">
                <img src="" alt="" id="photo">
            </div>
            <div class="img-preview-box hidden">
                <hr>
                <span>150*150:</span>
                <div class="img-preview img-preview-lg">
                </div>
                <span>100*100:</span>
                <div class="img-preview img-preview-md">
                </div>
                <span>30*30:</span>
                <div class="img-preview img-preview-sm">
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <label class="btn btn-danger pull-left" for="photoInput">
            <input type="file" class="sr-only" id="photoInput" accept="image/*">
            <span>開啟圖片</span>
            </label>
            <button class="btn btn-primary disabled" disabled="true" onclick="sendPhoto();">提交</button>
            <button class="btn btn-close" aria-hidden="true" data-dismiss="modal">取消</button>
        </div>
    </div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
        var initCropperInModal = function(img, input, modal){
            var $image = img;
            var $inputImage = input;
            var $modal = modal;
            var options = {
                aspectRatio: 1, // 縱橫比
                viewMode: 2,
                preview: '.img-preview' // 預覽圖的class名
            };
            // 模態框隱藏後需要儲存的資料物件
            var saveData = {};
            var URL = window.URL || window.webkitURL;
            var blobURL;
            $modal.on('show.bs.modal',function () {
                // 如果開啟模態框時沒有選擇檔案就點選“開啟圖片”按鈕
                if(!$inputImage.val()){
                    $inputImage.click();
                }
            }).on('shown.bs.modal', function () {
                // 重新建立
                $image.cropper( $.extend(options, {
                    ready: function () {
                        // 當剪下介面就緒後,恢復資料
                        if(saveData.canvasData){
                            $image.cropper('setCanvasData', saveData.canvasData);
                            $image.cropper('setCropBoxData', saveData.cropBoxData);
                        }
                    }
                }));
            }).on('hidden.bs.modal', function () {
                // 儲存相關資料
                saveData.cropBoxData = $image.cropper('getCropBoxData');
                saveData.canvasData = $image.cropper('getCanvasData');
                // 銷燬並將圖片儲存在img標籤
                $image.cropper('destroy').attr('src',blobURL);
            });
            if (URL) {
                $inputImage.change(function() {
                    var files = this.files;
                    var file;
                    if (!$image.data('cropper')) {
                        return;
                    }
                    if (files && files.length) {
                        file = files[0];
                        if (/^image\/\w+$/.test(file.type)) {


                            if(blobURL) {
                                URL.revokeObjectURL(blobURL);
                            }
                            blobURL = URL.createObjectURL(file);


                            // 重置cropper,將影象替換
                            $image.cropper('reset').cropper('replace', blobURL);


                            // 選擇檔案後,顯示和隱藏相關內容
                            $('.img-container').removeClass('hidden');
                            $('.img-preview-box').removeClass('hidden');
                            $('#changeModal .disabled').removeAttr('disabled').removeClass('disabled');
                            $('#changeModal .tip-info').addClass('hidden');


                        } else {
                            window.alert('請選擇一個影象檔案!');
                        }
                    }
                });
            } else {
                $inputImage.prop('disabled', true).addClass('disabled');
            }
        }
    }


    var sendPhoto = function(){
        $('#photo').cropper('getCroppedCanvas',{
            width:300,
            height:300
        }).toBlob(function(blob){
            // 轉化為blob後更改src屬性,隱藏模態框
            $('#user-photo').attr('src',URL.createObjectURL(blob));
            $('#changeModal').modal('hide');
        });
    }


    $(function(){
        initCropperInModal($('#photo'),$('#photoInput'),$('#changeModal'));
    });
</script>
</body>
</html>

相關推薦

圖片裁剪外掛jquery.photoClip.js

    .img-preview {         overflow: hidden;     }     .img-preview-box .img-preview-lg {         width: 150px;         height: 150px;     }     .img-prev

PHP+jQuery.photoClip.js支援手勢的圖片裁剪例項

PHP+jQuery.photoClip.js支援手勢的圖片裁剪上傳例項,在手機上雙指捏合為縮放,雙指旋轉可根據旋轉方向每次旋轉9

移動端圖片裁剪jQuery.cropper.js

The new ++ spec 得到 end ipad 安卓 java jQuery.cropper.js是一款使用簡單且功能強大的圖片剪裁jQuery插件。該圖片剪裁插件支持圖片放大縮小,支持圖片旋轉,支持觸摸屏設備,支持canvas,並且支持跨瀏覽器使用。 一、移動端獲

Jcrop外掛+Canvas實現圖片預覽+圖片裁剪

前言 想實現一個功能:使用者點選上傳按鈕,選擇圖片後。圖片顯示在一個彈出框上,並可以對圖片進行裁剪。裁剪後的圖片顯示在頁面上。提交表單即可上傳圖片。 遇到問題 瀏覽器的安全設定不讓使用者獲取上傳的圖片路徑,實際獲取的是c:\fakepath\a.jp

簡單圖片裁剪,jsp+servlet+jQuery+Image Cropper(測試)

伺服器 package test; import java.awt.image.BufferedImage; import java.io.ByteArrayInputStream; import java.io.File; import java.io.IOExcept

基於canvas的圖片裁剪及刪除

專案需求:欲實現PC端圖片從本地上傳,在裁剪框中裁剪成一定比例的圖片,該圖片會在微信端同步展示,考慮手機的螢幕適配,需要寬度為640px(只需修改一下引數即可),本文以寬320px為例; 實現方式:點選+框,圖片載入在canvas畫布,前端按照320/110比例裁剪圖片,裁剪後將base64編碼傳

圖片裁剪示例(node + react)

場景 因為公司內部平臺非常多,很多開發的站點地址沒有一個統一的入口,所以作者基於 egg + mongodb + redies + umi +antd 搭建了一個簡單的入口平臺。 由於各個平臺各有特點如果能輸入名字的話還是不太好區分,logo上傳必然是一個必須的功能。 一起來看一下整個前後端功能實現的過程。

vue移動端圖片裁剪

1. 安裝cropperjs依賴庫 npm install cropperjs 2. 編寫元件SimpleCropper.vue <template> <div class="v-simple-cropper"> <slot>

jquery.uploadify.js

注:這是學習筆記!!! 首先引用js外掛jquery.uploadify.js 以下是js處理範例,詳細見官網 //上傳圖片附件 var folder = "/Upload/"; $(".

jquery.uploadView.js圖片外掛

檔名 jquery.uploadView.js // 圖片上傳前預覽外掛 //Power By 勾國印 //QQ:245629560 //Blog:http://www.gouguoyin.cn (function($){ $.fn.uploadV

裁剪圖片功能jquery外掛

實現圖片上傳及圖片裁剪功能,時間比較倉促,目前只允許單圖片有裁剪功能,其中圖片裁剪用到了imgareaselect外掛,其實前端是偽裁剪,將裁減座標傳遞給後臺處理,需後臺配合,備份一下程式碼/** * Created by lgy on 2017/11/25. * 圖片

使用JCrop進行圖片裁剪裁剪js說明,裁剪預覽,裁剪裁剪設計的圖片處理的工具類和程式碼

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

移動端壓縮圖片獲取圖片並壓縮。lrz.all.bundle.js外掛。 accept="image/*"載入慢的問題

檢視下載地址:http://www.cnblogs.com/52fhy/p/5355601.html 檢視input[type='file']的圖片路徑。在我的另一篇部落格:http://blog.csdn.net/qq_33769914/article/details/5

cropper.js裁剪圖片圖片

//html <img src="{{ Auth::user()['avater'] }}" id="avater" style="border: none; visibility: visible; margin: 0px; padding: 0px; position: absolute

jQuery 圖片外掛----按鈕 以及動態增刪圖片預覽

http://www.lanrenzhijia.com/js/3873.html <div class="img-box full"><section class=" img-section"><p class="up-p">作品圖片:

cropper.js 實現裁剪圖片(PC端)

由於之前做專案的時候有需求是需要實現裁剪圖片來做頭像並上傳到伺服器,所以上網查詢了很多資料,也試用了許多案例,發現cropper外掛裁剪是比較完善的,所以結合之前的使用情況,編寫了此案例。本案例是參考cropper站點例項,進行修改簡化。 ##option相

cropper.js 實現裁剪圖片(移動端)

上一篇文章已經編寫了PC端的裁剪圖片案例,這次是涉及移動端的頭像裁剪更換,類似於微信更換頭像功能。。。 思路跟PC端的案例是一樣的,這裡就不多說了。 將案例放到伺服器上,如果出現上傳失敗可能是: 1

前端圖片壓縮(純js的質量壓縮,非大小壓縮)

默認 || callback doc 圖片格式 toc jpeg rtb src 此demo為大於1M對圖片進行壓縮上傳 若小於1M則原圖上傳,可以根據自己實際需求更改。 demo源碼如下: <!DOCTYPE html> <html> <h

怎樣實現前端裁剪圖片功能

cos pass iframe 上傳文件 repl 轉變 除了 mimetype 處理 怎樣實現前端裁剪上傳圖片功能 2017-05-20 JavaScript 由於前端是不能直接操作本地文件的,要麽通過<input type="file">用戶點擊選擇文

圖片裁剪

ada click delet relative tis hang flow 頁面 url 1.html,我添加了bootstrap模態框 <li > <span >封面美照*</span><!--<img src="im