javascript：SVG 从文件输入到 Blob 到 imageUrl 返回奇怪的结果

Question

我有一个文件输入，其中必须将所选文件转换为图像 url，以便我可以将其添加到 canvas。

我已经发现 SVG 是一个异常，因此我需要先将其转换为 Blob，然后再将其转换为图像 Url。将其转换为 Blob 似乎工作正常，但将其转换为 url 会返回意外结果。

相关代码：

 function initiate() { var canvas = $("#canvas").get(0); var context = canvas.getContext("2d"); var img = new Image(); var imageSrcUrl; img.onload = function() { URL.revokeObjectURL(imageSrcUrl), {once: true} context.drawImage( img, 0, 0, img.width, img.height, 0, 0 ); } var extension = $("#logo").get(0).files[0].name.split('.').pop().toLowerCase(); if(extension == 'svg') { var reader = new FileReader(); reader.onload = function() { console.log(reader.result); var blob = new Blob([reader.result.toString()], {type: 'image/svg+xml'}); console.log(blob); imageSrcUrl = URL.createObjectURL(blob); console.log(imageSrcUrl); img.src = imageSrcUrl; }; reader.readAsText($("#logo").get(0).files[0]); } else { img.src = URL.createObjectURL( $("#logo").get(0).files[0] ); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <form id="form"> Select file here <input type="file" id="logo"> </form> <br><br> Canvas goes here <canvas width="400" height="200" id="canvas"></canvas> <br><br> <button onclick="initiate();">Get svg into canvas</button>

控制台日志：

• reader.result: '< svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999 /xlink" x="0px" y="0px" viewBox="0 0 605.3 146.4" style="enable-background:new 0 0 605.3 146.4;" xml:space="preserve">...' （似乎是正确的，但由于格式原因不得不在开头添加一个空格）
• blob: Blob { size: 50643, type: "image/svg+xml" } （似乎正确？）
• imageSrcUrl: blob: https://ourdomain.be/a64506fb-00db-459a-8e17-1aab67dadd9b （我们的域.be 实际上是我们的域）

我错过了什么或做错了什么吗？ 我从https://dev.to/benjaminblack/using-a-string-of-svg-as-an-image-source-8mo得到了方法

谢谢！

Answer 1

您已指定dx和dy值。 .
这些值可用于在 canvas 上渲染之前选择像素图像的区域。
这些 arguments 不适用于svg图像。

将 drawImage arguments 更改为：

context.drawImage(
  img,
  0,
  0,
  img.width,
  img.height
);

 function initiate() { var canvas = $("#canvas").get(0); var context = canvas.getContext("2d"); var img = new Image(); var imageSrcUrl; img.onload = function() { URL.revokeObjectURL(imageSrcUrl), {once: true} context.drawImage( img, 0, 0, img.width, img.height ); } var extension = $("#logo").get(0).files[0].name.split('.').pop().toLowerCase(); if(extension == 'svg') { var reader = new FileReader(); reader.onload = function() { console.log(reader.result); var blob = new Blob([reader.result.toString()], {type: 'image/svg+xml'}); console.log(blob); imageSrcUrl = URL.createObjectURL(blob); console.log(imageSrcUrl); img.src = imageSrcUrl; }; reader.readAsText($("#logo").get(0).files[0]); } else { img.src = URL.createObjectURL( $("#logo").get(0).files[0] ); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <form id="form"> Select file here <input type="file" id="logo"> </form> <br><br> Canvas goes here <canvas width="400" height="200" id="canvas"></canvas> <br><br> <button onclick="initiate();">Get svg into canvas</button>

消毒

上面的代码片段可能不适用于 svgs 缺少命名空间属性xmlns和xmlns:xlink 。

 function initiate() { var canvas = $("#canvas").get(0); var context = canvas.getContext("2d"); var img = new Image(); var imageSrcUrl; img.onload = function() { URL.revokeObjectURL(imageSrcUrl), { once: true } let width = img.width; let height = img.height; //adjust canvas width and height canvas.setAttribute('width', width); canvas.setAttribute('height', height) context.drawImage( img, 0, 0, width, height ); } var extension = $("#logo").get(0).files[0].name.split('.').pop().toLowerCase(); if (extension == 'svg') { var reader = new FileReader(); reader.onload = function() { //create svg fragment for sanitizing let svgCode = reader.result; let tmpSvgWrap = document.createElement('div'); let fragment = document.createRange().createContextualFragment(svgCode); tmpSvgWrap.appendChild(fragment); let svg = tmpSvgWrap.querySelector('svg'); //add xml namespace attributes svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink"); var blob = new Blob([tmpSvgWrap.innerHTML], { type: 'image/svg+xml' }); //add delay for safari setTimeout(function() { imageSrcUrl = URL.createObjectURL(blob); img.src = imageSrcUrl; console.log('imageSrcUrl', imageSrcUrl) }, 100) }; reader.readAsText($("#logo").get(0).files[0]); } else { img.src = URL.createObjectURL( $("#logo").get(0).files[0] ); } }

 canvas { max-height: 200px; border: 1px solid #ccc; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <form id="form"> Select file here <input type="file" id="logo" onchange="initiate();"> <;-- <button type="button" onclick="initiate();">Get svg into canvas</button> --> </form> <p>Canvas goes here</p> <canvas width="400" height="200" id="canvas"></canvas>

上面的代码片段通过Range.createContextualFragment()方法创建片段来添加缺少的命名空间属性

  //create svg fragment for sanitizing
  let svgCode = reader.result;
  let tmpSvgWrap = document.createElement('div');
  let fragment = document.createRange().createContextualFragment(svgCode);
  tmpSvgWrap.appendChild(fragment);
  let svg = tmpSvgWrap.querySelector('svg');

  //add xml namespace attributes 
  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");