Is it possible to render an SVG using PDFTron?

Before, I attempted to utilize an Annotation.StampAnnotation to make a personalized annotation while using an SVG as the foundation image. Unfortunately, I discovered that the StampAnnotation does not allow the user to alter or set the color. Thus, I have now switched to using an Annotation.MarkupAnnotation.

Presently, I am facing difficulties in drawing the inline SVG (string) on the CanvasRenderingContext2D using drawImage(). I came across some code on TutorialsPoint, and after testing it in a JavaScript sandbox, it seemed to work perfectly. However, when I integrated it with PDFTron, only an empty box was displayed on the PDF.

Below is the code snippet:

createCustomAnnotation: function (Annotations, annotManager, subject, inlineSVGString) {

        const CustomAnnotation = function () {
            Annotations.MarkupAnnotation.call(this);
            this.Subject = subject;
        }

        CustomAnnotation.prototype = new Annotations.MarkupAnnotation();

        CustomAnnotation.prototype.draw = function (ctx, pageMatrix) {
            this.setStyles(ctx, pageMatrix);

            var DOMURL = window.URL || window.webkitURL || window;
            var img = new Image();
            var svg = new Blob([inlineSVGString], {type: 'image/svg+xml'});
            var url = DOMURL.createObjectURL(svg);
            var x = this.X;
            var y = this.Y;
            img.onload = function() {
                ctx.drawImage(img, x, y, 30, 30);
                DOMURL.revokeObjectURL(url);
            }
            img.src = url;

        }

        return CustomAnnotation;
    }

I would greatly appreciate any assistance!

Many thanks!

Answer №1

there

It seems that the example code from Tutorials Point contains a syntax error, resulting in only an empty box being displayed. If you use this corrected sample, it will render the text properly.

<!DOCTYPE html>
<html>
   <head>
      <title>Displaying SVG file on HTML Canvas </title>
   </head>
   <body>
      <canvas id="myCanvas" style="border:2px solid green;" width="300" height="300"></canvas>
      <script>
         var canvas = document.getElementById('myCanvas');
         var ctx = canvas.getContext('2d');
         var data = '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">' +
            '<foreignObject width="100%" height="100%">' +
               '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:50px">' +
                  'Simply Easy ' +
                  '<span style="color:blue;">' +
                  'Learning</span>' +
               '</div>' +
            '</foreignObject>' +
         '</svg>';
         var DOMURL = window.URL || window.webkitURL || window;
         var img1 = new Image();
         var svg = new Blob([data], {type: 'image/svg+xml'});
         var url = DOMURL.createObjectURL(svg);
         img1.onload = function() {
            ctx.drawImage(img1, 25, 70);
            DOMURL.revokeObjectURL(url);
         }
         img1.src = url;
      </script>
   </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Express.js encountering an `ERR_HTTP_HEADERS_SENT` issue with a fresh Mongoose Schema

My Objective Is If data is found using the findOne() function, update the current endpoint with new content. If no data is found, create a new element with the Schema. Issue If there is no data in the database, then the first if statement throws an ERR_H ...

The Node.js promise failure can be unpredictable, despite being properly managed

In my journey to master MongoDB, I am currently exploring its capabilities by building a basic blog application. However, I have encountered an issue with the code responsible for saving blog posts - it seems to be inconsistent in its success rate, sometim ...

Utilize a for loop within a query to showcase a modal popup

I have a specific requirement: I want to display a modal popup window based on a for loop using jQuery. I have attempted the following approach, where I want the modal popup to be displayed based on the value of a flag. For example, if the Flag value is 3, ...

The power of relative URLs in AJAX calls

Why does Javascript handle relative URLs differently than standard HTML? Consider the URL provided: http://en.wikipedia.org/wiki/Rome. Launch a Firebug console (or any other Javascript console) and type in the following: var x = new XMLHttpRequest(); x.op ...

Angular 2 TypeScript: Accelerating the Increment Number Speed

