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");