Я немного застрял, используя элемент canvas в html5, почесал сеть в поисках работоспособного решения, но безрезультатно!
Основная проблема заключается в том, что я хочу нажать кнопку и отправить только элемент canvas на странице на принтер.
Я пытался использовать toDataUrl () - но, похоже, это приводит к чистому белому изображению, в котором нет содержимого холста!
Другая проблема, с которой я сталкиваюсь, заключается в том, что попытка инициировать любые функции javascript с помощью «onClick», прикрепленного к кнопке формы, в лучшем случае кажется временной!
Вот моя текущая попытка - она работает в том смысле, что она открывает новое окно и пытается отправить его на принтер и создает строку base64 (проверил это с помощью вывода «dataUrl» во втором нижнем документе. напишите строку), но, как уже упоминалось, изображение выглядит совершенно пустым! (само полотно определенно заполнено как импортированным изображением, так и текстом)
function printCanv()
{
var dataUrl = document.getElementById('copy').toDataURL(); //attempt to save base64 string to server using this var
document.getElementById('testBox').value = dataUrl; //load data into textarea
//attempt open window and add canvas etc
win = window.open();
self.focus();
win.document.open();
win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');
win.document.write('body, td { font-family: Verdana; font-size: 10pt;}');
win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
((image code is here but site will not let me post it for some reason?))
win.document.write(dataUrl);
win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
win.document.close();
win.print();
win.close();
}
примечание: код от "win = window.open ()" и далее в настоящее время взят из учебника, а не из моей собственной работы!
в настоящее время он вызывается с помощью <body onload="printCanv";"> - по какой-то причине я вообще не мог заставить это работать, используя кнопку (небольшая часть кода ниже - моя попытка, которая, казалось, потерпела неудачу)
<input type="button" id="test" value="click me" onClick="printCanv();"> </input>
Приносим свои извинения, этот запрос помощи повсюду! Я не публиковал на сайте, как это раньше, и мне не нравилось, что я публиковал HTML / скрипт!
Заранее благодарим за любую помощь, которую вы можете предложить :)
Редактировать: функция рисования:
function copydraw() { //function called "copydraw" (could be anything)
var testimage3 = document.getElementById('copy').getContext('2d'); //declare variable for canvas overall (inc paths)
var img3 = new Image(); //declare image variable called "img3"
var testVar = document.getElementById('userIn').value; //take value from userin box. only updating on browser refresh?
img3.onload = function(){ //when image has loaded (img.onload) run this function
testimage3.drawImage(img3,0,0); //draw "img" to testimage
testimage3.font = "30pt 'Arial'"; //font method varies font attrib (weight, size, face)
testimage3.fillStyle = "#000000"; //sets fill color
testimage3.fillText(testVar, 310, 360); //filltext method draws text (xup ydown)
}
img3.src = 'images/liecakeA4.jpg'; //source of image
}
Эта функция работает отлично, она рисует объект и добавляет текст из переменной, но по какой-то причине, похоже, мешает мне вывести его в виде изображения. Я действительно запутался!