Холст HTML5 с предопределенным изображением

Question

Недавно я начал работать над холстом HTML5, я новичок в нем. Я проблему следующим образом:

Я загружая Холст с Chart Body Image (Предустановленные изображения) и на этом пользователь будет Нарисуйте несколько линий, фигур и т.д.

После этого я буду генерировать изображение объекта следующим

var canvas = document.getElementById("MyCanvas"); 
var dataURL = canvas.toDataURL(); 
var image = new Image(); 
image.src = dataURL; 

Но, здесь он генерирует только те элементы, которые нарисованные пользователями (линии, формы) как PNG изображения. Это не займет предопределенного фонового изображения холста.

Мне нужно сгенерировать PNG-изображение, которое должно содержать как изображение холста, так и пользовательские элементы чертежа.

Как это сделать?

Answer 1

Try на самом деле нарисовать вам изображение на холсте, используя следующие функции:

var canvas = document.getElementById("MyCanvas"); 
    var img = new Image(); 
    img.src = 'pathToYourImageHere'; 
    canvas.drawImage(img,0,0); /* 0,0 is x and y from the top left */ 

Теперь, когда Вы пытаетесь сохранить его, он должен также сохранить фоновое изображение.

EDIT: В ответ на ваш комментарий:

Вы можете circument вашей проблемы наслоения с помощью два различных холстов. Один для изображения, и один для вашего рисунка. Затем сложите их поверх друг друга, используя абсолютное позиционирование. Вы можете прочитать здесь: Save many canvas element as image

EDIT2: Но на самом деле вы не должны иметь проблемы наслоения, так как следующий код будет первым нарисовать изображение, а затем нарисовать дугу, и наслоение будет хорошо:

var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
var imageObj = new Image(); 
imageObj.src = "somePathToAnImage"; 
context.drawImage(imageObj, 50, 50); 

var x = canvas.width/2; 
var y = canvas.height/2; 
var radius = 75; 
var startAngle = 1.1 * Math.PI; 
var endAngle = 1.9 * Math.PI; 
var counterClockwise = false; 

context.beginPath(); 
context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
context.lineWidth = 15; 
// line color 
context.strokeStyle = "red"; 
context.stroke(); 

Несмотря на то, что слоирование в порядке, вам будет лучше с помощью двух холстов, если вы хотите сохранить только рисунок без фона. Вы всегда можете сохранить оба в новый холст и сохранить это, когда вы используете только один холст, вам будет трудно отделить рисунок от фона.

Answer 2

Это потому, что изображение требует времени для загрузки, вы должны использовать функцию onload.

imgObj.onload = function() { context.drawImage(imageObj, 50, 50); imgLoaded = true;} 
if (imgLoaded) { /*you draw shapes here */ }