konva框架
官网:http://konvajs-doc.bluehymn.com/
博客:https://www.cnblogs.com/le220/p/8391194.html
重置画布大小
js
// 函数来更新Stage的宽高
function resizeStage(newWidth, newHeight) {
stage.width(newWidth);
stage.height(newHeight);
stage.batchDraw(); // 重新渲染Stage
}
// 调用resizeStage函数设置新的宽高
resizeStage(800, 600); // 例如设置为800x600像素
重置背景图片
js
function resetBgImg() {
let newImageUrl = "https://images.unsplash.com/photo-1729512867577-0bae39b99503?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
// 加载新的图片
const newImageObj = new Image();
newImageObj.src = newImageUrl;
newImageObj.crossOrigin = 'Anonymous' ;
newImageObj.onload = function() {
backgroundImage.image(newImageObj);
// 更新显示
layer.batchDraw(); // 一次性重绘图层以提高性能
};
}
stage缩放
js
stage.scale({ x: 1, y: 1 });
function getScaleFactor(width, height) {
const fixedWidth = 500;
const fixedHeight = 300;
// 检查入参宽高是否都小于固定宽高
if (width < fixedWidth && height < fixedHeight) {
return 1;
}
// 计算比例
const widthScale = fixedWidth / width;
const heightScale = fixedHeight / height;
// 返回宽和高的最大比例
return Math.min(widthScale, heightScale);
}
// 示例使用
console.log(getScaleFactor(1000, 500)); // 输出 0.5
console.log(getScaleFactor(400, 250)); // 输出 1
简单Demo
html
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Image Demo</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/lxgwwenkaiscreen.css" media="print" onload="this.media='all'">
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
#container{
width: 500px;
height: 300px;
background: #4CAF50;
margin: 200px;
}
</style>
</head>
<body>
<input id="slider" type="range" min="0" max="180" step="1" value="20" />
<input id="slider2" type="range" min="0" max="1" step="0.1" value="1" />
<button id="setFont">设置字体</button>
<button id="save">Save as image</button>
<div id="container"></div>
<script>
var stage = new Konva.Stage({
container: 'container',
width: 500,
height: 300
});
var layer = new Konva.Layer();
var layer2 = new Konva.Layer();
stage.add(layer);
stage.add(layer2);
var slider = document.getElementById('slider');
var slider2 = document.getElementById('slider2');
// 加载图像
const imageObj = new Image();
imageObj.onload = function() {
const backgroundImage = new Konva.Image({
x: 0,
y: 0,
opacity: slider2.value, // 设置透明度
image: imageObj,
blurRadius: slider.value,
width: stage.width(),
height: stage.height(),
});
backgroundImage.cache();
backgroundImage.filters([Konva.Filters.Blur]);
// 将图像添加到图层
layer.add(backgroundImage);
// 绘制图层
layer.batchDraw();
slider.oninput = function() {
backgroundImage.blurRadius(slider.value);
layer.batchDraw();
};
slider2.oninput = function() {
backgroundImage.opacity(slider2.value);
layer.batchDraw();
};
};
// 替换为你的图像 URL
imageObj.crossOrigin = 'Anonymous' ;
imageObj.src = 'https://cn.bing.com/th?id=OHR.PointReyes_ROW4397514430_UHD.jpg&rf=LaDigue_UHD.jpg&pid=hp&w=3840&h=2160&rs=1&c=4';
var complexText = new Konva.Text({
text: "怎么在保持原有的清晰度的情况下将PNG转ICO???",
fontSize: 30,
fontFamily: 'LXGW WenKai Screen',
fill: '#fff', // 文本颜色
width: stage.width()/2,
// padding: 20,
verticalAlign: 'middle', // 设置文本垂直对齐方式
align: 'center'
});
// 获取文本的高度
const textHeight = complexText.getHeight();
// 文本居中
complexText.position({
x: (stage.width() - complexText.width()) / 2,
y: (stage.height() - textHeight) / 2
});
layer2.add(complexText);
layer2.draw();
function downloadURI(uri, name) {
var link = document.createElement('a');
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
}
document.getElementById('save').addEventListener(
'click',
function() {
var dataURL = stage.toDataURL({ pixelRatio: 1 });
downloadURI(dataURL, 'stage.png');
},
false
);
document.getElementById('setFont').addEventListener(
'click',
function() {
complexText.fontFamily("Ma Shan Zheng");
layer2.draw();
},
false
);
</script>
</body>
</html>