更改svg填充顏色，然后繪制到畫布

Question

我想要做的是加載svg，將其填充顏色更改為隨機值，然后在畫布上繪制它。 事實證明這比我想象的要困難得多。 這是我目前的代碼。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

//images
var bottomLeftTop = new Image();
var bottomRightTop = new Image();
var fullTop= new Image();
var leftMidSide = new Image();
var leftSide = new Image();
var rightMidSide = new Image();
var rightSide = new Image();
var topLeftTop = new Image();
var topRightTop = new Image();

bottomLeftTop.src = "img/bottomLeftTop.svg";
bottomRightTop.src = "img/bottomRightTop.svg";
fullTop.src = "img/fullTop.svg";
leftMidSide.src = "img/leftMidSide.svg";
leftSide.src = "img/leftSide.svg";
rightMidSide.src = "img/rightMidSide.svg";
rightSide.src = "img/rightSide.svg";
topLeftTop.src = "img/topLeftTop.svg";
topRightTop.src = "img/topRightTop.svg";

//draw
context.drawImage(fullTop,50,50);

我正在加載我的svg作為Image對象，它只適用於繪圖，但不允許我更改填充顏色。

我確實嘗試將我的svg轉換為canvas命令，這允許我更改填充但需要大量工作才能正確縮放和定位，並且對於我正在使用的圖像數量而言是不可行的。

還有其他方法可以在使用畫布的同時做到這一點嗎？

Answer 1

訣竅是通過XHR將svg加載為XML並以任何方式對其進行操作，然后使用data:image格式從中創建data:image 。

例如

$.get('img/bottomLeftTop.svg', function(svgXml) {
  var img = new Image();
  var coloredSvgXml = svgXml.replace(/#3080d0/g,'#e05030');
  img.src = "data:image/svg+xml;charset=utf-8,"+coloredSvgXml;
  context.drawImage(img,0,0);
});

這是我創建的片段，用於演示操作原理。 它使用in-html隱藏的svg節點在2d畫布上繪制，然后通過regexp更改顏色並再次在同一畫布上繪制：

 var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var svg = document.getElementById('tmpSvg') var blueCircle = (new XMLSerializer).serializeToString(svg); var img = new Image(); img.src = "data:image/svg+xml;charset=utf-8," + blueCircle; context.drawImage(img, 0, 0); redCircle = blueCircle.replace(/#3080d0/g, '#e05030'); img = new Image(); img.src = "data:image/svg+xml;charset=utf-8," + redCircle; context.drawImage(img, 10, 10); 

 .wrapper { display: none; } #canvas { width: 400px; height: 300px; } 

 <canvas id="canvas"></canvas> <div class="wrapper"> <svg id="tmpSvg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <style> circle { fill-opacity: 0.5; stroke-width: 4; fill: #3080d0; stroke: #3080d0; } </style> <circle id="my-circle" cx="50" cy="50" r="30" /> </svg> </div> 

當然，沒有什么能阻止您使用JavaScript內置的XML解析器和基於XPath的節點操作。 但在這種特殊情況下，對於特定的顏色，regexp可能更有效。

Answer 2

一種方法是為每個圖像創建一個臨時畫布，獲取圖像數據並循環遍歷它。 在循環中，如果像素具有顏色數據，則將其更改為所需的值。

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

canvas.width = 600;
canvas.height = 400;

var svg = new Image();

svg.onload = function () {
    canvas.width = svg.width;
    canvas.height = svg.height;
    // create temporary canvas
    var svgCanvas = document.createElement("canvas");
    var svgCtx = svgCanvas.getContext("2d");
    svgCanvas.width = svg.width;
    svgCanvas.height = svg.height;
    // draw the actual svg image to temporary canvas
    svgCtx.drawImage(svg, 0, 0);
    // get ImageData object
    var svgData = svgCtx.getImageData(0, 0, svgCanvas.width, svgCanvas.height);
    // get pixel data
    var data = svgData.data;
    // loop through data
    for (var i = 0; i < data.length; i += 4) {
        // check if pixel alpha value is not 0, then change the data
        if (data[i + 3] !== 0) {
            data[i] = 255; // pixel red value
            data[i + 1] = 0; // pixel green value
            data[i + 2] = 0; // pixel blue value
        }
    }
    // put the data back to the temporary svg canvas
    svgCtx.putImageData(svgData, 0, 0);
    // draw temporary canvas to the real canvas
    ctx.drawImage(svgCanvas, 0, 0);
}
// look out for CORS, the svg needs to be on the same origin.
svg.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Maki-alcohol-shop-15.svg/1024px-Maki-alcohol-shop-15.svg.png"; 

參考使用畫布進行像素操作