在使用 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>
我已经尝试了上述和所有相关建议,但没有一个对我有用。我希望图像能够在任何设备上以任何尺寸添加到画布中,并在保存后完美显示,这意味着它应该无缝地合并到画布中。此外,在桌面设备上,图像应该完美显示,并且从任何设备上传时,它应该在任何其他设备上完美显示。
欢迎来到SO。
如果没有更多的工作,就无法实现上传的图像在所有设备上完美显示的愿望(不完全是您所说的,但似乎是您的意思)。研究缩放图像时会发生什么。减小尺寸时会丢失图像信息,而增大图像尺寸时会根据新像素颜色的算法选择添加图像信息。两者均不保留初始图像的原始质量。完美的唯一方法是预先准备好所有可能的输出尺寸的图像。