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

诗梦
410
文章
724
评论
更多
 2018年7月14日21:08:32 2 6.2K 次浏览 3601字

九一八，铭记历史，勿忘国耻，珍爱和平，振兴中华

请不要乱刷新多次本站，不然你有可能进入120秒的小黑屋！

这是一个在线生成字符画的html单页源代码，可用图片来生成字符画用来放记事本里好看(ˊᵒ̴̶̷̤ꇴᵒ̴̶̷̤ˋ)꒰，哈哈哈！看这文章的都知道干嘛就不瞎扯了。复制下面代码到诗梦的http://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>
  36.     <script type="text/javascript" src="//sandbox.runjs.cn/uploads/rs/485/2vzbn4yy/clipboard.min.js"></script>
  37. </head>
  38. <body>
  39. <div class="bt">
  40.     <input type="button" id="copy" data-clipboard-target="#txt" value="复制文字"/>长满1600px宽满2840px；图片尺寸越大生成的文字代码越清晰，浏览器保存网页为图片。
  41.     <form id="uf">
  42.         <input type="file" name="file" id="up-button"/>
  43.         <input type="button" id="button" value="选择图片"/>
  45.     </form>
  46. </div>
  47. <canvas id="cv">fuck ie</canvas>
  48. <div id="txt"></div>
  49.  </body>
  50. </html>
  52.         <style> </style>
  53.                 <script>var cv = document.getElementById('cv');
  54. var c = cv.getContext('2d');
  55. var txtDiv = document.getElementById('txt');
  56. var fileBtn = document.getElementById("up-button");
  57. var copyBtn = document.getElementById("coby");
  58. var img = new Image();
  59. img.src = 'abn.jpg';
  60. img.onload = init; // 图片加载完开始转换
  61. fileBtn.onchange = getImg;
  63. // 根据灰度生成相应字符
  64. function toText(g) {
  65.     if (g <= 30) {
  66.         return '8';
  67.     } else if (g > 30 && g <= 60) {
  68.         return '&';
  69.     } else if (g > 60 && g <= 120) {
  70.         return '$';
  71.     }  else if (g > 120 && g <= 150) {
  72.         return '*';
  73.     } else if (g > 150 && g <= 180) {
  74.         return 'o';
  75.     } else if (g > 180 && g <= 210) {
  76.         return '!';
  77.     } else if (g > 210 && g <= 240) {
  78.         return ';';
  79.     }  else {
  80.         return '.';
  81.     }
  82. }
  85. // 根据rgb值计算灰度
  86. function getGray(r, g, b) {
  87.     return 0.299 * r + 0.578 * g + 0.114 * b;
  88. }
  90. // 转换
  91. function init() {
  92.     txtDiv.style.width = img.width + 'px';
  93.     cv.width = img.width;
  94.     cv.height = img.height;
  95.     c.drawImage(img, 0, 0);
  96.     var imgData = c.getImageData(0, 0, img.width, img.height);
  97.     var imgDataimgDataArr = imgData.data;
  98.     var imgDataimgDataWidth = imgData.width;
  99.     var imgDataimgDataHeight = imgData.height;
  100.     var html = '';
  101.     for (h = 0; h < imgDataHeight; h += 12) {
  102.         var p = '<p>';
  103.         for (w = 0; w < imgDataWidth; w += 6) {
  104.             var index = (w + imgDataWidth * h) * 4;
  105.             var r = imgDataArr[index + 0];
  106.             var g = imgDataArr[index + 1];
  107.             var b = imgDataArr[index + 2];
  108.             var gray = getGray(r, g, b);
  109.             p += toText(gray);
  110.         }
  111.         p += '</p>';
  112.         html += p;
  113.     }
  114.     txtDiv.innerHTML = html;
  115.  }
  117. // 获取图片
  118. function getImg(file) {
  119.     var reader = new FileReader();
  120.     reader.readAsDataURL(fileBtn.files[0]);
  121.     reader.onload = function () {
  122.         img.src = reader.result;
  123.     }
  124. }
  127. var clipboard3 = new Clipboard('#copy');
  128. clipboard3.on('success', function(e) {
  129.     console.log(e);
  130.     alert("复制成功！")
  131. });
  132. clipboard3.on('error', function(e) {
  133.     console.log(e);
  134.     alert("测试4复制失败！请手动复制")
  135. });
  137. </script>
  • 版权声明： 发表于 2018年7月14日21:08:32
  • 转载注明：http://wrvs.cn/3717.html
匿名

发表评论

匿名网友 填写信息

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

评论：2   其中：访客  2   博主  0
    • avatar 风雪 @回复 0
      2018年7月24日 下午4:17  沙发

      好像用不了啊

      • avatar 　 @回复 0
        2018年10月4日 下午8:56  板凳

        用不了(或者不会用)+1