Javascript 尝试将div捕获为图像时出现问题

我允许用户上传图片到另一个上面，并调整它的大小，根据他的方便拖动它，最后我保存整个图片（两个图片：一个上面的另一个）。图像上载导致方向问题。我用EXIF修复了这个问题。但是现在在拍摄div时，图像的上半部分被裁剪。 以下是图像加载代码：

var resizeableImage = function (image_target) {
        // Some variable and settings
        var $container,
            orig_src = new Image(),
            image_target = $(image_target).get(0),
            event_state = {},
            constrain = false,
            min_width = 60, // Change as required
            min_height = 60,
            max_width = 1800, // Change as required
            max_height = 1900,
            init_height = 500,
            resize_canvas = document.createElement('canvas');
        imageData = null;
        init = function () {
            //load a file with html5 file api
            $('.js-loadfile').change(function (evt) {
                var files = evt.target.files; // FileList object
                var reader = new FileReader();
                reader.onload = function (e) {
                    imageData = reader.result;
                    loadData();
                }
                reader.readAsDataURL(files[0]);
            });
            //add the reset evewnthandler
            $('.js-reset').click(function () {
                if (imageData)
                    loadData();

            });
            // When resizing, we will always use this copy of the original as the base
            orig_src.src = image_target.src;
            // Wrap the image with the container and add resize handles
            $(image_target).height(init_height)
                .wrap('<div style="display:none" class="resize-container"></div>')
                .before('<span class="resize-handle resize-handle-nw"></span>')
                .before('<span class="resize-handle resize-handle-ne"></span>')
                .after('<span class="resize-handle resize-handle-se"></span>')
                .after('<span class="resize-handle resize-handle-sw"></span>');
            // Assign the container to a variable
            $container = $('.resize-container');
            $container.prepend('<div class="resize-container-ontop"></div>');
            // Add events
            $container.on('mousedown touchstart', '.resize-handle', startResize);
            $container.on('mousedown touchstart', '.resize-container-ontop', startMoving);
            $('.js-crop').on('click', crop);
        };
        loadData = function () {
            //set the image target
            base64 = imageData.replace(/^data\:([^\;]+)\;base64,/gmi, '');
            var binaryString = atob(base64);
            var len = binaryString.length;
            var bytes = new Uint8Array(len);
            for (var i = 0; i < len; i++) {
              bytes[i] = binaryString.charCodeAt(i);
             }
            //return bytes.buffer;
            var exif = EXIF.readFromBinaryFile(bytes.buffer);
            console.log(exif.Orientation);
//after adding the below css class issue occurs
            if(exif.Orientation == 6) {
                document.getElementById('selectedImage').classList.add("rotate90");
            } else if(exif.Orientation == 8) {
                document.getElementById('selectedImage').classList.add("rotate270");
            } else if(exif.Orientation == 3) {
                document.getElementById('selectedImage').classList.add("rotate180");
            }
            image_target.src = imageData;
            orig_src.src = image_target.src;
            //set the image tot he init height
            $(image_target).css({
                width: 'auto',
                height: init_height
            });
            $('.resize-container').css({
                display: 'inline-block',
            });
            //resize the canvas
            $(orig_src).bind('load', function () {
                resizeImageCanvas($(image_target).width(), $(image_target).height());
            });
            $('#up-img').css({
                display: 'none',
            });
        };
        startResize = function (e) {
            e.preventDefault();
            e.stopPropagation();
            saveEventState(e);
            $(document).on('mousemove touchmove', resizing);
            $(document).on('mouseup touchend', endResize);
        };
        endResize = function (e) {
            resizeImageCanvas($(image_target).width(), $(image_target).height())
            e.preventDefault();
            $(document).off('mouseup touchend', endResize);
            $(document).off('mousemove touchmove', resizing);
        };
        saveEventState = function (e) {
            // Save the initial event details and container state
            event_state.container_width = $container.width();
            event_state.container_height = $container.height();
            event_state.container_left = $container.offset().left;
            event_state.container_top = $container.offset().top;
            event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window)
                .scrollLeft();
            event_state.mouse_y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window)
                .scrollTop();
            // This is a fix for mobile safari
            // For some reason it does not allow a direct copy of the touches property
            if (typeof e.originalEvent.touches !== 'undefined') {
                event_state.touches = [];
                $.each(e.originalEvent.touches, function (i, ob) {
                    event_state.touches[i] = {};
                    event_state.touches[i].clientX = 0 + ob.clientX;
                    event_state.touches[i].clientY = 0 + ob.clientY;
                });
            }
            event_state.evnt = e;
        };
        resizing = function (e) {
            var mouse = {},
                width, height, left, top, offset = $container.offset();
            mouse.x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
            mouse.y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();
            // Position image differently depending on the corner dragged and constraints
            if ($(event_state.evnt.target).hasClass('resize-handle-se')) {
                width = mouse.x - event_state.container_left;
                height = mouse.y - event_state.container_top;
                left = event_state.container_left;
                top = event_state.container_top;
            } else if ($(event_state.evnt.target).hasClass('resize-handle-sw')) {
                width = event_state.container_width - (mouse.x - event_state.container_left);
                height = mouse.y - event_state.container_top;
                left = mouse.x;
                top = event_state.container_top;
            } else if ($(event_state.evnt.target).hasClass('resize-handle-nw')) {
                width = event_state.container_width - (mouse.x - event_state.container_left);
                height = event_state.container_height - (mouse.y - event_state.container_top);
                left = mouse.x;
                top = mouse.y;
                if (constrain || e.shiftKey) {
                    top = mouse.y - ((width / orig_src.width * orig_src.height) - height);
                }
            } else if ($(event_state.evnt.target).hasClass('resize-handle-ne')) {
                width = mouse.x - event_state.container_left;
                height = event_state.container_height - (mouse.y - event_state.container_top);
                left = event_state.container_left;
                top = mouse.y;
                if (constrain || e.shiftKey) {
                    top = mouse.y - ((width / orig_src.width * orig_src.height) - height);
                }
            }
            // Optionally maintain aspect ratio
            if (constrain || e.shiftKey) {
                height = width / orig_src.width * orig_src.height;
            }
            if (width > min_width && height > min_height && width < max_width && height < max_height) {
                // To improve performance you might limit how often resizeImage() is called
                resizeImage(width, height);
                // Without this Firefox will not re-calculate the the image dimensions until drag end
                $container.offset({
                    'left': left,
                    'top': top
                });
            }
        }
        resizeImage = function (width, height) {
            $(image_target).width(width).height(height);
        };
        resizeImageCanvas = function (width, height) {
            resize_canvas.width = width;
            resize_canvas.height = height;
            resize_canvas.getContext('2d').drawImage(orig_src, 0, 0, width, height);
            $(image_target).attr('src', resize_canvas.toDataURL("image/png"));
            //$(image_target).width(width).height(height);
        };
        startMoving = function (e) {
            e.preventDefault();
            e.stopPropagation();
            saveEventState(e);
            $(document).on('mousemove touchmove', moving);
            $(document).on('mouseup touchend', endMoving);
        };
        endMoving = function (e) {
            e.preventDefault();
            $(document).off('mouseup touchend', endMoving);
            $(document).off('mousemove touchmove', moving);
        };
        moving = function (e) {
            var mouse = {},
                touches;
            e.preventDefault();
            e.stopPropagation();
            touches = e.originalEvent.touches;
            mouse.x = (e.clientX || e.pageX || touches[0].clientX) + $(window).scrollLeft();
            mouse.y = (e.clientY || e.pageY || touches[0].clientY) + $(window).scrollTop();
            $container.offset({
                'left': mouse.x - (event_state.mouse_x - event_state.container_left),
                'top': mouse.y - (event_state.mouse_y - event_state.container_top)
            });
            // Watch for pinch zoom gesture while moving
            if (event_state.touches && event_state.touches.length > 1 && touches.length > 1) {
                var width = event_state.container_width,
                    height = event_state.container_height;
                var a = event_state.touches[0].clientX - event_state.touches[1].clientX;
                a = a * a;
                var b = event_state.touches[0].clientY - event_state.touches[1].clientY;
                b = b * b;
                var dist1 = Math.sqrt(a + b);
                a = e.originalEvent.touches[0].clientX - touches[1].clientX;
                a = a * a;
                b = e.originalEvent.touches[0].clientY - touches[1].clientY;
                b = b * b;
                var dist2 = Math.sqrt(a + b);
                var ratio = dist2 / dist1;
                width = width * ratio;
                height = height * ratio;
                // To improve performance you might limit how often resizeImage() is called
                resizeImage(width, height);
            }
        };
        crop = function () {
            //Find the part of the image that is inside the crop box
            var crop_canvas,
                left = $('.overlay').offset().left - $container.offset().left,
                top = $('.overlay').offset().top - $container.offset().top,
                width = $('.overlay').width(),
                height = $('.overlay').height();
            crop_canvas = document.createElement('canvas');
            crop_canvas.width = width;
            crop_canvas.height = height;
            crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);
            var dataURL = crop_canvas.toDataURL("image/png");
            image_target.src = dataURL;
            orig_src.src = image_target.src;
            $(image_target).bind("load", function () {
                $(this).css({
                    width: width,
                    height: height
                }).unbind('load').parent().css({
                    top: $('.overlay').offset().top - $('.crop-wrapper').offset().top,
                    left: $('.overlay').offset().left - $('.crop-wrapper').offset().left
                })
            });
            //window.open(crop_canvas.toDataURL("image/png"));
        }
        init();
    };

