favicon được tạo động

Question

Chỉ có thể sử dụng JavaScript và HTML để tự động tạo một favicon, sử dụng favicon của trang hiện tại làm nền và một số ngẫu nhiên trong nền trước?

Ví dụ, cho phép nói favicon hiện tại trông tương tự như sau:

====================== 
====XXXXXXXXXXXXXX==== 
====X================= 
====X================= 
====X=====XXXXXXXX==== 
====X============X==== 
====X============X==== 
====XXXXXXXXXXXXXX==== 
====================== 

Nếu có thể, làm thế nào tôi sẽ làm cho nó trông giống tương tự như sau chỉ sử dụng JavaScript và HTML:

====================== 
====XXXXXXXXXXXXXX==== 
====X================= 
====X================= 
====X=====XXXXXXXX==== 
====X=========--111--= 
====X=========--1-1--= 
====XXXXXXXXXX----1--= 
==============--1111-= 

bản đồ:
=: nền trắng
x: Hình ảnh Favicon gốc
-: Đỏ tạo ra hình ảnh với một số
1: Văn bản màu trắng

Ý tưởng:

• Canvas?
• Dữ liệu của Uri?

Answer 1

EDIT: Got nó làm việc với

var canvas = document.createElement('canvas'); 
    canvas.width = 16;canvas.height = 16; 
    var ctx = canvas.getContext('2d'); 
    var img = new Image(); 
    img.src = '/favicon.ico'; 
    img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
     ctx.fillStyle = "#F00"; 
     ctx.fillRect(10, 7, 6, 8); 
     ctx.fillStyle = '#FFFFFF'; 
     ctx.font = 'bold 10px sans-serif'; 
     ctx.fillText('2', 10, 14); 

     var link = document.createElement('link'); 
     link.type = 'image/x-icon'; 
     link.rel = 'shortcut icon'; 
     link.href = canvas.toDataURL("image/x-icon"); 
     document.getElementsByTagName('head')[0].appendChild(link); 
    } 

Bạn thực sự có thể chạy chrome và dán này:

javascript: var canvas = document.createElement('canvas');canvas.width = 16;canvas.height = 16;var ctx = canvas.getContext('2d');var img = new Image();img.src = '/favicon.ico';img.onload = function() {ctx.drawImage(img, 0, 0);ctx.fillStyle = "#F00";ctx.fillRect(10, 7, 6, 8);ctx.fillStyle = '#FFFFFF';ctx.font = 'bold 10px sans-serif';ctx.fillText('2', 10, 14);var link = document.createElement('link');link.type = 'image/x-icon';link.rel = 'shortcut icon';link.href = canvas.toDataURL("image/x-icon");document.getElementsByTagName('head')[0].appendChild(link);} 

vào trình duyệt và xem nó trong hành động.

Answer 2

Tôi không biết làm tất cả trong trình duyệt, nhưng sẽ dễ dàng có điểm cuối máy chủ chấp nhận tham số trong URL và trả về một biểu tượng được tạo thành. Sau đó, Javascript có thể sửa đổi url favicon để có được hình ảnh mà nó muốn.

Answer 3

Bạn có thể xem this question, thảo luận về cách thay đổi động từ favicon. Ngoài ra here is a site tuyên bố rằng bạn sẽ chơi trò chơi trong favicon chỉ bằng JavaScript, canvas và URI dữ liệu, nó sẽ hoạt động trong tất cả các trình duyệt hiện đại ngoại trừ IE. Bạn không chắc chắn liệu điều đó có đáp ứng được yêu cầu của bạn hay không, nhưng bạn có thể thử kỹ thuật đảo ngược cách nó hoạt động.

Đây là số SO answer giải thích cách sử dụng phần tử canvas để đọc dữ liệu hình đại diện và lấy dữ liệu hình ảnh, sau đó có thể sửa đổi và được tạo thành biểu tượng mới.

Answer 4

favicon.js thực hiện chính xác này. Thư viện này có thể hiển thị một bộ đếm ở góc dưới cùng bên phải của favicon, cùng với các tính năng khác.