c39c5370c410294f020c85dfddc239b3c9444821bbc66835964253625cacce4c7c2df33b417215a1df7b5a7f7e9f9aca115dc766df677388122506d2d024e5 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. /* global document */
  2. /*
  3. ## Image
  4. */
  5. module.exports = {
  6. // 常见的广告宽高
  7. _adSize: [
  8. '300x250', '250x250', '240x400', '336x280', '180x150',
  9. '720x300', '468x60', '234x60', '88x31', '120x90',
  10. '120x60', '120x240', '125x125', '728x90', '160x600',
  11. '120x600', '300x600'
  12. ],
  13. // 常见的屏幕宽高
  14. _screenSize: [
  15. '320x200', '320x240', '640x480', '800x480', '800x480',
  16. '1024x600', '1024x768', '1280x800', '1440x900', '1920x1200',
  17. '2560x1600'
  18. ],
  19. // 常见的视频宽高
  20. _videoSize: ['720x480', '768x576', '1280x720', '1920x1080'],
  21. /*
  22. 生成一个随机的图片地址。
  23. 替代图片源
  24. http://fpoimg.com/
  25. 参考自
  26. http://rensanning.iteye.com/blog/1933310
  27. http://code.tutsplus.com/articles/the-top-8-placeholders-for-web-designers--net-19485
  28. */
  29. image: function(size, background, foreground, format, text) {
  30. // Random.image( size, background, foreground, text )
  31. if (arguments.length === 4) {
  32. text = format
  33. format = undefined
  34. }
  35. // Random.image( size, background, text )
  36. if (arguments.length === 3) {
  37. text = foreground
  38. foreground = undefined
  39. }
  40. // Random.image()
  41. if (!size) size = this.pick(this._adSize)
  42. if (background && ~background.indexOf('#')) background = background.slice(1)
  43. if (foreground && ~foreground.indexOf('#')) foreground = foreground.slice(1)
  44. // http://dummyimage.com/600x400/cc00cc/470047.png&text=hello
  45. return 'http://dummyimage.com/' + size +
  46. (background ? '/' + background : '') +
  47. (foreground ? '/' + foreground : '') +
  48. (format ? '.' + format : '') +
  49. (text ? '&text=' + text : '')
  50. },
  51. img: function() {
  52. return this.image.apply(this, arguments)
  53. },
  54. /*
  55. BrandColors
  56. http://brandcolors.net/
  57. A collection of major brand color codes curated by Galen Gidman.
  58. 大牌公司的颜色集合
  59. // 获取品牌和颜色
  60. $('h2').each(function(index, item){
  61. item = $(item)
  62. console.log('\'' + item.text() + '\'', ':', '\'' + item.next().text() + '\'', ',')
  63. })
  64. */
  65. _brandColors: {
  66. '4ormat': '#fb0a2a',
  67. '500px': '#02adea',
  68. 'About.me (blue)': '#00405d',
  69. 'About.me (yellow)': '#ffcc33',
  70. 'Addvocate': '#ff6138',
  71. 'Adobe': '#ff0000',
  72. 'Aim': '#fcd20b',
  73. 'Amazon': '#e47911',
  74. 'Android': '#a4c639',
  75. 'Angie\'s List': '#7fbb00',
  76. 'AOL': '#0060a3',
  77. 'Atlassian': '#003366',
  78. 'Behance': '#053eff',
  79. 'Big Cartel': '#97b538',
  80. 'bitly': '#ee6123',
  81. 'Blogger': '#fc4f08',
  82. 'Boeing': '#0039a6',
  83. 'Booking.com': '#003580',
  84. 'Carbonmade': '#613854',
  85. 'Cheddar': '#ff7243',
  86. 'Code School': '#3d4944',
  87. 'Delicious': '#205cc0',
  88. 'Dell': '#3287c1',
  89. 'Designmoo': '#e54a4f',
  90. 'Deviantart': '#4e6252',
  91. 'Designer News': '#2d72da',
  92. 'Devour': '#fd0001',
  93. 'DEWALT': '#febd17',
  94. 'Disqus (blue)': '#59a3fc',
  95. 'Disqus (orange)': '#db7132',
  96. 'Dribbble': '#ea4c89',
  97. 'Dropbox': '#3d9ae8',
  98. 'Drupal': '#0c76ab',
  99. 'Dunked': '#2a323a',
  100. 'eBay': '#89c507',
  101. 'Ember': '#f05e1b',
  102. 'Engadget': '#00bdf6',
  103. 'Envato': '#528036',
  104. 'Etsy': '#eb6d20',
  105. 'Evernote': '#5ba525',
  106. 'Fab.com': '#dd0017',
  107. 'Facebook': '#3b5998',
  108. 'Firefox': '#e66000',
  109. 'Flickr (blue)': '#0063dc',
  110. 'Flickr (pink)': '#ff0084',
  111. 'Forrst': '#5b9a68',
  112. 'Foursquare': '#25a0ca',
  113. 'Garmin': '#007cc3',
  114. 'GetGlue': '#2d75a2',
  115. 'Gimmebar': '#f70078',
  116. 'GitHub': '#171515',
  117. 'Google Blue': '#0140ca',
  118. 'Google Green': '#16a61e',
  119. 'Google Red': '#dd1812',
  120. 'Google Yellow': '#fcca03',
  121. 'Google+': '#dd4b39',
  122. 'Grooveshark': '#f77f00',
  123. 'Groupon': '#82b548',
  124. 'Hacker News': '#ff6600',
  125. 'HelloWallet': '#0085ca',
  126. 'Heroku (light)': '#c7c5e6',
  127. 'Heroku (dark)': '#6567a5',
  128. 'HootSuite': '#003366',
  129. 'Houzz': '#73ba37',
  130. 'HTML5': '#ec6231',
  131. 'IKEA': '#ffcc33',
  132. 'IMDb': '#f3ce13',
  133. 'Instagram': '#3f729b',
  134. 'Intel': '#0071c5',
  135. 'Intuit': '#365ebf',
  136. 'Kickstarter': '#76cc1e',
  137. 'kippt': '#e03500',
  138. 'Kodery': '#00af81',
  139. 'LastFM': '#c3000d',
  140. 'LinkedIn': '#0e76a8',
  141. 'Livestream': '#cf0005',
  142. 'Lumo': '#576396',
  143. 'Mixpanel': '#a086d3',
  144. 'Meetup': '#e51937',
  145. 'Nokia': '#183693',
  146. 'NVIDIA': '#76b900',
  147. 'Opera': '#cc0f16',
  148. 'Path': '#e41f11',
  149. 'PayPal (dark)': '#1e477a',
  150. 'PayPal (light)': '#3b7bbf',
  151. 'Pinboard': '#0000e6',
  152. 'Pinterest': '#c8232c',
  153. 'PlayStation': '#665cbe',
  154. 'Pocket': '#ee4056',
  155. 'Prezi': '#318bff',
  156. 'Pusha': '#0f71b4',
  157. 'Quora': '#a82400',
  158. 'QUOTE.fm': '#66ceff',
  159. 'Rdio': '#008fd5',
  160. 'Readability': '#9c0000',
  161. 'Red Hat': '#cc0000',
  162. 'Resource': '#7eb400',
  163. 'Rockpack': '#0ba6ab',
  164. 'Roon': '#62b0d9',
  165. 'RSS': '#ee802f',
  166. 'Salesforce': '#1798c1',
  167. 'Samsung': '#0c4da2',
  168. 'Shopify': '#96bf48',
  169. 'Skype': '#00aff0',
  170. 'Snagajob': '#f47a20',
  171. 'Softonic': '#008ace',
  172. 'SoundCloud': '#ff7700',
  173. 'Space Box': '#f86960',
  174. 'Spotify': '#81b71a',
  175. 'Sprint': '#fee100',
  176. 'Squarespace': '#121212',
  177. 'StackOverflow': '#ef8236',
  178. 'Staples': '#cc0000',
  179. 'Status Chart': '#d7584f',
  180. 'Stripe': '#008cdd',
  181. 'StudyBlue': '#00afe1',
  182. 'StumbleUpon': '#f74425',
  183. 'T-Mobile': '#ea0a8e',
  184. 'Technorati': '#40a800',
  185. 'The Next Web': '#ef4423',
  186. 'Treehouse': '#5cb868',
  187. 'Trulia': '#5eab1f',
  188. 'Tumblr': '#34526f',
  189. 'Twitch.tv': '#6441a5',
  190. 'Twitter': '#00acee',
  191. 'TYPO3': '#ff8700',
  192. 'Ubuntu': '#dd4814',
  193. 'Ustream': '#3388ff',
  194. 'Verizon': '#ef1d1d',
  195. 'Vimeo': '#86c9ef',
  196. 'Vine': '#00a478',
  197. 'Virb': '#06afd8',
  198. 'Virgin Media': '#cc0000',
  199. 'Wooga': '#5b009c',
  200. 'WordPress (blue)': '#21759b',
  201. 'WordPress (orange)': '#d54e21',
  202. 'WordPress (grey)': '#464646',
  203. 'Wunderlist': '#2b88d9',
  204. 'XBOX': '#9bc848',
  205. 'XING': '#126567',
  206. 'Yahoo!': '#720e9e',
  207. 'Yandex': '#ffcc00',
  208. 'Yelp': '#c41200',
  209. 'YouTube': '#c4302b',
  210. 'Zalongo': '#5498dc',
  211. 'Zendesk': '#78a300',
  212. 'Zerply': '#9dcc7a',
  213. 'Zootool': '#5e8b1d'
  214. },
  215. _brandNames: function() {
  216. var brands = [];
  217. for (var b in this._brandColors) {
  218. brands.push(b)
  219. }
  220. return brands
  221. },
  222. /*
  223. 生成一段随机的 Base64 图片编码。
  224. https://github.com/imsky/holder
  225. Holder renders image placeholders entirely on the client side.
  226. dataImageHolder: function(size) {
  227. return 'holder.js/' + size
  228. },
  229. */
  230. dataImage: function(size, text) {
  231. var canvas
  232. if (typeof document !== 'undefined') {
  233. canvas = document.createElement('canvas')
  234. } else {
  235. /*
  236. https://github.com/Automattic/node-canvas
  237. npm install canvas --save
  238. 安装问题:
  239. * http://stackoverflow.com/questions/22953206/gulp-issues-with-cario-install-command-not-found-when-trying-to-installing-canva
  240. * https://github.com/Automattic/node-canvas/issues/415
  241. * https://github.com/Automattic/node-canvas/wiki/_pages
  242. PS:node-canvas 的安装过程实在是太繁琐了,所以不放入 package.json 的 dependencies。
  243. */
  244. var Canvas = module.require('canvas')
  245. canvas = new Canvas()
  246. }
  247. var ctx = canvas && canvas.getContext && canvas.getContext("2d")
  248. if (!canvas || !ctx) return ''
  249. if (!size) size = this.pick(this._adSize)
  250. text = text !== undefined ? text : size
  251. size = size.split('x')
  252. var width = parseInt(size[0], 10),
  253. height = parseInt(size[1], 10),
  254. background = this._brandColors[this.pick(this._brandNames())],
  255. foreground = '#FFF',
  256. text_height = 14,
  257. font = 'sans-serif';
  258. canvas.width = width
  259. canvas.height = height
  260. ctx.textAlign = 'center'
  261. ctx.textBaseline = 'middle'
  262. ctx.fillStyle = background
  263. ctx.fillRect(0, 0, width, height)
  264. ctx.fillStyle = foreground
  265. ctx.font = 'bold ' + text_height + 'px ' + font
  266. ctx.fillText(text, (width / 2), (height / 2), width)
  267. return canvas.toDataURL('image/png')
  268. }
  269. }