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

Question

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

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

我能做的另一件事是。我可以使用图像元素并提供精灵图像网址并在画布上绘制图像。

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

任何人都可以帮我在画布上渲染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>