基于canvas的图片转字符画工具

2018年7月14日21:08:32 1 347

这是一个在线生成字符画的html单页源代码,可用图片来生成字符画用来放记事本里好看(ˊᵒ̴̶̷̤ꇴᵒ̴̶̷̤ˋ)꒰,哈哈哈!看这文章的都知道干嘛就不瞎扯了。复制下面代码到诗梦的https://m.mom1.cn/zx 粘贴运行上传要生成的图片。注图片要大一点,太小看不出来ʕ•͓͡•ʔ-̫͡-ʕ•̫͡•ʔ。
基于canvas的图片转字符画工具

  1.     <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>基于canvas的图片转字符画工具</title>
  6.     <style type="text/css">
  7.     * {margin: 0;padding: 0;}
  8.     body {font-size: 12px; margin: 10px; font-family: simsun; background: #fff;}
  9.     p { height: 12px;}
  10.     p.ts { margin: 10px 0 0 0; width: 500px; float: left;}
  11.     span {width: 12px;}
  12.     #cv, #txt {float: left;}
  13.     #cv { margin-right: 5px;}
  14.     .bt{ height: 37px; }
  15.     form, input {width: 73px;height: 27px;}
  16.     form {
  17.         position: relative;
  18.         float: left;
  19.         margin: 0 10px 0 0;
  20.     }
  21.     #up-button{
  22.         position: absolute;
  23.         right: 0;
  24.         top: 0;
  25.         cursor: pointer;
  26.         opacity: 0;
  27.         filter: alpha(opacity=0);
  28.         outline: none;
  29.     }
  30.     #button{
  31.     }
  32.     iframe ,#cv{display: none;}
  33. </style>
  34.     <script id="jquery_183" type="text/javascript" class="library" src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
  35.     <script type="text/javascript" src="//sandbox.runjs.cn/uploads/rs/485/2vzbn4yy/clipboard.min.js"></script>
  36. </head>
  37. <body>
  38. <div class="bt">
  39.     <input type="button" id="copy" data-clipboard-target="#txt" value="复制文字"/>长满1600px宽满2840px;图片尺寸越大生成的文字代码越清晰,浏览器保存网页为图片。
  40.     <form id="uf">
  41.         <input type="file" name="file" id="up-button"/>
  42.         <input type="button" id="button" value="选择图片"/>
  43.     </form>
  44. </div>
  45. <canvas id="cv">fuck ie</canvas>
  46. <div id="txt"></div>
  47.  </body>
  48. </html>
  49.         <style> </style>
  50.                 <script>var cv = document.getElementById('cv');
  51. var c = cv.getContext('2d');
  52. var txtDiv = document.getElementById('txt');
  53. var fileBtn = document.getElementById("up-button");
  54. var copyBtn = document.getElementById("coby");
  55. var img = new Image();
  56. img.src = 'abn.jpg';
  57. img.onload = init; // 图片加载完开始转换
  58. fileBtn.onchange = getImg;
  59. // 根据灰度生成相应字符
  60. function toText(g) {
  61.     if (g <= 30) {
  62.         return '8';
  63.     } else if (g > 30 && g <= 60) {
  64.         return '&';
  65.     } else if (g > 60 && g <= 120) {
  66.         return '$';
  67.     }  else if (g > 120 && g <= 150) {
  68.         return '*';
  69.     } else if (g > 150 && g <= 180) {
  70.         return 'o';
  71.     } else if (g > 180 && g <= 210) {
  72.         return '!';
  73.     } else if (g > 210 && g <= 240) {
  74.         return ';';
  75.     }  else {
  76.         return '.';
  77.     }
  78. }
  79. // 根据rgb值计算灰度
  80. function getGray(r, g, b) {
  81.     return 0.299 * r + 0.578 * g + 0.114 * b;
  82. }
  83. // 转换
  84. function init() {
  85.     txtDiv.style.width = img.width + 'px';
  86.     cv.width = img.width;
  87.     cv.height = img.height;
  88.     c.drawImage(img, 0, 0);
  89.     var imgData = c.getImageData(0, 0, img.width, img.height);
  90.     var imgDataimgDataArr = imgData.data;
  91.     var imgDataimgDataWidth = imgData.width;
  92.     var imgDataimgDataHeight = imgData.height;
  93.     var html = '';
  94.     for (h = 0; h < imgDataHeight; h += 12) {
  95.         var p = '<p>';
  96.         for (w = 0; w < imgDataWidth; w += 6) {
  97.             var index = (w + imgDataWidth * h) * 4;
  98.             var r = imgDataArr[index + 0];
  99.             var g = imgDataArr[index + 1];
  100.             var b = imgDataArr[index + 2];
  101.             var gray = getGray(r, g, b);
  102.             p += toText(gray);
  103.         }
  104.         p += '</p>';
  105.         html += p;
  106.     }
  107.     txtDiv.innerHTML = html;
  108.  }
  109. // 获取图片
  110. function getImg(file) {
  111.     var reader = new FileReader();
  112.     reader.readAsDataURL(fileBtn.files[0]);
  113.     reader.onload = function () {
  114.         img.src = reader.result;
  115.     }
  116. }
  117. var clipboard3 = new Clipboard('#copy');
  118. clipboard3.on('success', function(e) {
  119.     console.log(e);
  120.     alert("复制成功!")
  121. });
  122. clipboard3.on('error', function(e) {
  123.     console.log(e);
  124.     alert("测试4复制失败!请手动复制")
  125. });
  126. </script>
诗梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar 风雪 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省常州市 电信 0

      好像用不了啊