0
ファブリックjsでは、特定のキャンバスとそのオブジェクトをダウンロードできます。しかし、別のキャンバスの上にキャンバスが1つあれば、キャンバスの上に置くので、キャプチャしません。position：absolute;（css）ので、すべてのキャンバスがダウンロードされていません。これを行う別の方法がありますか？ファブリックjsの別のキャンバスの後ろにキャンバスをキャプチャしないダウンロード
マイHTMLコーディングは、私は上記のコードを参照して、私を返信..
してくださいコードの下にdocument.getElementById('save').addEventListener('click', function() {
// var canvas = getCanvas();
main_canvas.deactivateAll().renderAll();
downloadJpg(this, main_canvas, 'download.jpeg');
function downloadJpg(link,canvasId,filename) {
var img = main_canvas.toDataURL({
format: 'jpeg',
quality: 0.8
});
link.href = img;
link.download=filename;
}
},false);
を使用し、ダウンロードするために
var main_canvas = new fabric.Canvas('canvas_img'),
width = $('.main_canvas').width(),
height = $('.main_canvas').height(), //580
img = $('#canvas_img').attr('data-image'),
name = "phone";
main_canvas.setWidth(width);
main_canvas.setHeight(height);
main_canvas.controlsAboveOverlay = true;
main_canvas.selection = false;
main_canvas.lockUniScaling = true;
main_canvas.centeredScaling = true;
fabric.Image.fromURL(img, function(oImg) {
if ($(window).width() < 800) {
oImg.set({
width: oImg.getWidth()/1.4,
height: oImg.getHeight()/1.4,
});
} else {
oImg.set({
width: oImg.getWidth(),
height: oImg.getHeight(),
});
}
});
main_canvas.setOverlayImage(img, main_canvas.renderAll.bind(main_canvas),{
name: name,
// width: width,
// height: height,
originX: 'left',
originY: 'top'
});
main_canvas.setBackgroundColor('#fff');
var XML = '<?xml version="1.0" encoding="utf-8"?>';
XML += '<views>';
XML += '<view>';
XML += '<view_type>1</view_type>';
XML += '<canvas>';
XML += '<canvas_id>canvas1</canvas_id>';
XML += '</canvas>';
XML += '<canvas>';
XML += '<canvas_id>canvas2</canvas_id>';
XML += '</canvas>';
XML += '<canvas>';
XML += '<canvas_id>canvas3</canvas_id>';
XML += '</canvas>';
XML += '<canvas>';
XML += '<canvas_id>canvas4</canvas_id>';
XML += '</canvas>';
XML += '<canvas>';
XML += '<canvas_id>canvas5</canvas_id>';
XML += '</canvas>';
XML += '<canvas>';
XML += '<canvas_id>canvas6</canvas_id>';
XML += '</canvas>';
XML += '</view>';
XML += '</views>';
XML += '</xml>';
var canvasArray = fabricCanvasArray = ctxArray = [];
var canvas = null;
var activeCanvas = activeObject = canvasStr = '';
var firstView = true;
$(XML).find('view').each(function() {
var canvasXMLCnt = 0;
var viewType = $(this).find('view_type').text();
var divID = 'dynamicDiv_'+viewType;
createDynamicDiv(divID);
$(this).find('canvas').each(function() {
canvasXMLCnt++;
var canvasID = $(this).find('canvas_id').text();
var variable_DynamicCanvas = 'canvas_'+viewType+'_'+canvasXMLCnt;
var dynamicCanvas = document.createElement('canvas');
dynamicCanvas.id = variable_DynamicCanvas;
dynamicCanvas.className = ' dynamic-canvases';
var createdDiv = document.getElementById(divID);
createdDiv.appendChild(dynamicCanvas);
canvasArray.push(variable_DynamicCanvas);
});
});
function createDynamicDiv(divID) {
if ($('#'+divID).length == 0) {
var dynamicDiv = document.createElement('div');
dynamicDiv.id = divID;
dynamicDiv.className = 'col-md-12 canvas-div';
// createAddIcon(divID, dynamicDiv);
$('.collage_wr').append(dynamicDiv);
if(firstView != false) {
$("#"+divID).show();
} else {
$("#"+divID).hide();
}
firstView = false;
}
}
if (typeof canvasArray !== 'undefined' && canvasArray.length > 0) {
for (var i in canvasArray){
var thisCanvasID = canvasArray[i];
fabricCanvasArray[i] = new fabric.Canvas(canvasArray[i], {
isDrawingMode : false,
width : '90',
height : '90',
id : thisCanvasID
});
$('#' + thisCanvasID).parent().attr('id', ('div_' + thisCanvasID));
$('#' + thisCanvasID).parent().addClass('collage_container');
canvasStr += '#div_' + thisCanvasID;
if (i < canvasArray.length - 1){
canvasStr += ',';
}
}
if (typeof fabricCanvasArray !== 'undefined' && fabricCanvasArray.length > 0) {
canvasDivMouseUp();
}
}
<div class="main_canvas">
<canvas id="canvas_img" data-image="google-nexus-5x.png"></canvas>
<div class="collage_wr">
</div>
</div>
<a href="javascript:void(0);" class="save-image" id="save">Save</a>
私のJSがコーディングされています