Poczekaj, aż zmiany CSS (zmiana rozmiaru) zostaną zastosowane przed kontynuowaniem skryptu.

Question

Mam skrypt, który zmienia rozmiar płótna w celu dopasowania do obrazu, który jest na nim ładowany, a następnie pobiera obraz z płótna. Muszę zmienić rozmiar, albo pobrany obraz zawiera wszelkie białe znaki i wygląda na mniejszy niż powinien.

originalImg.onload = function() { 

    var width = originalImg.width; 
    var height = originalImg.height; 

    $("#myCanvas").css({ "height": height + "px", "width": width + "px", "margin-bottom": -height + "px" }); 

    var c = viewer.drawer.canvas; 

    c.toBlob(function(blob) { 
     saveAs(blob, '@Model.DatabaseName' + '.jpg'); 
    }); 
} 
originalImg.src = originalSrc; 

Ale po pobraniu obrazu nadal ma wszystkie białe znaki. Mój skrypt kończy się przed zmianą rozmiaru płótna, mimo że zmieniam go na samym początku. Jak mogę zmienić rozmiar płótna przed ukończeniem reszty skryptu?

edytuj: Widzę krok po kroku, że cały skrypt kończy się, zanim płótno zmieni rozmiar strony.

Answer 1

Zmieniasz CSS dla obszaru roboczego, ale zmienia on tylko rozmiar wyświetlany na ekranie, a nie faktyczny rozmiar samego elementu canvas. Możesz przeskalować element canvas za pomocą CSS bez zmiany jego zawartości.

Spróbuj utworzyć nowy element canvas dla każdego obrazu po jego załadowaniu, a następnie ustaw dla niego rozmiar odpowiedniego płótna, który powinien być zapisany poprawnie.

Jeśli chcesz zachować graficzną reprezentację obrazu w istniejącym kanwie/znacznikach, to nie ma problemu, możesz skopiować obraz do obu, a "robocze" płótno ukryć z dala od widoku.