移动端cropper.js 裁剪图片并上传

马龙驹发布于2019-08-02 11:23 / 2580人阅读

摘要：参考效果引入使用结构头像头像截图弹窗取消截图头像保存引用具体使用可查看官网修改头像参加文件点击图片初始化关闭弹窗保存截图保存数据

参考效果：
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移动端上传图片图片上传服务器并预览手机端上传图片安卓端上传图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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