Не удается получить правильный URL-адрес данных с помощью метода toDataURL () из библиотеки html2canvas - PullRequest
Новая
       48

Не удается получить правильный URL-адрес данных с помощью метода toDataURL () из библиотеки html2canvas

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

Я работаю над вращением изображения, а затем преобразовываю это изображение в строку данных с помощью метода библиотеки html2canvas toDataURL (), а затем отправляю эти данные на страницу php через ajax. Вот мой код: 

$(".gallery-item .active_icon .fa-repeat").click(function(){

    var rotate_btn_id = $(this).attr('id');
    var parent_name = "#gallery-item_for_"+rotate_btn_id;
    var img_id = "#img_for_"+rotate_btn_id;
    var img_format = $(img_id).attr("data-format");
    alert(rotate_btn_id+"  "+parent_name+"  "+img_id+"  "+img_format);

    tmpAnimation = tmpAnimation + 90;
    $(this).parents('.gallery-item').find('img').css({
        "-webkit-transform" : "rotate("+tmpAnimation+"deg)",
        "-moz-transform" : "rotate("+tmpAnimation+"deg)",
        "transform" : "rotate("+tmpAnimation+"deg)"
    });

    html2canvas($(img_id), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);
            //Convert and download as image
            var canvasData = canvas.toDataURL("image/png");
            window.open(canvasData, "_blank");
            console.log(canvasData);
            $.ajax({
                url: base + "/ajax/image_rotate.php",
                method: 'POST',
                data: { 'img_id': rotate_btn_id, 'img_data': canvasData},
                success: function(response) {
                    console.log(response);
                    location.reload(true);
                },
                error: function(xhr,status,error){
                    alert("xhr: "+xhr+"  status: "+status+"  error: "+error);
                }, 
            });
        }
    });
});

.fa-repeat - это шрифт с потрясающим значком, который я использую в качестве кнопки для поворота изображения. Код работает нормально до поворота изображения и возникает проблема, когда я использую toDataUrl (), он не возвращается к правильной строке, когда я нажимаю на поворот. Строка, которая всегда возвращается с этой функцией, является

data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFIklEQVR4Xu3VsRHAMAzEsHHczp0 декодирования. Поэтому я хочу знать, что я делаю неправильно в этом коде и как я могу исправить это, используя тот же метод?

...