drawimage到一个已确定的画布宽度和高度

Question

如果源svg在响应环境中，我如何使用drawImage()绘制到给定的画布大小？

示例：如果原始svg为550 x 650并且正在移动设备上查看svg，则如何将svg绘制到412.5 x 487.5画布上（因此显然svg会比原始尺寸更小）？

Fiddle

svgToImage(svg2, function(img2){ 
     ctx2.drawImage(img2, 0, 0); 
     }); 

     function svgToImage(svg2, callback) { 
     var nurl = "data:image/svg+xml;utf8," + encodeURIComponent(svg2), 
      img2 = new Image; 

      img2.onload = function() { 
      callback(img2); 
      } 
      img2.src = nurl; 
     } 

Answer 1

当SVG已加载，只需设置在画布的大小，然后使用的drawImage的宽度和高度参数在图像中绘制。

请注意，位图只能取整数值，所以您的画布必须是413x488或412x487。如果不设置画布大小，则默认为300x150，然后延伸到你使用的风格/ CSS大小：

svgToImage(svg2, function(img2){ 
     ctx2.canvas.width = 413;    // set canvas size 
     ctx2.canvas.height = 488; 
     ctx2.drawImage(img2, 0, 0, 413, 488); // draw SVG/image at same size 
    }); 

Updated fiddle