javascript - 将 Div 保存为 JPG 保存但某些内容为空/空白
问题描述
我有一个小应用程序(所有代码如下)应该复制c0
到其他画布并允许打印;后者是目前唯一不起作用的部分。我的意思是,它保存了一个图像,但是当我在我的计算机上打开它时,传输的画布显示为空白。
这是为什么?提前致谢。
var canvas = [],
image;
var mainCanvas;
mainCanvas = new fabric.Canvas('c0');
for (i = 1; i <= 3; i++) {
canvas[i] = new fabric.StaticCanvas('sc' + i);
}
function addText() {
var text = new fabric.IText('Type here...', {
fontSize: 27,
top: 10,
left: 10,
});
mainCanvas.add(text);
}
var rect = new fabric.Rect({
fill: '#ff0000',
width: 100,
height: 100,
id: 1
});
var circle = new fabric.Circle({
fill: '#ffff00',
radius: 50,
left: 150,
top: 150,
originX: 'center',
originY: 'center',
id: 2
});
mainCanvas.on('object:added', onModified);
mainCanvas.on('object:modified', onModified);
mainCanvas.on('object:scaling', onModified);
mainCanvas.on('object:moving', onModified);
mainCanvas.add(rect, circle);
function onModified(option) {
var ob = option.target;
var index = mainCanvas.getObjects().indexOf(ob);
ob.clone(function(obj) {
for (i = 1; i <= 3; i++) {
canvas[i].insertAt(obj, index, true);
}
});
};
$('#update').click(function() {
updateCanvas();
});
function updateCanvas() {
var json = JSON.stringify(mainCanvas);
for (i = 1; i <= 3; i++) {
canvas[i].loadFromJSON(json);
}
}
// Toggling Images
function replaceImage(imgUrl) {
if (!isImageLoaded) return; //return if initial image not loaded
image.setSrc(imgUrl, function() {
mainCanvas.renderAll();
updateCanvas();
});
}
// Default (Blank)
fabric.Image.fromURL('https://i.imgur.com/SamdNdX.png', function(img) {
isImageLoaded = true;
image = img.set({
selectable: false,
evented: false,
});
mainCanvas.add(image);
mainCanvas.sendToBack(image);
updateCanvas();
});
$('#save').click(function() {
html2canvas($('#imagesave'), {
onrendered: function(canvas) {
var a = document.createElement('a');
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.download = 'myfile.jpg';
a.click();
}
});
});
html * {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
}
canvas {
margin: 0px;
display: block;
padding: 0;
}
td,
tr {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
}
#imagesave {
background-color: white;
height: 637.5px;
width: 825px;
padding-left: 75px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<button onclick="addText();" class="dropdown-item">Add Text</button><button id="save">Save</button>
<button onclick="replaceImage('https://i.imgur.com/SamdNdX.png')">Blank</button>
<button onclick="replaceImage('https://i.imgur.com/TIINd6E.png')">Hands Pic</button>
<div id="imagesave">
<table>
<tr>
<td>
<canvas id="c0" width="187.5" height="636"></canvas>
</td>
<td>
<canvas id="sc1" width="187.5" height="636"></canvas>
</td>
<td>
<canvas id="sc2" width="187.5" height="636"></canvas>
</td>
<td>
<canvas id="sc3" width="187.5" height="636"></canvas>
</td>
</tr>
</table>
</div>
解决方案
你的布艺画布被你画在上面的图像弄脏了;html2canvas因此不会绘制这些,因为它们也会污染生成的画布。
crossOrigin
由于您的图像使用正确的标头提供,因此解决方案是使用标志请求它们。
你会在最初的 fabric.Image 调用中都这样做
fabric.Image.fromURL( url, callback, { crossOrigin: true } )
并在replaceImage
函数中
image.setSrc( imgUrl, callback, { crossOrigin: true } );
var canvas = [],
image;
var mainCanvas;
mainCanvas = new fabric.Canvas('c0');
for (i = 1; i <= 3; i++) {
canvas[i] = new fabric.StaticCanvas('sc' + i);
}
function addText() {
var text = new fabric.IText('Type here...', {
fontSize: 27,
top: 10,
left: 10,
});
mainCanvas.add(text);
}
var rect = new fabric.Rect({
fill: '#ff0000',
width: 100,
height: 100,
id: 1
});
var circle = new fabric.Circle({
fill: '#ffff00',
radius: 50,
left: 150,
top: 150,
originX: 'center',
originY: 'center',
id: 2
});
mainCanvas.on('object:added', onModified);
mainCanvas.on('object:modified', onModified);
mainCanvas.on('object:scaling', onModified);
mainCanvas.on('object:moving', onModified);
mainCanvas.add(rect, circle);
function onModified(option) {
var ob = option.target;
var index = mainCanvas.getObjects().indexOf(ob);
ob.clone(function(obj) {
for (i = 1; i <= 3; i++) {
canvas[i].insertAt(obj, index, true);
}
});
};
$('#update').click(function() {
updateCanvas();
});
function updateCanvas() {
var json = JSON.stringify(mainCanvas);
for (i = 1; i <= 3; i++) {
canvas[i].loadFromJSON(json);
}
}
// Toggling Images
function replaceImage(imgUrl) {
if (!isImageLoaded) return; //return if initial image not loaded
image.setSrc(imgUrl, function() {
mainCanvas.renderAll();
updateCanvas();
},{ crossOrigin: 'anonymous' } );
}
// Default (Blank)
fabric.Image.fromURL('https://i.imgur.com/SamdNdX.png', function(img) {
isImageLoaded = true;
image = img.set({
selectable: false,
evented: false,
});
mainCanvas.add(image);
mainCanvas.sendToBack(image);
updateCanvas();
},{ crossOrigin: 'anonymous' });
$('#save').click(function() {
html2canvas($('#imagesave'), {
onrendered: function(canvas) {
var a = document.createElement('a');
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.download = 'myfile.jpg';
a.click();
}
});
});
html * {
margin: 0px;
padding: 0px;
background: white;
}
body {
margin: 0px;
padding: 0px;
}
canvas {
margin: 0px;
display: block;
padding: 0;
}
td,
tr {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
}
#imagesave {
background-color: white;
height: 637.5px;
width: 825px;
padding-left: 75px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<button onclick="addText();" class="dropdown-item">Add Text</button><button id="save">Save</button>
<button onclick="replaceImage('https://i.imgur.com/SamdNdX.png')">Blank</button>
<button onclick="replaceImage('https://i.imgur.com/TIINd6E.png')">Hands Pic</button>
<div id="imagesave">
<table>
<tr>
<td>
<canvas id="c0" width="187.5" height="636"></canvas>
</td>
<td>
<canvas id="sc1" width="187.5" height="636"></canvas>
</td>
<td>
<canvas id="sc2" width="187.5" height="636"></canvas>
</td>
<td>
<canvas id="sc3" width="187.5" height="636"></canvas>
</td>
</tr>
</table>
</div>
另请注意,您的 html2canvas 版本已经过时,您可能希望使用已修复许多错误的最新版本(虽然不是这个问题)。
推荐阅读
- javascript - 赛普拉斯 - 如果发生 console.error 则让测试失败
- sql - 在列数相等的表上应用 UNION 时出现“无法创建行...大于允许的最大行大小”错误
- domain-driven-design - 如果领域包括技术,技术可以成为领域模型的一部分吗?
- javascript - 如何访问Angular中对象数组中的数组?
- flutter - 在颤振日期范围选择器中将两个日期之间的所有日期作为列表返回
- javascript - Javascript 中的嵌套过滤器
- reactjs - 如何为洞反应应用程序导入一次scss模块?
- c# - 如何在treeview wpf上使用INotifyPropertyChanged
- javascript - 在javascript中落在另一个对象上后旋转的对象
- swift - 字符串的颜色部分