在 .NET Core 中使用 Konva.js 和 HTML5 Canvas 在移动和桌面上出现图像扭曲问题

Question

在使用 Konva.js 进行画布操作的 .NET Core 项目中将徽标放置在画布上时，我遇到了严重的图像失真问题。与桌面设备相比，这个问题在移动设备上更为明显。

在移动设备上：

徽标图像最初放置在画布上时显得略有扭曲。 保存图像后，畸变明显增大，内容无法正常显示。

在桌面设备上：

徽标图像最初放置在画布上时显得略有扭曲。 保存图像后，内容可见，但不够清晰。

$(document).ready(function () {
    debugger
    var x = 0;
    var y = 0;
    var objectOrgin = "";
    var stepname = $('.step-name').val();
    var productId = $('.product-id').val();
    var position = $('.position').val();
    var searchUrl = stepname == "sponsorlogo" ? '/umbraco/surface/DYO/GetCoOrdinatesForSponsorLogoWithObjectOrgin' : '/umbraco/surface/DYO/GetCoOrdinatesForClubLogoWithObjectOrgin';
    $.ajax({
        url: searchUrl,
        method: 'GET',
        data: { productId: productId, position: position },
        async: false,
        success: function (response) {
            if (response != null) {
                x = response.X;
                y = response.Y;
                objectOrgin = response.ObjectOrgin.toLowerCase();
            }
        },
        error: function (error) {
            console.log('Error:', error);
        }
    });

    var img = document.getElementsByClassName("hidden-image")[0];
    img.src = item.Image;
    var ImgURL = localStorage.getItem('MyLogoImage');
    var ResizedImage = new Image();
    ResizedImage.src = ImgURL;

    ResizedImage.onload = function () {
        var width = 749;
        var height = 496;
        var max_width = 650;
        var max_height = 430;
        if (ResizedImage.width > ResizedImage.height) {
            if (ResizedImage.width > max_width) {
                ResizedImage.height = Math.round(ResizedImage.height * (max_width / ResizedImage.width));
                ResizedImage.width = max_width;
            }
        } else {
            if (ResizedImage.height > max_height) {
                ResizedImage.width = Math.round(ResizedImage.width * (max_height / ResizedImage.height));
                ResizedImage.height = max_height;
            }
        }

        var stage = new Konva.Stage({
            container: 'MyLogocontainer',
            width: width,
            height: height
        });

        var layer = new Konva.Layer();
        stage.add(layer);
        var value = 0.4776785714285714;
        var adultDimensions = null;
        var selectedIndex = $('.selected-index').val();

        if (selectedIndex == "" || selectedIndex == undefined || selectedIndex == "undefined") {
            adultDimensions = extractAdultSizeDimensions(item);
        }
        else {
            var index = parseInt(selectedIndex);
            adultDimensions = extractAdultSizeDimensions(clublogoData[index]);
        }

        var finalAdultHeight = adultDimensions.height * value;
        var finalAdultWidth = adultDimensions.width * value;
        var adjustedX = x * value;
        var adjustedY = y * value;

        switch (objectOrgin) {
            case 'top':
                adjustedX -= finalAdultWidth / 2;
                break;
            case 'bottom':
                adjustedX -= finalAdultWidth / 2;
                adjustedY -= finalAdultHeight;
                break;
            case 'left':
                adjustedY -= finalAdultHeight / 2;
                break;
            case 'right':
                adjustedX -= finalAdultWidth;
                adjustedY -= finalAdultHeight / 2;
                break;
            case 'center':
                adjustedX -= finalAdultWidth / 2;
                adjustedY -= finalAdultHeight / 2;
                break;
            default:
                adjustedX -= finalAdultWidth / 2;
                adjustedY -= finalAdultHeight / 2;
                break;
        }

        var darthVaderImg = new Konva.Image({
            image: ResizedImage,
            x: adjustedX,
            y: adjustedY,
            width: finalAdultWidth,
            height: finalAdultHeight
        });

        layer.add(darthVaderImg);
        layer.draw();

        function moveLogo(dx, dy) {
            var scale = stage.scaleX();
            adjustedX += dx * scale;
            adjustedY += dy * scale;
            darthVaderImg.setAttrs({
                x: adjustedX,
                y: adjustedY
            });
            layer.draw();
        }

        var rSaveButton = document.getElementById('rremoveallanchor');
        if (rSaveButton != undefined) {
            document.getElementById('rremoveallanchor').addEventListener('click', function () {
                saveResizedLogo();
            });
        }

        var rmoveUpBtn = document.getElementById('rmoveUpBtn');
        if (rmoveUpBtn) {
            document.getElementById('rmoveUpBtn').addEventListener('click', function () {
                moveLogo(0, -10);
            });
        }

        var rmoveDownBtn = document.getElementById('rmoveDownBtn');
        if (rmoveDownBtn) {
            document.getElementById('rmoveDownBtn').addEventListener('click', function () {
                moveLogo(0, 10);
            });
        }

        var rmoveLeftBtn = document.getElementById('rmoveLeftBtn');
        if (rmoveLeftBtn) {
            document.getElementById('rmoveLeftBtn').addEventListener('click', function () {
                moveLogo(-10, 0);
            });
        }

        var rmoveRightBtn = document.getElementById('rmoveRightBtn');
        if (rmoveRightBtn) {
            document.getElementById('rmoveRightBtn').addEventListener('click', function () {
                moveLogo(10, 0);
            });
        }

        function saveResizedLogo() {
            debugger
            var stage = document.querySelectorAll('canvas');
            var NewLogoImage = stage[1].toDataURL();
            localStorage.setItem("MyResizedLogo", NewLogoImage);
        }


        var saveButton = document.getElementById('removeallanchor');
        if (saveButton != undefined) {
            document.getElementById('removeallanchor').addEventListener('click', function () {
                saveResizedLogo();
            });
        }

        var moveUpBtn = document.getElementById('moveUpBtn');
        if (moveUpBtn) {
            document.getElementById('moveUpBtn').addEventListener('click', function () {
                moveLogo(0, -10);
            });
        }

        var moveDownBtn = document.getElementById('moveDownBtn');
        if (moveDownBtn) {
            document.getElementById('moveDownBtn').addEventListener('click', function () {
                moveLogo(0, 10);
            });
        }

        var moveLeftBtn = document.getElementById('moveLeftBtn');
        if (moveLeftBtn) {
            document.getElementById('moveLeftBtn').addEventListener('click', function () {
                moveLogo(-10, 0);
            });
        }

        var moveRightBtn = document.getElementById('moveRightBtn');
        if (moveRightBtn) {
            document.getElementById('moveRightBtn').addEventListener('click', function () {
                moveLogo(10, 0);
            });
        }

        function fitStageIntoParentContainer() {
            var container = document.querySelector('#CcanvasWrapper');
            var containerWidth = container.offsetWidth;
            var scale = containerWidth / width;
            stage.width(width * scale);
            stage.height(height * scale);
            stage.scale({ x: scale, y: scale });
            stage.draw();
        }
        fitStageIntoParentContainer();
        window.addEventListener('resize', fitStageIntoParentContainer);
    }
});
<div class="dyo_right">
     <div class="main_right_dyo right_creating_shirt">
         <div class="tshirt_sec">
             <img crossOrigin="Anonymous" id="canvasImg" src="@base64String" alt="" style="display:none" class="hidden-xs">
             <img crossOrigin="Anonymous" id="previousImgtest" alt="" style="display:none" class="hidden-xs" />
             <img crossOrigin="Anonymous" id="previousImg" alt="" style="display:none" class="hidden-xs" />

             <img id="numberImage" src="" alt="" style="display:none" class="hidden-xs" />
             <div id="CcanvasWrapper">
                 <canvas width="749" height="496" id="canvas1" style="z-index:1000;"></canvas>
                 <div id="MyLogocontainer" class="resize-img"></div>
             </div>
             <canvas id="canvas2" width="749" height="496" style="display:none"></canvas>
         </div>
     </div>
 </div>

我已经尝试了上述和所有相关建议，但没有一个对我有用。我希望图像能够在任何设备上以任何尺寸添加到画布中，并在保存后完美显示，这意味着它应该无缝地合并到画布中。此外，在桌面设备上，图像应该完美显示，并且从任何设备上传时，它应该在任何其他设备上完美显示。

Answer 1

欢迎来到SO。

如果没有更多的工作，就无法实现上传的图像在所有设备上完美显示的愿望（不完全是您所说的，但似乎是您的意思）。研究缩放图像时会发生什么。减小尺寸时会丢失图像信息，而增大图像尺寸时会根据新像素颜色的算法选择添加图像信息。两者均不保留初始图像的原始质量。完美的唯一方法是预先准备好所有可能的输出尺寸的图像。