Не удается получить текст на холсте - PullRequest
0 голосов
/ 07 июня 2019

вызов canvas.getContext('2d); выдает ошибку, что холст не определен

var canvas = document.getElementById('sbspdfviewer');
canvas.getContext('2d');

Я вижу, что объект canvas - это мой объект canvas, который я определил

но когда я звоню getContext('2d'), я получаю холст не определено .. Все примеры, которые я вижу, показывают, что я делаю это правильно ..

тег canvas скрыт внутри некоторых тегов div ... но это единственный тег canvas на странице Здесь тэг canvas равен

<div id="pdfcontainer" class="collapse collapsed">
   <div  class="panel panel-primary">
     <div class="panel-heading">
        <h3 class="panel-title">Document Review</h3>
    </div>
    <div class="panel-body">
        <div id="pdfviewcontainer" class="row" >
            <div class="col-lg-8 border">
                    <canvas id="sbspdfviewer" style="width: 100%"></canvas>
             </div>
             <div id="codes" class="col-lg-4 border">
                    <div class="padding"></div>
                    <div class="dataTable_wrapper">
                        <table class="table table-striped table-bordered table-hover"
                            id="patientdocumentcodestable" style="width: 100%">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Preferred Text</th>
                                    <th>Node</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
            </div>
        </div>
    </div>
</div>

canvas: canvas#sbspdfviewer
accessKey: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 1}
attributes: NamedNodeMap {0: id, 1: style, id: id, style: style, length: 2}
autocapitalize: ""
baseURI: "http://localhost:8080/invenio/gui/findpatients.jsp"
childElementCount: 0
childNodes: NodeList []
children: HTMLCollection []
classList: DOMTokenList [value: ""]
className: ""
clientHeight: 0
clientLeft: 0
clientTop: 0
clientWidth: 0
contentEditable: "inherit"
dataset: DOMStringMap {}
dir: ""
draggable: false
firstChild: null
firstElementChild: null
height: 150
hidden: false
id: "sbspdfviewer"
innerHTML: ""
innerText: ""
inputMode: ""
isConnected: true
isContentEditable: false
lang: ""
lastChild: null
lastElementChild: null
localName: "canvas"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: text
nodeName: "CANVAS"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 0
offsetLeft: 0
offsetParent: null
offsetTop: 0
offsetWidth: 0
onabort: null
onauxclick: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
onfullscreenchange: null
onfullscreenerror: null
ongotpointercapture: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onlostpointercapture: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onpointercancel: null
onpointerdown: null
onpointerenter: null
onpointerleave: null
onpointermove: null
onpointerout: null
onpointerover: null
onpointerup: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onsearch: null
onseeked: null
onseeking: null
onselect: null
onselectionchange: null
onselectstart: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
onvolumechange: null
onwaiting: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwheel: null
outerHTML: "<canvas id="sbspdfviewer" style="width: 100%"></canvas>"
outerText: ""
ownerDocument: document
parentElement: div.col-lg-8.border
parentNode: div.col-lg-8.border
part: DOMTokenList [value: ""]
prefix: null
previousElementSibling: null
previousSibling: text
scrollHeight: 0
scrollLeft: 0
scrollTop: 0
scrollWidth: 0
shadowRoot: null
slot: ""
spellcheck: true
style: CSSStyleDeclaration {0: "width", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
tabIndex: -1
tagName: "CANVAS"
textContent: ""
title: ""
translate: true
width: 300
__proto__: HTMLCanvasElement

Ответы [ 3 ]

0 голосов
/ 07 июня 2019

Работает нормально для меня.
Я подозреваю, что вы можете попытаться получить контекст холста до полной загрузки страницы.
Приведенный ниже код показывает один из способов ожидания загрузки страницы, прежде чем пытаться получить холст..

document.addEventListener("DOMContentLoaded", function() {
  var canvas = document.getElementById('sbspdfviewer');
  var context = canvas.getContext('2d');
  console.log(context);
});
<div id="pdfcontainer" class="collapse collapsed">
   <div  class="panel panel-primary">
     <div class="panel-heading">
        <h3 class="panel-title">Document Review</h3>
    </div>
    <div class="panel-body">
        <div id="pdfviewcontainer" class="row" >
            <div class="col-lg-8 border">
                    <canvas id="sbspdfviewer" style="width: 100%"></canvas>
             </div>
             <div id="codes" class="col-lg-4 border">
                    <div class="padding"></div>
                    <div class="dataTable_wrapper">
                        <table class="table table-striped table-bordered table-hover"
                            id="patientdocumentcodestable" style="width: 100%">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Preferred Text</th>
                                    <th>Node</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
            </div>
        </div>
    </div>
</div>
0 голосов
/ 07 июня 2019

Да, это была моя собственная ошибка .. Я неправильно использовал это ключевое слово .. холст был определен как this.canvas = document.getElementById ('myid'), а затем я сделал ctx = canvas.getContext ('2d')вместо this.canvas.getContext ('2d').

Извините ... это был длинный день

0 голосов
/ 07 июня 2019

Вы не предоставили код для проверки ошибки, поэтому я предложу две вещи на основе сообщения об ошибке, которое не определено:

  1. Идентификатор неверен либо в коде JS, либо в HTMLtag.
  2. Файл Javascript неправильно связан с файлом HTML

проверьте их, прочитайте документацию к холсту и проверьте примеры: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage

Надеюсь, это поможет вам

...