-
Notifications
You must be signed in to change notification settings - Fork 1
/
jquery_canvbg.js.coffee
71 lines (57 loc) · 1.78 KB
/
jquery_canvbg.js.coffee
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
###
This is a proof of concept that allows you to set the background-image of elements
on the page to the image contents of a canvas prepared by javascript.
Works in FF14 and Chrome 21.0.1180...
Usage:
$.canvbg(selector, options, callback);
selector:
a valid css selector
options:
an object containing a width and a height
callback:
a function which draws the canvas
Example draws an "X" in the background of the body:
$.canvbg('body', {
width: 20,
height: 20
}, function(ctx){
// first argument is a canvas' 2d context.
ctx.strokeStyle = "#000";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(1,1);
ctx.lineTo(9,9);
ctx.moveTo(9,1);
ctx.lineTo(1,9);
ctx.closePath();
ctx.stroke();
});
###
canvbgs = {}
style_elem = null
populate_style_elem = ()->
###
ensures that this element is in the head:
<style type='text/css' id='canvbg'>...</style>
and then fills it with the different "background-image" styles.
###
contents = []
for selector, data of canvbgs
contents.push "#{selector} { background-image:url(#{data}); }"
style_elem ||= $('<style>', {type:'text/css', 'id': 'canvbg'}).appendTo('head')
style_elem.html(contents.join(' '))
canvbg = (selector, opts, canvasCallback)->
# creates a temporary <canvas>
canvas = document.createElement('canvas')
canvas.width = opts.width
canvas.height = opts.height
if canvas.getContext
# runs the callback function with one argument, the 2d context.
canvasCallback.call(canvas, canvas.getContext('2d'))
# saves the resulting image as a string
# (image is in format: "data:image/png;base64...")
canvbgs[selector] = canvas.toDataURL()
# rebuilds the <style> element each time
populate_style_elem()
true
jQuery.canvbg = canvbg