У меня есть 3 входных фоновых изображения, которые меняются при нажатии и заполняют область холста. Я загружаю другие изображения через ввод файла, размещая его поверх изображения bg. Когда я сохраняю холст в формате PNG, все изображения, кроме фонового изображения, отображаются. Я хочу, чтобы все изображения на холсте отображались и сохранялись в формате PNG.
Любая информация по этому вопросу будет принята с благодарностью :-)
JavaScript:
// Buttons onclick change background image of canvas
$(document).ready(function() {
$("#canvascolor > input").click(function() {
var img = $(this).attr('src');
$('#myCanvas').css("background-image", "url(" + img + ")");
});
});
// END Buttons onclick background image of canvas
var canvas = new fabric.Canvas('myCanvas', {
backgroundColor: 'transparent'
});
function renderImage(e) {
var imgUrl = URL.createObjectURL(e.target.files[0]);
fabric.Image.fromURL(imgUrl, function(img) {
// set default props
img.set({
width: 150,
height: 150,
top: 75,
left: 75,
transparentCorners: false
});
canvas.add(img);
canvas.renderAll();
});
}
function saveOnPC() {
var link = document.createElement('a');
link.href = canvas.toDataURL();
link.download = 'myImage.png';
link.click();
}
function click(el) {
// Simulate click on the element.
var evt = document.createEvent('Event');
evt.initEvent('click', true, true);
el.dispatchEvent(evt);
}
document.querySelector('#fileSelect').addEventListener('click', function(e) {
var fileInput = document.querySelector('#fileElem');
//click(fileInput); // Simulate the click with a custom event.
fileInput.click(); // Or, use the native click() of the file input.
}, false);
$('#remove').click(function() {
var object = canvas.getActiveObject();
if (!object) {
alert('Please select the element to remove');
return '';
}
canvas.remove(object);
});
HTML:
<canvas id="myCanvas" width="400" height="800"></canvas>
<section id="canvascolor">
<input id="bostonblue" class="canvasborder" type="image" src="https://s26.postimg.org/i3ibods55/blue.jpg">
<input id="bostonblack" class="canvasborder" type="image" src="https://s26.postimg.org/vlp803yzd/black.jpg">
<input id="bostonamber" class="canvasborder" type="image" src="https://s26.postimg.org/o5pyeao4p/amber.jpg">
</section>
canvas.toDataURL()21.02.20183 of themчто ты имеешь в виду, я сейчас в замешательстве и не могу понять, какие ошибки ты получаешь. 21.02.2018