移動端cropper.js 裁剪圖片并上傳

馬龍駒發布于2019-08-02 11:23 / 2573人閱讀

摘要：參考效果引入使用結構頭像頭像截圖彈窗取消截圖頭像保存引用具體使用可查看官網修改頭像參加文件點擊圖片初始化關閉彈窗保存截圖保存數據

參考效果：
http://www.17sucai.com/previe...

引入cropper使用

HTML結構


    頭像

js引用：
具體cropper.js 使用可查看官網http://fengyuanchen.github.io...

$(function() {
    //修改頭像 參加文件https://blog.csdn.net/weixin_38023551/article/details/78792400
    var avatar = document.getElementById("avatar");
    var image = document.getElementById("image");
    var input = document.getElementById("input");
    var $modal = $("#modal");
    var cropper;
    //點擊圖片
    input.addEventListener("change", function (e) {
        var files = e.target.files;
        var done = function (url) {
            input.value = "";
            image.src = url;
            $modal.show(function() {
                //初始化
                cropper = new Cropper(image, {
                    aspectRatio: 1,
                    viewMode:1,
                });
            });

        };
        var reader;
        var file;
        var url;

        if (files && files.length > 0) {
            file = files[0];
            if (URL) {
                done(URL.createObjectURL(file));
            } else if (FileReader) {
                reader = new FileReader();
                reader.onload = function (e) {
                    done(reader.result);
                };
                reader.readAsDataURL(file);
            }
        }
    });
    //關閉彈窗
    document.getElementById("cancle").addEventListener("click", function () {
        $modal.hide(function() {
            cropper.destroy();
            cropper = null;
        });
    });
    //保存截圖
    document.getElementById("crop").addEventListener("click", function () {
        var initialAvatarURL;
        var canvas;
        $modal.hide(function() {
            cropper.destroy();
            cropper = null;
        });

        if (cropper) {
            canvas = cropper.getCroppedCanvas({
                width: 120,
                height: 120,
            });
            initialAvatarURL = avatar.src;
            avatar.src = canvas.toDataURL("image/jpeg");
            //保存數據
            canvas.toBlob(function (blob) {
                var formData = new FormData();
                formData.append("avatar", blob);
                $.ajax("https://jsonplaceholder.typicode.com/posts", {
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function () {
                        console.log("Upload success");
                    },
                    error: function () {
                        avatar.src = initialAvatarURL;
                        console.log("Upload error");
                    }
                });
            });
        }
    });
})

云服務器 GPU云服務器 H5移動端上傳圖片圖片上傳服務器并預覽手機端上傳圖片安卓端上傳圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52952.html

移動端cropper.js 裁剪圖片并上傳

摘要：參考效果引入使用結構頭像頭像截圖彈窗取消截圖頭像保存引用具體使用可查看官網修改頭像參加文件點擊圖片初始化關閉彈窗保存截圖保存數據參考效果：http://www.17sucai.com/previe... 引入cropper使用 HTML結構頭像 ...

since1986 2019-08-23 11:34 評論0 收藏0
無需Flash實現圖片裁剪——HTML5中級進階

摘要：需求就是那么簡單，在瀏覽器里裁剪圖片并上傳到服務器。原圖片對象上傳裁剪后的對象初始化圖片預覽根據裁剪參數繪制轉對象以下將對每個環節詳解。或者根據獲取裁剪信息包括旋轉和縮放用進行手動繪制。前言圖片裁剪上傳，不僅是一個很貼合用戶體驗的功能，還能夠統一特定圖片尺寸，優化網站排版，一箭雙雕。需求就是那么簡單，在瀏覽器里裁剪圖片并上傳到服務器。我第一個想到的方法就是，將圖片和裁剪參數（x...

JerryC 2019-08-19 18:17 評論0 收藏0
JQuery 插件圖片裁剪插件cropper.js使用,上傳

摘要：圖片裁剪，壓縮是上傳圖片一定會遇到的問題。如何獲得裁剪的圖片呢獲取裁剪后的圖片信息首先我們可以獲得裁剪框的節點然后調用圖片質量圖片質量越好圖片大小越大這樣就得到了你裁剪的圖片了可以通過，放到你想要的節點里展示。圖片裁剪，壓縮是上傳圖片一定會遇到的問題。這里把我測試cropper.js這款jquery插件的心得分享一下，可以給新手做參考。引入插件相關文件,你們down到本地也可以。這...

SHERlocked93 2019-08-22 13:46 評論0 收藏0
截取圖片生成頭像插件

摘要：獲取圖片地址之后，進行截取圖片這里推薦一個插件點這里，具體怎么用就不再贅述。等截取圖片之后，需要將截取的文件轉換為二進制大文件。調取接口，將二進制大文件上傳即可。上傳頭像插件目的：幫助開發者快速開發上傳頭像功能點背景：現在b，g能搜到的頭像上傳插件并不太好用，所以想提供一個比較自由度的上傳并且可以剪切的插件。資源：具體資源請查看這里實現大致思路如下：先有一個上傳的...

scq000 2019-08-01 17:43 評論0 收藏0