.rotate90 {
       transform: rotate(90deg);
      }
      .rotate180 {
       transform: rotate(180deg);
      }
      .rotate270 {
       transform: rotate(270deg);
      }
        </style>

    document.getElementById('preloader').style.display = 'block';
    document.getElementById('addToCartButton').style.display = 'none';
    // Get base64URL
    var image = "";
    var full_image = "";
    $("html, body").scrollTop(0);
    $("#html-content-holder").css("height", "");
    //$("#selectedImage").css("height", "100%");
    if (document.getElementById("category_id").value == 'customize back cover') {
        //console.log("652")
        await html2canvas(document.getElementById("html-content-holder")).then(function (canvas) {
            document.body.appendChild(canvas);
            var base64URL = canvas.toDataURL('image/jpeg');
            full_image = base64URL;
            image = document.getElementById('selectedImage').src;
        });
    }
    console.log("646", full_image); //the image is getting cropped
    $("#html-content-holder").css("height", "325px");
    // $.ajax({
    //     type: "POST",
    //     url: "http://localhost:8000/add_to_cart", // You add the id of the post and the update datetime to the url as well
    //     data: {
    //         _token: document.getElementById('token').value,
    //         user_id: document.getElementById('user_id').value,
    //         product_id: document.getElementById('product').value,
    //         quantity: document.getElementById('quantity').value,
    //         image: image,
    //         full_image: full_image
    //     },
    //     success: function (response) {
    //         // If not false, update the post
    //         //console.log(response);
    //         swal({
    //             title: response.data.status,
    //             text: response.data.message,
    //             icon: response.data.status,
    //         });
    //         if(response.data.status == "error")
    //         {
    //         document.getElementById('addToCartButton').style.display = 'block';
    //         document.getElementById('preloader').style.display = 'none';
    //         }
    //         else
    //     {
    //         document.getElementById('itemInCartLink').style.display = 'block';
    //         document.getElementById('addToCartButton').style.display = 'none';
    //         document.getElementById('preloader').style.display = 'none';
    //     }
    //     }
    // });
}