直播原始碼開發，實現相簿的上傳和縮放裁剪

圖片上傳

透過ajax 即可上傳給後臺

完整程式碼

CSS

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>移動端圖片上傳</title>
    <link href="
    <link href="
    <style>
        .row {
            margin-bottom: 5px;
        }
        #photo {
            max-width: 100%;
        }
        .img-preview {
            width: 100px;
            height: 100px;
            overflow: hidden;
        }
        button {
            margin-top: 10px;
        }
        #result {
            width: 150px;
            height: 150px;
        }
    </style>
</head>

Body

<body>
<div class="container">
    <div class="row">
        <div class="col-sm-12 text-center">
            <label for="input" class="btn btn-danger" id="">
                <span>選擇圖片</span>
                <input type="file" id="input" class="sr-only">
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-2">
            <img src="" id="photo">
        </div>
        <div class="col-sm-2">
            <div>
                <p>
                    預覽(100*100)：
                </p>
                <div class="img-preview">
                </div>
            </div>
            <button class="btn btn-primary" onclick="crop()">裁剪圖片</button>
            <div>
                <br/>
                <p>
                    結果：
                </p>
                <img src="" alt="裁剪結果" id="result">
            </div>
        </div>
    </div>
</div>
</body>

JS

<!-- Scripts -->
<script src="
<script src="
<script src="
<script>
    // 修改自官方demo的js
    var initCropper = function (img, input) {
        var $image = img;
        var options = {
            aspectRatio: 1, // 縱橫比
            viewMode: 2,
            preview: '.img-preview' // 預覽圖的class名
        };
        $image.cropper(options);
        var $inputImage = input;
        var uploadedImageURL;
        if (URL) {
            // 給input新增監聽
            $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)) {
                        // 如果URL已存在就先釋放
                        if (uploadedImageURL) {
                            URL.revokeObjectURL(uploadedImageURL);
                        }
                        uploadedImageURL = URL.createObjectURL(file);
                        // 銷燬cropper後更改src屬性再重新建立cropper
                        $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                        $inputImage.val('');
                    } else {
                        window.alert('請選擇一個影像檔案！');
                    }
                }
            });
        } else {
            $inputImage.prop('disabled', true).addClass('disabled');
        }
    }
    var crop = function () {
        var $image = $('#photo');
        var $target = $('#result');
        $image.cropper('getCroppedCanvas', {
            width: 300, // 裁剪後的長寬
            height: 300
        }).toBlob(function (blob) {
            // 裁剪後將圖片放到指定標籤
            $target.attr('src', URL.createObjectURL(blob));
        });
    }
    $(function () {
        initCropper($('#photo'), $('#input'));
    });
</script>

以上就是直播原始碼開發，實現相簿的上傳和縮放裁剪，更多內容歡迎關注之後的文章

直播原始碼開發，實現相簿的上傳和縮放裁剪

相關文章