在画布上绘制Div的背景图像

Question

我有一个精灵图片，用于在div上显示图标。 我有一个类名来标识精灵中的每个图标。

现在我想要的是，我有一个显示特定图标的div，我想在画布上绘制相同的图标。即div的背景图像应在画布上呈现。

我可以做的另一件事是。 我可以使用image元素并提供sprite图片的url并将其绘制在画布上。

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

谁能帮助我在画布上渲染div的背景。 可用于渲染的值是该特定图标的CSS类名称。 它在精灵中的位置。 及其大小。

Answer 1

方法如下：

• 获取div背景图片的URI，
• 根据该URI创建图像，
• 将该图像绘制到画布上。

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

示例代码和演示：

 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>