I'm working with a function in Angular 4 that is triggered when the arrow down key is pressed. Each time the arrow down key is hit, the counter increments by 1. In this function, I need to run another function if the counter reaches a certain speed. ...

Is it possible to find out which JavaScript file the AJAX function is using to send a request to a Java servlet?

I am facing an issue with two js files, one.js and two.js. Both of these files make ajax requests to the same Java servlet class(AppController.java). Here is the code from one.js: function addOne(){ var formData = $('#form1').serialize(); ...

Exploring Node.js: Uncovering the Secrets of Checking Dependency Versions

How can I dynamically retrieve the version of an external dependency in JavaScript without manually specifying it? ...

What causes the Request.Params of IHttpHandler to be accurate on the initial call, but become null on the subsequent call?

My HTML/Javascript page utilizes a jQuery ajax call to communicate with a .NET ajax handler (.ASHX). The issue arises in subsequent calls where the parameters passed in the data object are unexpectedly NULL despite being correct during the first call. Her ...

What is the best way to transform a JSON object from a remote source into an Array using JavaScript?

Attempting to transform the JSON object retrieved from my Icecast server into an array for easy access to current listener statistics to display in HTML. Below is the JavaScript code being used: const endpoint = 'http://stream.8k.nz:8000/status-json ...

I'm getting a "module not found" error - what's the solution?

const { getIo } = require('services/socketio'); const restful = require('utils/restful'); const publicApiService = require('services/publicApi'); const accessTokenMiddleware = require('middleware/accessToken'); const ...

Tips for managing numerous Axios requests in JavaScript

I have a scenario where I need to send 3 axios calls simultaneously from the frontend to the backend using the axios.all function to modify a MONGO DB database. The challenge I am facing is ensuring that if one of the requests fails, none of the other requ ...

Error: Vue.js is unable to find the reference for "_vm.KisanData" and throws a TypeError

I need assistance in fixing an error that I am encountering. The issue arises in this method where I am using KisanData, but I am unable to resolve it. const API_URL = "http://localhost:3000/User"; export default { name: "home", info(){ ...

"Troubleshooting Problem with JSON Encoding in PHP and Parsing with getJSON in

Apologies if this sounds like yet another discussion on the topic, but I've been struggling for hours without finding a solution. I'm attempting to retrieve data from a MySQL database, generate a JSON using PHP, and then parse this JSON in JavaS ...

Looking for a solution to fix the VueJS calculator that only works once?

My calculator project using VueJS, HTML and CSS is almost complete. However, I'm facing an issue where it only works once. For example, if I input 6x3, it correctly gives me 18. But if I then clear the result and try to input a new calculation like 3 ...

Enhance the language with react-intl and MobX State Tree integration

Currently, I am integrating react-intl with Mobx state tree for the first time. Within my project, there are two buttons located in the header section - one for 'it' and the other for 'en'. Upon clicking these buttons, the selected lan ...

Guide on incorporating database-sourced audio playback using buttons in PHP and HTML

Building my website with an audio player inside has been a bit challenging. I encountered an issue when trying to combine songs loaded from the database with a play button. My goal is to have the play button change when clicked and load the song from the d ...

What could be causing the "keyframes method" in my css to not function correctly?

When working on the keyframes section, my computer seems to be having trouble recognizing the from part. Ideally, it should display in blue with the opacity command appearing in grey. Unfortunately, neither of these styles are appearing correctly and I&apo ...

Is it acceptable that req.body is void of content? Should we reconsider this approach?

As a beginner in express, I am working on incorporating a basic login feature into my project. However, I am facing some confusion when it comes to passing data around. There are a few aspects that are perplexing me. I currently store the input value i ...

Having trouble moving to a different component in Angular?

In my application, I am facing an issue with navigating from List to Details component by passing the ID parameter. It seems that there is no response or error when attempting to call the relevant method. Below, you can find the code snippets related to th ...

Render a component in certain routes based on specific conditions in React

This is my Index.js ReactDOM.render( <React.StrictMode> <Provider store={store}> <Router> <App className="app-main" /> </Router> </Provider> </R ...