我将为我的学校使用Fabric.js创建一个类似twibbon的网站，这样学生们就可以发布一张图片，并将其与我的学校活动图片一起下载，然后分享给Instagram。
要以高分辨率下载图像并保持画布足够小以适合屏幕，我使用的是从另一个stackoverflow问题中找到的解决方案here
问题是画布仍然很小，但它按了我的div或按钮
以canvas.setWidth或setHeigth的值为单位。
我的页面看起来像。
我该怎么解决这个问题并把扣子拿回来？
这是我的代码：
.canvas-container canvas {
width: 400px !important;
height: 500px !important;
border: 1px solid blue;
}
body{
font-family: 'Helvetica', Tahoma, Geneva, Verdana, sans-serif;
}
h1{
color: rgb(119, 214, 124);
}
.site{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1em;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="cssTest.css">
<title>Twibbon</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
<script src="FileSaver.js"></script>
<script src="canvas-toBlob.js"></script>
</head>
<body>
<div class="site">
<h1 class="title">Fortafaste Campaign</h1>
<canvas id="c"></canvas>
<input type="file" id="d" class="button">
<input id="download" type="button" value="download" />
<h2 class="contact">instagram</h2>
</div>
<script>
var canvas = new fabric.Canvas('c');
canvas.setWidth(1080);
canvas.setHeight(1350);
var canvasWrapper = document.getElementById('c');
var canvasWrapperWidth = canvasWrapper.clientWidth;
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
fabric.Image.fromURL('twibbon2 fortafaste.png',function(img){
img.scaleToWidth(canvas.getWidth());
canvas.setOverlayImage(img, canvas.renderAll.bind(canvas));
});
function imageIsLoaded(e) {
fabric.Image.fromURL(e.target.result,function(img){
var aspectRatio = 1350/1080;
var factor = 1080 / img.width;
img.set({
scaleX: factor,
scaleY: factor
});
canvas.add(img);
canvas.sendToBack(img);
});
};
$("#download").click(function(){
$("#c").get(0).toBlob(function(blob){
saveAs(blob, "myIMG.png");
});
});
</script>
</body>
</html>最佳答案
我建议你简化你的设计。。。
将所有信息和操作按钮放在顶部和下面的画布上，下面是一个示例：
.canvas-container canvas {
width: 400px !important;
height: 500px !important;
border: 1px solid blue;
}
body{
font-family: 'Helvetica', Tahoma, Geneva, Verdana, sans-serif;
}
h1{
color: rgb(119, 214, 124);
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="cssTest.css">
<title>Twibbon</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
<script src="FileSaver.js"></script>
<script src="canvas-toBlob.js"></script>
</head>
<body>
<div class="site">
<div>
<h1 class="title">Fortafaste Campaign</h1>
<input type="file" id="d" class="button">
<input id="download" type="button" value="download" />
<h2 class="contact">instagram</h2>
</div>
<canvas id="c"></canvas>
</div>
<script>
var canvas = new fabric.Canvas('c');
canvas.setWidth(1080);
canvas.setHeight(1350);
var canvasWrapper = document.getElementById('c');
var canvasWrapperWidth = canvasWrapper.clientWidth;
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
fabric.Image.fromURL('twibbon2 fortafaste.png',function(img){
img.scaleToWidth(canvas.getWidth());
canvas.setOverlayImage(img, canvas.renderAll.bind(canvas));
});
function imageIsLoaded(e) {
fabric.Image.fromURL(e.target.result,function(img){
var aspectRatio = 1350/1080;
var factor = 1080 / img.width;
img.set({
scaleX: factor,
scaleY: factor
});
canvas.add(img);
canvas.sendToBack(img);
});
};
$("#download").click(function(){
$("#c").get(0).toBlob(function(blob){
saveAs(blob, "myIMG.png");
});
});
</script>
</body>
</html>