Конвертировать SVG в изображение (JPEG, PNG и т. Д.) В браузере

Я написал этот класс ES6, который делает работу.

class SvgToPngConverter {
  constructor() {
    this._init = this._init.bind(this);
    this._cleanUp = this._cleanUp.bind(this);
    this.convertFromInput = this.convertFromInput.bind(this);
  }

  _init() {
    this.canvas = document.createElement("canvas");
    this.imgPreview = document.createElement("img");
    this.imgPreview.style = "position: absolute; top: -9999px";

    document.body.appendChild(this.imgPreview);
    this.canvasCtx = this.canvas.getContext("2d");
  }

  _cleanUp() {
    document.body.removeChild(this.imgPreview);
  }

  convertFromInput(input, callback) {
    this._init();
    let _this = this;
    this.imgPreview.onload = function() {
      const img = new Image();
      _this.canvas.width = _this.imgPreview.clientWidth;
      _this.canvas.height = _this.imgPreview.clientHeight;
      img.crossOrigin = "anonymous";
      img.src = _this.imgPreview.src;
      img.onload = function() {
        _this.canvasCtx.drawImage(img, 0, 0);
        let imgData = _this.canvas.toDataURL("image/png");
        if(typeof callback == "function"){
            callback(imgData)
        }
        _this._cleanUp();
      };
    };

    this.imgPreview.src = input;
  }
}

Вот как вы можете его использовать

let input = "https://restcountries.eu/data/afg.svg"
new SvgToPngConverter().convertFromInput(input, function(imgData){
    // You now have your png data in base64 (imgData). 
    // Do what ever you wish with it here.
});

Если вы хотите использовать ванильную версию JavaScript, вы можете перейти на сайт Babel и перенести туда код ,

Решение преобразовать svg в URL блоба и URL блоба к изображению png

const svg=`<svg version="1.1" baseProfile="full" width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
   <rect width="100%" height="100%" fill="red" />
   <circle cx="150" cy="100" r="80" fill="green" />
   <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text></svg>`
svgToPng(svg,(imgData)=>{
    const pngImage = document.createElement('img');
    document.body.appendChild(pngImage);
    pngImage.src=imgData;
});
 function svgToPng(svg, callback) {
    const url = getSvgUrl(svg);
    svgUrlToPng(url, (imgData) => {
        callback(imgData);
        URL.revokeObjectURL(url);
    });
}
function getSvgUrl(svg) {
    return  URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' }));
}
function svgUrlToPng(svgUrl, callback) {
    const svgImage = document.createElement('img');
    // imgPreview.style.position = 'absolute';
    // imgPreview.style.top = '-9999px';
    document.body.appendChild(svgImage);
    svgImage.onload = function () {
        const canvas = document.createElement('canvas');
        canvas.width = svgImage.clientWidth;
        canvas.height = svgImage.clientHeight;
        const canvasCtx = canvas.getContext('2d');
        canvasCtx.drawImage(svgImage, 0, 0);
        const imgData = canvas.toDataURL('image/png');
        callback(imgData);
        // document.body.removeChild(imgPreview);
    };
    svgImage.src = svgUrl;
 }

Svg к png может быть преобразован в зависимости от условий:

1. , Если svg находится в формате SVG (строка) пути :
   • создают холст
   • , создают new Path2D() и устанавливают svg, поскольку параметр
   • тянет путь на холсте
   • , создают изображение и используют canvas.toDataURL() в качестве src.

пример:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
let svgText = 'M10 10 h 80 v 80 h -80 Z';
let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
ctx.stroke(p);
let url = canvas.toDataURL();
const img = new Image();
img.src = url;

Примечание, что Path2D не поддерживаемый в [1 110] и частично поддерживаемый в краю. Polyfill решает это: https://github.com/nilzona/path2d-polyfill

2. Создает svg блоб и привлекает холст с помощью [1 112]:
   • делают элемент холста
   • , заставляют объект svgBlob из svg xml
   • сделать объект URL из domUrl.createObjectURL (svgBlob);
   • создают Объект изображения и присваивают URL для обработки изображений src
   • , вовлекают изображение в холст
   • , получают png строку данных от холста: canvas.toDataURL ();

Хорошее описание: http://ramblings.mcpher.com/Home/excelquirks/gassnips/svgtopng

Примечание, что в т.е. Вы получите исключение на этапе canvas.toDataURL (); Это - потому что IE имеет ограничение слишком высокой безопасности и рассматривает холст как только для чтения после рисования изображения там. Все другие браузеры ограничивают, только если изображение является перекрестным источником.

3. библиотека Use canvg JavaScript. Это - отдельная библиотека, но имеет полезные функции.

Как:

ctx.drawSvg(rawSvg);
var dataURL = canvas.toDataURL();