Uncaught (в обещании) DOMException: не удалось выполнить toDataURL для HTMLCanvasElement: испорченные холсты не могут быть экспортированы - PullRequest
Новая
       5

Uncaught (в обещании) DOMException: не удалось выполнить toDataURL для HTMLCanvasElement: испорченные холсты не могут быть экспортированы

0 голосов
/ 02 апреля 2020

У меня проблемы с сохранением изображения в выходной папке. Вместо изображения будет сохранено черное изображение. Но если я использую изображение, которое находится в папке root, оно сохранит изображение.

index 

<input type="text" value="" id="textbox" /> <input type="button" value="Capture" id="capture" /><br />          
<input type="text" value="" id="background" placeholder="link of the image" /> 

<div id="canvas" crossorigin="anonymous">
  <div class="movable_div"></div>
</div>

js script 

$(function(){   

        //to make a div draggable
        $('.movable_div').draggable(
            {containment: "#canvas", scroll: false}
        );

        //to capture the entered text in the textbox 
        $('#textbox').keyup(function(){
            var text = $(this).val();
            $('.movable_div').text(text);
        }); 


        $("#background").on('change',function(){
            $('#canvas').css('background-image', "url(" + $('#background').attr('value') + ")");
            $('#background').attr('value', URL);
        });

        $('#capture').click(function(){
            //get the div content
            html2canvas( document.querySelector("#canvas"), { logging: true, letterRendering: 1,  allowTaint: false, useCORS: true } ).then(canvas => { 
                data = canvas.toDataURL('image/jpeg');
                console.log(data);
                //then call a super hero php to save the image
                save_img(data);
            })
        });         
    });


    //to save the canvas image
    function save_img(data){
        //ajax method.
        $.post('save_jpg.php', {data: data}, function(res){
            //if the file saved properly, trigger a popup to the user.
            if(res != ''){
                yes = confirm('File saved in output folder, click ok to see it!');
                if(yes){
                    location.href =document.URL+'output/'+res+'.jpg';
                }
            }
            else{
                alert('something wrong');
            }
        });
    }

save_jpg. php

$random = rand(100, 1000);

$savefile = @file_put_contents("output/$random.jpg", base64_decode(explode(",", $_POST['data'])[1]));

if($savefile){
    echo $random;
}

** черное изображение сохраняется вместо изображения **

...