资讯专栏INFORMATION COLUMN

开源自己写的图片转Ascii码图工具

Yangyang / 1090人阅读

摘要:地址如果觉得不错可以给个或者提出你的建议,基于的图片转示意图。瓶颈目前项目的瓶颈存在于这个插件,把图片转成码在浏览器中输出是十分快速的,但是后期将输出的码转换成图片时,使用了插件,这个插件在转换图片的过程中十分缓慢,导致最后的输出缓慢。

GitHub地址:https://github.com/qiangzi772...

如果觉得不错可以给个star或者提出你的建议

img2Ascii,基于JS的图片转ASCII示意图。

效果

转码前图片

转码后图片

构建
npm install 或者 yarn install

之后通过

npm run dev

即可打开项目

使用

以下代码在main.js

const Img2Ascii=require("./index");
const img=require("./assets/av.png");

new Img2Ascii(img,(nSrc,img)=>{
    const nImg = new Image();
    nImg.src = nSrc;
    nImg.style.width = img.width + "px";
    nImg.style.height = img.height + "px";
    nImg.onload = () => {
        document.body.appendChild(nImg);
        document.getElementById("tip").style.display="none";
    }
});

Img2Ascii方法需要传入两个参数,第一个参数是图片路径,第二个参数是图片转换完毕后的回调函数,需要自己在回调函数中注入新生成的图片节点,否则看不到效果。

实现思路

把图片在canvas中绘制后,利用getImageData接口获取图片的rgba,计算rgba值转换为对应的ASCII码,在适当的位置进行换行,然后整体转换便完成。

瓶颈

目前项目的瓶颈存在于html2canvas这个插件,把图片转成ASCII码在浏览器中输出是十分快速的,但是后期将输出的ASCII码转换成图片时,使用了html2canvas插件,这个插件在转换图片的过程中十分缓慢,导致最后的输出缓慢。接下来会把html2canvas这个插件换成使用别的插件实现,忘广大网友提供一些转图片的插件。

除此之外我还写有draggable拖拽库以及ant-template模板引擎,如果觉得不错可以给个star

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83954.html

相关文章

  • 开源自己写的图片Ascii码图工具

    摘要:地址如果觉得不错可以给个或者提出你的建议,基于的图片转示意图。瓶颈目前项目的瓶颈存在于这个插件,把图片转成码在浏览器中输出是十分快速的,但是后期将输出的码转换成图片时,使用了插件,这个插件在转换图片的过程中十分缓慢,导致最后的输出缓慢。 GitHub地址:https://github.com/qiangzi772... 如果觉得不错可以给个star或者提出你的建议 img2Ascii...

    宠来也 评论0 收藏0
  • 写个脚本薅区块鱼羊毛

    摘要:成果展示总结这个脚本就是简单的利用的库,来模拟用户注册的流程,以达到邀请用户的目的。这个脚本也有很多不完善的地方,比如验证码识别机器人检测一些错误判断都没有,待完善的地方还有很多。这个脚本只是为了和大家交流学习。   区块鱼是一个基于区块链的游戏,这个游戏目前有个邀请活动,邀请好友注册,送相应种类的鱼,不同的鱼价格不一样 普通鱼 0.015 ETH起(邀请3个好友) 稀缺鱼 0.05...

    zhongmeizhi 评论0 收藏0
  • 写个脚本薅区块鱼羊毛

    摘要:成果展示总结这个脚本就是简单的利用的库,来模拟用户注册的流程,以达到邀请用户的目的。这个脚本也有很多不完善的地方,比如验证码识别机器人检测一些错误判断都没有,待完善的地方还有很多。这个脚本只是为了和大家交流学习。   区块鱼是一个基于区块链的游戏,这个游戏目前有个邀请活动,邀请好友注册,送相应种类的鱼,不同的鱼价格不一样 普通鱼 0.015 ETH起(邀请3个好友) 稀缺鱼 0.05...

    warmcheng 评论0 收藏0

发表评论

0条评论

Yangyang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<