如何在使用 Croppie 库上传之前设置默认图像？答案

【问题标题】：How to set default image before upload using Croppie library?如何在使用 Croppie 库上传之前设置默认图像？
【发布时间】：2018-02-22 10:44:35
【问题描述】：

我正在使用Croppie 来裁剪和上传图片。一切正常，除了我无法在上传之前设置默认图像。如果有人提供帮助，我将不胜感激：

这是我的 javascript 代码：

function demoUpload() {
        var $uploadCrop;

        function readFile(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('.upload-demo').addClass('ready');
                    $uploadCrop.croppie('bind', {
                        url: e.target.result
                    }).then(function(){
                        console.log('jQuery bind complete');
                    });

                }

                reader.readAsDataURL(input.files[0]);
            }
            else {
                swal("Sorry - you're browser doesn't support the FileReader API");
            }
        }

        $uploadCrop = $('#upload-demo').croppie({
            viewport: {
                width: 300,
                height: 300,
                type: 'rawcanvas'
            },

        });




        $('#upload').on('change', function () { readFile(this); });

        $('.upload-result').on('click', function (ev) {
            $uploadCrop.croppie('result', {
                type: 'canvas',
                size: 'viewport'
            }).then(function (resp) {
                popupResult({
                    src: resp
                });


  $uploadCrop.croppie('bind', {
        url: resp
    });




                // $('.cr-image').attr('src',resp).removeAttr('style');
                 //$('.cr-image').attr('style','width:300px');
                 //$('.cr-image').attr('aria-valuenow','0.1563');


                $('.image_cropped').val(resp);


                //$('#upload-demo').html('<img src="'+resp+'">');

            });
        });
    }

演示图片：

我搜索了很多，但找不到解决方案。 Croppie 文档对我也不起作用。 :(谢谢

【问题讨论】：

标签： javascript jquery image jquery-file-upload croppie

【解决方案1】：

根据文档，没有设置默认图像的选项。所以我找到的解决方法是在加载时设置默认图像并在用户上传图像时替换它。

var isDefaultImage = true;
var logo = "/content/img/missing-image.jpg";

function readFile(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
        partnerLogo.croppie('bind', {
            url: e.target.result
        });
        $('#upload-container').addClass('ready');
        }
        reader.readAsDataURL(input.files[0]);
    }
}

partnerLogoCropper = $('#upload-container').croppie({
    viewport: {
        width: 250,
        height: 150,
        type: 'square'
    },
    boundary: {
        width: 300,
        height: 200
    },
    url: logo
 });

$('#upload').on('change', function () {
    readFile(this);
});

$('.upload-result').on('click', function (ev) {
    // checking if it is the default image and user hasn't uploaded any new image
    if (!$('#upload-container').hasClass('ready') && isDefaultImage){
        alert("NOT UPLOADED AND DEFAULT IMAGE IS LOADED");
    }
});

【讨论】：

【解决方案2】：

如果你只显示图片而不是你可以设置背景图片。

【讨论】：

这不是我需要的。你没有正确理解我。

【解决方案3】：

将 src 添加到 html 中的图像标签示例：

<img src="/default_img.jpg"/>

或者你也可以通过 JQuery 来添加示例：

$("#pic1").attr("src", "/image_path/default_img.jpg");

当您通过 JavaScript 添加/上传新的裁剪图像时，它将替换您的默认图像。

【讨论】：

它不起作用。我知道，尝试过但没有在这个例子上工作。

【解决方案4】：

$uploadCrop = $('#upload-demo').croppie({

        url:'anonymous.png'

        viewport: {
            width: 300,
            height: 300,
            type: 'rawcanvas'
        },

    });

添加 url:'anonymous.png' 以选择默认图片

【讨论】：

嗨，欢迎来到 stackoverflow。请不要忘记在回答问题时添加一些解释。