Как удалить изображение на canvas.cropper, когда вы хотите изменить изображение - PullRequest
Новая
       15

Как удалить изображение на canvas.cropper, когда вы хотите изменить изображение

0 голосов
/ 03 октября 2019

Я использую jquery cropper, чтобы обрезать изображение

поток

входное изображение -> показать модальную загрузку -> внутри модальной начальной загрузки был холст, затем загрузить изображение из ввода -> тогда было 2 кнопки (обрезка и восстановление) -> когда кнопка обрезки добавит результат с src из обрезки

, но когда вы захотите изменить изображение, изображение внутри холста не удалится

Я использовал cropper('destroy'), но он не работает

, как его решить? 

$('#fileInput').on( 'change', function(){
        console.log($(this)[0].files)
        canvas.cropper('destroy');
        $('.cropper-bg').remove();
        // if($(this)[0].files.length != 0){
        //     // alert('not tempy')
        //     // console.log('invest')
        //     let reader = new FileReader();
        //     reader.onload = function (e) {
        //         let newImage = new Image();
        //         newImage.onload = function () {
        //             $(this).val('')
        //         }
        //     }
        // } else 
        if ($(this)[0].files && $(this)[0].files[0]) {
            console.log(this.files);
            if ( $(this)[0].files[0].type.match(/^image\//) ) {
                if ($(this)[0].files[0].size > 2048000) {
                    alert('More than 2Mb');
                    console.log(this.files[0].size);
                    $(this).val('');
                }else{
                    var reader = new FileReader();
                    reader.onload = function(evt) {
                        var img = new Image();
                        // $('#modalCroppingImage').modal('show');
                        img.onload = function() {
                            $('#modalCroppingImage').modal('show');
                            $('.modal').on('shown.bs.modal', function () {
                                context.canvas.height = img.height;
                                context.canvas.width  = img.width;
                                context.drawImage(img, 0, 0);
                                var cropper = canvas.cropper({
                                aspectRatio: 16 / 9
                                });
                                $('#btn-crop-image').click(function() {
                                    // Get a string base 64 data url
                                    var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png"); 
                                    $result.append( $('<img>').attr('src', croppedImageDataURL) );
                                    $('#fileInput').val('');
                                });
                                $('#btn-restore-image').click(function() {
                                canvas.cropper('reset');
                                $result.empty();
                                });
                            });
                        };
                        img.src = evt.target.result;
                    };
                    reader.readAsDataURL($(this)[0].files[0]);
                }
            }
            else {
                alert("Invalid file type! Please select an image file.");
            }
            console.log($(this)[0].files.length);

        } else{
            alert('No file(s) selected.');
        }
    });

jsfiddle здесь ссылка https://jsfiddle.net/hndlzd/gdcazw74/1/

iожидайте, когда я захочу изменить изображение, оно удалит изображение до

...