了解如何直接在浏览器中轻松地将普通 SVG 字符串转换为图像。

文章图片
有很多操作可以在客户端进行，因此你可以节省一些服务器处理能力。本周我需要解决的任务之一是找到将 SVG 字符串转换为任何用户都可以理解的图像格式（PNG 或 JPEG）的最简单方法。
JavaScript如何将SVG字符串转换为图像？在本文中，我将与你分享我使用 Vanilla JavaScript 从浏览器中的任何 SVG 字符串或 SVG Dom 节点创建图像的方法。
1.创建SVGToImage函数JavaScript将SVG字符串转换为图像的方法？将帮助你将 SVG 转换为图像的功能如下：

/** * Simple function that converts a plain SVG string or SVG DOM Node into an image with custom dimensions. * * @param {Object} settings The configuration object to override the default settings. * @see https://ourcodeworld.com/articles/read/1456/how-to-convert-a-plain-svg-string-or-svg-node-to-an-image-png-or-jpeg-in-the-browser-with-javascript * @returns {Promise} */ function SVGToImage(settings){ let _settings = { svg: null, // Usually all SVG have transparency, so PNG is the way to go by default mimetype: "image/png", quality: 0.92, width: "auto", height: "auto", outputFormat: "base64" }; // Override default settings for (let key in settings) { _settings[ key] = settings[ key]; }return new Promise(function(resolve, reject){ let svgNode; // Create SVG Node if a plain string has been provided if(typeof(_settings.svg) == "string"){ // Create a non-visible node to render the SVG string let SVGContainer = document.createElement("div"); SVGContainer.style.display = "none"; SVGContainer.innerHTML = _settings.svg; svgNode = SVGContainer.firstElementChild; }else{ svgNode = _settings.svg; }let canvas = document.createElement('canvas'); let context = canvas.getContext('2d'); let svgXml = new XMLSerializer().serializeToString(svgNode); let svgBase64 = "data:image/svg+xml; base64," + btoa(svgXml); const image = new Image(); image.onload = function(){ let finalWidth, finalHeight; // Calculate width if set to auto and the height is specified (to preserve aspect ratio) if(_settings.width === "auto" & & _settings.height !== "auto"){ finalWidth = (this.width / this.height) * _settings.height; // Use image original width }else if(_settings.width === "auto"){ finalWidth = this.naturalWidth; // Use custom width }else{ finalWidth = _settings.width; }// Calculate height if set to auto and the width is specified (to preserve aspect ratio) if(_settings.height === "auto" & & _settings.width !== "auto"){ finalHeight = (this.height / this.width) * _settings.width; // Use image original height }else if(_settings.height === "auto"){ finalHeight = this.naturalHeight; // Use custom height }else{ finalHeight = _settings.height; }// Define the canvas intrinsic size canvas.width = finalWidth; canvas.height = finalHeight; // Render image in the canvas context.drawImage(this, 0, 0, finalWidth, finalHeight); if(_settings.outputFormat == "blob"){ // Fullfil and Return the Blob image canvas.toBlob(function(blob){ resolve(blob); }, _settings.mimetype, _settings.quality); }else{ // Fullfil and Return the Base64 image resolve(canvas.toDataURL(_settings.mimetype, _settings.quality)); } }; // Load the SVG in Base64 to the image image.src = https://www.lsbin.com/svgBase64; }); }

SVGToImage 接收一个支持以下属性的对象作为第一个参数：

• svg: 一个 SVG DOM 节点或带有 SVG 数据的纯字符串。这将被转换为图像。
• mimetype：图像的输出 mime 类型，它可以是image/png或image/jpeg（image/webp在 chrome 中也可以）。默认情况下，它使用 PNG 格式，像往常一样，每个 SVG 图像都有透明度。
• width：将创建的图像的输出宽度（以像素为单位）。默认情况下，它采用 SVG 图像的宽度（自动）。如果你为图像提供自定义高度并且宽度设置为自动，则会自动计算宽度以保留 SVG 的纵横比。
• height：将创建的图像的输出高度（以像素为单位）。默认情况下，它采用 SVG 图像的高度（自动）。如果你为图像提供自定义宽度并且高度设置为自动，则将自动计算高度以保留 SVG 的纵横比。
• quality：一个介于 0 和 1 之间的数字，表示用于使用有损压缩的图像格式（例如image/jpeg和 ）的图像质量image/webp。如果此参数是其他任何参数，则使用图像质量的默认值。默认值为 0.92。其他参数被忽略。
• outputFormat: 图像的导出格式，可以是base64DataURL 或blob.

2. 从一个普通的 SVG 字符串创建一个图像JavaScript如何将SVG字符串转换为图像？例如，如果你想从一个普通的 SVG 字符串创建一个图像，你可以使用这样的函数：

SVGToImage({ // 1. Provide the SVG svg: `< svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"> < path d="M1585 1215q-39 125-123 250-129 196-257 196-49 0-140-32-86-32-151-32-61 0-142 33-81 34-132 34-152 0-301-259-147-261-147-503 0-228 113-374 113-144 284-144 72 0 177 30 104 30 138 30 45 0 143-34 102-34 173-34 119 0 213 65 52 36 104 100-79 67-114 118-65 94-65 207 0 124 69 223t158 126zm-376-1173q0 61-29 136-30 75-93 138-54 54-108 72-37 11-104 17 3-149 78-257 74-107 250-148 1 3 2.5 11t2.5 11q0 4 .5 10t.5 10z"/> < /svg>`, // 2. Provide the format of the output image mimetype: "image/png", // 3. Provide the dimensions of the image if you want a specific size. //- if they remain in auto, the width and height attribute of the svg will be used //- You can provide a single dimension and the other one will be automatically calculated // width: "auto", // height: "auto", width: 500, height: 500, // 4. Specify the quality of the image quality: 1, // 5. Define the format of the output (base64 or blob) outputFormat: "base64" }).then(function(outputData){ // If using base64 (outputs a DataURL) //data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0... // Or with Blob (Blob) //Blob {size: 14353, type: "image/png"} console.log(outputData); }).catch(function(err){ // Log any error console.log(err); });

3. 从 SVG Dom 元素创建图像【JavaScript如何将SVG字符串或节点转换为图像（PNG或JPEG）】JavaScript将SVG字符串转换为图像的方法？如果你想直接转换文档中的 DOM 元素而不是普通字符串，你可以简单地选择它并在相同的 SVG 属性中提供它：

< svg id="my-svg" width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"> < path d="M1585 1215q-39 125-123 250-129 196-257 196-49 0-140-32-86-32-151-32-61 0-142 33-81 34-132 34-152 0-301-259-147-261-147-503 0-228 113-374 113-144 284-144 72 0 177 30 104 30 138 30 45 0 143-34 102-34 173-34 119 0 213 65 52 36 104 100-79 67-114 118-65 94-65 207 0 124 69 223t158 126zm-376-1173q0 61-29 136-30 75-93 138-54 54-108 72-37 11-104 17 3-149 78-257 74-107 250-148 1 3 2.5 11t2.5 11q0 4 .5 10t.5 10z"/> < /svg>< script> SVGToImage({ // 1. Provide the SVG DOM element svg: document.getElementById("my-svg"), // 2. Provide the format of the output image mimetype: "image/png", // 3. Provide the dimensions of the image if you want a specific size. //- if they remain in auto, the width and height attribute of the svg will be used //- You can provide a single dimension and the other one will be automatically calculated // width: "auto", // height: "auto", width: 500, height: 500, // 4. Specify the quality of the image quality: 1, // 5. Define the format of the output (base64 or blob) outputFormat: "base64" }).then(function(outputData){ // If using base64 (outputs a DataURL) //data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0... // Or with Blob (Blob) //Blob {size: 14353, type: "image/png"} console.log(outputData); }).catch(function(err){ // Log any error console.log(err); }); < /script>

现场演示你可以在以下小提琴中看到此功能如何工作的实时预览，只需在 中提供你自己的 SVGtextarea并提交表单以在文档中附加图像的 PNG 版本：
快乐编码??！

推荐阅读

• 

  python画一朵花，python语言设计一个类代表花其中含2个对象属性2个方法建立2
• 

  世界上最奢华的腕表是哪个？你怎么看？
• 

  梦见蛇的七大预兆 梦见蛇是什么
• 

  萧条是什么意思 萧条的意思
• 

  如何解决企业服务器无法登录的问题？ 企业服务器登不进去怎么办
• 

  冰箱的节目——如何维修您的家用冰箱
• 

  诺言筹靠什么盈利
• 

  redis的高可用和高性能是怎么实现的? redis高性能中间件
• 

  西瓜可以和螃蟹一起吃吗
• 

  和平精英点券怎么获得
• 

  QuantumTunnel（内网穿透服务设计）
• 

  什么什么点头成语
• 

  露微花怎么养 微露花养护
• 

  法兰琳卡高端系列
• 

  每次关闭燃气灶前都要关闭阀门吗
• 

  天坑风水学 天坑在哪个方位
• 

  翡翠的福禄寿是什么颜色 福禄寿翡翠有什么寓意
• 

  湖北省江汉市怎么一直没成立 江汉市成立可能性有多大2020
• 

  适合男士的生日蛋糕 8寸蛋糕直径多少厘米，8寸是几公分
• 

  苹果M2芯片平板，苹果i Pad2 好使吗

• Node.js如何在服务器端渲染JavaScript Highcharts（）
• cookie是啥？chrome浏览器如何清除cookie ？
• PDF是啥？如何打开PDF文件？
• 如何把mobi格式转换成word
• Python Depix如何从像素化屏幕截图中恢复信息
• 如何在Ubuntu中使用Figlet从CLI生成ASCII艺术文本（）
• 如何从服务器全局删除X-Powered-By: PleskLin标头（）
• 如何修复Symfony 5错误（Object of class Proxies\__CG__\App\Entity could not be converted to string）
• 如何在LibreOffice中将Word文件转换为PDF（）
• 如何在Symfony 5中使用Elasticsearch 7和FOSElasticaBundle创建搜索引擎