创建图片流程：

字符串转换成 ascii 码；

创建足够存储空间的 canvas；

将字符填入到像素中（忽略 alpha 值）；

获取 data url；

canvas.toDataURL( "image/png" );

存为 png 图片。

<textarea id="base64"></textarea>
<script>
function encodeUTF8(str) {
 return String(str).replace(
   /[\u0080-\u07ff]/g,
 function(c) {
   var cc = c.charCodeAt(0);
   return String.fromCharCode(0xc0 | cc >> 6, 0x80 | cc & 0x3f);
}).replace(
   /[\u0800-\uffff]/g,
 function(c) {
   var cc = c.charCodeAt(0);
   return String.fromCharCode(0xe0 | cc >> 12, 0x80 | cc >> 6 & 0x3f, 0x80 | cc & 0x3f);
});
}
function request(url, loaded) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4)
    if (xmlhttp.status == 200)
       loaded(xmlhttp);}
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}
void function(){
  var source = 'your.js';  //你的 JS 地址
  request(source, function(xmlhttp){
  var text = encodeUTF8(xmlhttp.responseText);
  var pixel = Math.ceil((text.length + 2) / 3); 
  var size = Math.ceil(Math.sqrt(pixel));
  var canvas = document.createElement('canvas');
  canvas.width = canvas.height = size;
  var context = canvas.getContext("2d"),
  imageData = context.getImageData(0, 0, canvas.width, canvas.height),
  pixels = imageData.data;
  for(var i = 0, j = 0, l = pixels.length; i < l; i++){
  if (i % 4 == 3) {
    pixels[i] = 255;
    continue;}
  var code = text.charCodeAt(j++);
    if (isNaN(code)) break;
    pixels[i] = code;}
  context.putImageData(imageData, 0, 0);
  document.getElementById('base64').value = canvas.toDataURL("image/png");
});
}();
</script>

调用加载流程：

加载 png；

将 png 原尺寸绘制到 canvas 中；

读取像素中的字符串；

生成相应协议的 data url 使用

<script>
void function(){
  var source = 'your.png';  //你的图片地址
  var img = document.createElement('img');
  img.onload = function(){
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  var context = canvas.getContext("2d");
  context.drawImage(img, 0, 0);
  var imageData = context.getImageData(0, 0, canvas.width, canvas.height),
  pixels = imageData.data;
  var script = document.createElement('script');
  var buffer = [];
  for (var i = 0, l = pixels.length; i < l; i++) {
  if (i % 4 == 3) continue;
  if (!pixels[i]) break;
  buffer.push(String.fromCharCode(pixels[i]));}
  script.src = 'data:text/javascript;charset=utf-8,' + encodeURIComponent(buffer.join(''));
  document.body.appendChild(script);
  script.onload = function(){
  alert(T.date.format(new Date, 'yyyy 年 M 月 d 日'));}
  img = null;}
  img.src = source;
}();
</script>

同时注意，需要转换的 JS 里有中文的话，需要将中文的编码转为 Unicode 编码，否者无法显示正常中文。

【 转载:https://www.jdeal.cn/270.html 】

TAGS JS JS 变成一张图 变成一张图