javascript - 在 Canvas 上绘制 Div 的背景图片

Question

我有一个 sprite 图像，用于在 div 上显示图标。我有类名来标识 Sprite 中的每个图标。

现在我想要的是，我有一个显示特定图标的 div，我想在 Canvas 上绘制相同的图标.. I.E. div 的背景图像应该呈现在 Canvas 上。

我能做的另一件事是。我可以使用图像元素并提供 sprite 图像 url 并在 Canvas 上绘制图像。

但是由于一些问题。我不能使用这个选项。

谁能帮我在 Canvas 上渲染 div 的背景。可用于呈现的值是该特定图标的 css 类名称。它在 Sprite 中的位置。及其大小。

Answer 1

方法如下:

• 获取 div 背景图片的 URI，
• 从该 URI 创建图像，
• 将该图像绘制到 Canvas 上。

注意:浏览器可能已经缓存了背景图像，因此您可能不会往返于服务器以重新获取图像。

示例代码和演示:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

// get the dataURL of your div's background
var bg = $('#myDiv').css('background-image');
bg = bg.replace('url(','').replace(')','').replace('"','').replace('"','');

// build an image from the dataURL
var img=new Image();
//img.crossOrigin='anonymous';
img.onload=function(){
  // draw the image onto the canvas
  ctx.drawImage(img,0,0);
}
img.src=bg;

body{ background-color: ivory; padding:10px; }
#myDiv{width:75px;height:75px;background-image:url(https://dl.dropboxusercontent.com/u/139992952/multple/sun.png);}
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='myDiv'>Sprite div with background image</div>
<canvas id="canvas" width=100 height=100></canvas>