CODEWITHSUNDEEP
html5-canvas
kreative_ideas
kreative_ideas

Reputation: 41

Converting canvas to .EPS format

var oCanvas = document.getElementById("canvas");
var oImgBMP = Canvas2Image.saveAsEPS(oCanvas, true);

I tried above function to convert it into EPS but this is not working there is any easy method to save canvas into EPS. or any other method mean pdf to EPS ...Thanks for any help

Upvotes: 2

Views: 2332

Answers (3)

Aral Roca
Aral Roca

Reputation: 5929

You can use ImageMagick in WebAssembly to do it in the browser:

async function canvasToEps(canvas) {
  const pngBlob = await new Promise(
    (res) => canvas.toBlob(res, 'image/png')
  );
  const imageMagick = await import('@imagemagick/magick-wasm');   
  const imageBuffer = await pngBlob.arrayBuffer();
  const imgData = new Uint8Array(imageBuffer)
  
  await imageMagick.initializeImageMagick();

  return new Promise((res) => {
    imageMagick.ImageMagick.read(imgData, (image) => {
      image.format = imageMagick.MagickFormat.Eps;
      image.write((epsImg) => res(new Blob([epsImg])));
    });
  });
}

canvasToEps returns a blob with the eps format. Internally is doing these conversions:

canvas -> png blob -> png array buffer -> png Uint8Array -> eps Uint8Array -> blob eps

And to download the .eps you can use a function like this one:

export function downloadFromBlob(blob, pathname) {
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.setAttribute('href', url);
  link.setAttribute('download', pathname);
  link.click();
  link.remove();
  URL.revokeObjectURL(url);
}

Upvotes: 2

mindon
mindon

Reputation: 483

you could try this https://github.com/joshua-gould/canvas2pdf

Canvas2PDF exports your HTML canvas as PDF using JavaScript. Note that this library generates actual PDF drawing calls to create a PDF with vector graphics, unlike some alternate libraries which rasterize your canvas and place it as an image in your PDF.

Upvotes: 0

markE
markE

Reputation: 105035

There is no native support for getting canvas in .EPS format.

The .toDataURL will get the canvas in either PNG or JPG format, but not EPS.

canvas.toDataURL("image/jpg");

canvas.toDataURL("image/png");

To get to EPS, you will have to send the .png or .jpg to your server (php/iis) for conversion.

Upvotes: 2

Related Questions