精华内容
下载资源
问答
  • js字符画(图片转字符)简单版详细注释
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            <meta http-equiv="X-UA-Compatible" content="ie=edge" />
            <script>
                let img = new Image();// 储存图片信息
                let canvas;// canvas实例
                let ctx;// 画笔
                let logo;// 生成的字符画
                let flag = false;// 加载完毕标识
                const IMAGE_SIZE = 350;// 生成画规模
    
                // 加载canvas
                window.onload = () => {
                    canvas = document.getElementById("canvas");
                    ctx = canvas.getContext("2d");
                };
    
                // 执行
                function start() {
                    if (!flag) alert("尚未加载图片");
                    // 清空字符画
                    logo = "";
                    // 先记录比率,如果宽,那么先缩放宽,再用比率算出长,反之同理,这里是保证不超过不超过设定规模
                    let rate = img.width / img.height;
                    if (rate > 1) {
                        img.width = IMAGE_SIZE;
                        img.height = IMAGE_SIZE / rate;
                    } else {
                        img.height = IMAGE_SIZE;
                        img.width = IMAGE_SIZE / rate;
                    }
     
                    // 将图片绘制在canvas上
                    ctx.drawImage(img, 0, 0, img.width, img.height);
     
                    // 从canvas上获取像素信息
                    let imgData;
                    try {
                        imgData = ctx.getImageData(0, 0, img.width, img.height);
                    } catch {
                        alert("图片加载失败,请重新选择图片或刷新页面。");
                    }
                    
                    // 读取颜色及规模
                    let scale = parseInt(document.getElementById("thisSize").value);
                    let color = document.getElementById("thisColor").value !== "false";
                    // 调整字符大小,追求更高精度就在这里调小
                    let size = 8 - scale;
                    // 设置zoom缩放
                    document.querySelector("#rightDiv").style.zoom = size / 6;
     
                    // 生成主体,逐个读取字符
                    for (let i = 0; i < img.width; i = i + size) {
                        for (let j = 0; j < img.height; j = j + size) {
                            const curPoint = (i * img.width + j) * 4; // ×4是因为,1为r,2为g,3为b,4为a,四个是一组rgba值
                            const [r, g, b] = imgData.data.slice(curPoint, curPoint + 3);
    
                            const gray = r * 0.3 + g * 0.6 + b * 0.1; // 计算灰度值
                            const thisColor = `rgb(${r},${g},${b})`; // 保存像素点rgb值
                            color ? toText(gray, thisColor) : toText(gray); // 有颜色就转化rgb值,没颜色就不转
                        }
                        logo += "</br>";
                    }
     
                    document.getElementById("rightDiv").innerHTML = logo; // 将字符串填充到html
                    alert("渲染成功");
                }
     
                // 读取图片
                function getImg(file) {
                    flag = false;
                    var reader = new FileReader();
                    reader.readAsDataURL(document.getElementById("upButton").files[0]);
                    reader.onload = function () {
                        img.src = reader.result;
                        flag = true;
                        alert("加载完成");
                    };
                }
     
                // 根据灰度转化字符,添加颜色
                function toText(g, thisColor) {
                    if (thisColor) logo += `<span style='color:${thisColor}'>`;
    
                    if (g <= 40) logo += "?";
                    else if (g > 40 && g <= 80) logo += "》";
                    else if (g > 80 && g <= 120) logo += "!";
                    else if (g > 120 && g <= 160) logo += ":";
                    else if (g > 160 && g <= 200) logo += "~";
                    else if (g > 200 && g <= 240) logo += ";";
                    else logo += "。";
    
                    if (thisColor) logo += "</span>";
                }
            </script>
            <title>图片转字符</title>
        </head>
     
        <body>
            <!-- 图片上传 -->
            <form id="uf">
                <input type="file" name="file" id="upButton" onchange="getImg()" />
            </form>
     
            <!-- 选择字符画大小 -->
            请输入字符画清晰度:
            <select id="thisSize">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
     
            <!-- 选择颜色 -->
            是否使用颜色:
            <select id="thisColor">
                <option value="true">是</option>
                <option value="false">否</option>
            </select>
     
            <!-- 执行按钮 -->
            <button onclick="start()">开始执行</button>
     
            <!-- 辅助canvas,设为隐藏 -->
            <div id="leftDiv">
                <canvas id="canvas" width="400" height="400" style="display: none;">Canvas</canvas>
            </div>
     
            <!-- 生成位置 -->
            <div id="rightDiv" style="font-family: 'Consolas'; line-height: 0.9;"></div>
        </body>
    </html>

     

    使用效果

    效果还可以,可以自行调精度。

    展开全文
  • 纯原生JS结合canvas实现图片转Ascii字符,可带颜色。字符集可选,RGB灰度值算法使用了六种也可选,均可另行修改。
  • 选择文件,回显图片以及base64格式后字符串隐藏提交文本域 <div class="col-sm-8 contain_img"> <img src="" style="display: none"></img> <input class="form-control" id="image" ...

    选择文件,回显图片以及转base64格式后字符串隐藏提交文本域

    <div class="col-sm-8 contain_img">
    		<img src="" style="display: none"></img>
    		<input class="form-control" id="image" type="file" onchange="imgChange()">
    	<div style="display: none">
    		<textarea  id="frontIcon" class="summernote" name="frontIcon" ></textarea>
    	</div>
    </div>

    触发onchange事件

    function imgChange(){
                var reader = new FileReader();
                //上传图片最大值(单位字节)( 2 M = 2097152 B )超过2M上传失败
                var AllowImgFileSize = 2100000; 
                var file = $("#image")[0].files[0];
                if (file) {
                    //将文件以Data URL形式读入页面
                    reader.readAsDataURL(file);
                    reader.onload = function (e) {
                        var base64Code=reader.result
                        if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
                            alert( '上传失败,请上传不大于2M的图片!');
                            return;
                        }else{
                            $('.contain_img>img').css('display','block');//回显标签显示
                            $("img").attr("src",base64Code);//回显图片添加
                            $("#frontIcon").val(base64Code);//存入隐藏提交域
                        }
                    }
                }
    		}

    表单提交到后台,base64格式直接使用String字符串格式接收。

    展开全文
  • 主要介绍了vue项目base64字符转图片的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 看到网上有其他人用Python,js实现的图片转字符画,挺有趣的,于是我尝试着用PHP实现了一个。此代码与我的博客(http://blog.csdn.net/somehow1002/article/details/77600186)内的代码基本一致。如无积分,请去博客...
  • //document.getElementById('location').setAttribute( 'src', 'data:image/png;base64,' + da );

    //document.getElementById('location').setAttribute( 'src', 'data:image/png;base64,' + da );

    展开全文
  • 1.图片转Base64字符串时,前面会生成如下图的前缀。 在转回图片时,需去除前缀。 String str = text.substring(text.indexOf(",")+1); //text为base64字符

    1.图片转Base64字符串时,前面会生成如下图的前缀。 在转回图片时,需去除前缀。

    String str = text.substring(text.indexOf(",")+1);  //text为base64字符串 

    展开全文
  • PHP实现图片转字符

    千次阅读 2017-08-26 11:59:05
    看到网上有其他人用Python,js实现的图片转字符画,挺有趣的,于是我尝试着用php实现了一个。 原理 图片转字符画本质上是将图片上的像素,根据其明暗程度的不同,选用不同的字符替换。其实现过程一般为 设置一个...
  • base64字符串与图片的相互转换

    千次阅读 2018-02-27 14:14:18
    一.base64字符串转图片原理是当base64字符串作为img标签的src属性时,如果是有效的,则可以预览。而若要下载,则创建一个新的a标签将a标签的href属性设置为该...图片转base64字符串分为两种,一种是提供图片的src标...
  • 通过javascript图片转化为字符画 1.获取上传图片对象数据Javascript无法直接获取本地上传的图片的数据,html5可以解决这一问题 。html5里面的FileReader interface可以把图片对象的数据读到内存,然后通过接口的...
  • canvas加载base64字符图片 canvasbase64图片错误碰到一个项目需求,需要将后台传过来的图片还有数据合成一张图片,(里面有个连接要成二维码),这个时候第一下想到的肯定就是用canvas,我们先来看一下需求和...
  • base64字符串转图片原理是当base64字符串作为img标签的src属性时,如果是有效的,则可以预览。而若要下载,则 创建一个新的a标签 将a标签的href属性设置为该...图片转base64字符串分为两种,一种是提供图片的src标签
  • ## 我在做一个服务器用MQTT协议与DTU终端通讯,发送modbus指令,DTU...我在网上也找了很多十六进制字符转字符串的函数代码,跟我这个差不多,我也都调试过,都没有解决这个问题。这究竟是什么问题? 求大神!!!
  • goJs提供了方法可以将画布转化为base 64位的url链接,通过a链接将base64位格式图片再下载到本地。 官方提供的API - makeSvg(properties) 创建一个包含当前Diagram的SVG渲染的SVGElement。 - makeImage...
  • 图片转字符 升级版,顺便加了个 GUI 地址:待定 界面及使用 图片转换时,界面会卡顿,表现为按钮按下去不会回弹,正常现象 转换完成的图片视频在软件根目录 视频转换请勿使用高分辨率,速度太慢,当然输入分辨率越...
  • js将二维码字符串转换为二维码图片 首先下载qrcode.js插件,地址为: 链接: https://pan.baidu.com/s/1aoBM3Ki5ZAu1fdjpyCbPvg 提取码: csmf 下面代码为:二维码展示div //二维码展示 js function...
  • 主要介绍了JavaScript正则表达式替换字符串中图片地址(img src)的方法,结合实例形式分析了JS正则替换的常用技巧与注意事项,需要的朋友可以参考下
  • 1、首先了解一下为什么要把图片文件转换成Base64的字符串  在常规的web开发过程中,大部分上传文件都是在web页面端通过表单直接提交,再由服务器端捕获请求来进行处理的。但是在前后端分离趋于一种流行趋势,再加上...
  • image-to-text 一个纯前端的图片转字符画工具
  • JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传。 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等。 主要思想: 使用canvas.toDataURL()方法将...
  • svg图片转字符

    2017-12-28 15:17:00
    2019独角兽企业重金招聘Python...4.选择需要图片 5.点击右下角标号 6.查看css以及编号 7.下载文字   转载于:https://my.oschina.net/u/3040505/blog/1596134
  • js字符与ASCII码互的方法

    千次阅读 2018-11-26 20:35:40
    var str = 'abcd'; //获取对应的ascii var codeValue = str.charCodeAt(0); console.log(codeValue);... //将对应的编码值转为字符 var charValue = String.fromCharCode(codeValue); console.log(cha...
  • 主要介绍了java和javascript中过滤掉img形式的字符串不显示图片的方法,以实例形式分别讲述了采用java和javascript实现过滤掉img形式字符串的技巧,需要的朋友可以参考下
  • 实现将图片转base64字符

    千次阅读 2019-05-15 17:27:19
    接口中一个参数要求需要图片的base64字符串,所以下面整理了一下图片转base64字符串的方法: 方法1:(根据图片路径) var image = new Image(); image.src = imgurl; //imgurl 就是你的图片路径 image.onload ...
  • JS实现16进制转字符

    千次阅读 2020-01-20 15:37:05
    将一个十六进制的值转为普通的UTF字符串 function hexTostr(hex) { var trimedStr = hex.trim(); var rawStr = trimedStr.substr(0, 2).toLowerCase() === "0x" ? trimedStr.substr(2) : trimedStr; var len ...
  • 一个使用故事(或任何字符串)制作图片JavaScript库。 唯一的依赖关系是 支持浏览器,require.js,Webpack和您可能想到的任何其他模块加载器。 该图书馆的在线演示在。 原料药 storypictures ( data ) . then ( ...
  • js 去掉字符串中的图片标签 var tieZiContent = $("#tieZiContent").html().replace(/<img.*?>/g ,''); js 用正则表达式替换字符串中的图片地址(img src) content.replace(/<img [^>]*src=['"]([^'...
  • 一.base64字符串转图片 原理是当base64字符串作为img标签的src属性时,如果是有效的,则可以预览。 而若要下载,则 创建一个新的a标签 将a标签的href属性设置为该base64...图片转base64字符串 分为两种,一种是提...
  • 如果是这样,那么就只能把后端生成的图片转成ByteArray返回给前台,让前台重新把它变成图片!{ "code": "200", "msg": "操作成功", "data": "iVBORw0KGgoAAAANSUhEUgAAAFAAAAAaCAIAAACvsEzwAAABxElEQVR42t

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 200,212
精华内容 80,084
关键字:

js字符转图片