Así que estoy siguiendo una publicación en stackoverflow Convert Text to Image usando javascript pero en vue Js. Parece que no puedo hacer que esto funcione, me está arrojando este error
serve.vue?bf12:27 Uncaught TypeError: Cannot read properties of null (reading 'getContext') at eval (serve.vue?bf12:27:1) at Object../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./dev/serve.vue?vue&type=script&lang=js (app.js:997:1) at __webpack_require__ (app.js:849:30) at fn (app.js:151:20) at eval (serve.vue?5c0c:1:1) at Module../dev/serve.vue?vue&type=script&lang=js (app.js:962:1) at __webpack_require__ (app.js:849:30) at fn (app.js:151:20) at eval (serve.vue?061e:1:1)Aquí está mi código, es bastante simple
<template> <div id="app"> <canvas id="textCanvas" height="20" /> <img id="image" /> <br /> <textarea id="text" /> </div> </template> <script> var tCtx = document.getElementById("textCanvas").getContext("2d"), //Hidden canvas imageElem = document.getElementById("image"); document.getElementById("text").addEventListener( "keyup", function () { tCtx.canvas.width = tCtx.measureText(this.value).width; tCtx.fillText(this.value, 0, 10); imageElem.src = tCtx.canvas.toDataURL(); console.log(imageElem.src); }, false ); </script>El motor de representación no ha representado el HTML en el momento en que realiza la llamada a documents.getElementById('textCanvas') .
De hecho, para ser honesto, su código no es Vue en absoluto. Vue tiene un gancho de por vida mounted , que ocurre cuando el motor de renderizado ha terminado de renderizar el componente. Para usar esto, convertiría el código anterior a Vue real.
Algo parecido a esto:
<template> <div id="app"> <canvas ref="canvas" height="20" /> <img id="image" /> <br /> <textarea @keyup="handleKeyUp" /> </div> </template> <script> export default { computed: { canvas() { return this.$refs.canvas; }; }, methods: { handleKeyUp() { // Do your thing with "this.canvas" } } } </script>Realmente le sugiero que aprenda el concepto básico y la sintaxis de Vue, antes de aventurarse en algo como esto.