imgmaker -- 解放双手高效生成占位图

背景

在前端的日常开发中,经常会碰到这样的情景:

  1. 在写一个h5页面,视觉稿此处有个375*200的背景图,但是切图又没给,只能先随便找个图或者直接用背景色替代,往往背景图被拉伸,或者背景色很难看
  2. 在写后台的时候,需要提供图片上传的功能,这里一般是需要限制图片上传尺寸的,而开发手头并没有合适尺寸的图片,不得不打开裁剪工具,低效又浪费时间。

在这样的困扰下,我开发了一款chrome插件--imgmaker(插件地址及仓库地址见文末),可以根据指定的尺寸、指定的关键字,生成想要的图片。可以在占位图的时候,输入想要的关键字,比如妹子、美女,动漫等等,生成一张赏心悦目的图片放上去,解决问题的同时没准还能提高工具效率(毕竟,好看的meizi图片 = 第一生产力)

最终效果

image.png

修改宽高、关键字以及输出类型,都会重新生成一张图片。图片内容是通过爬取百度图片的接口获得,每次都不同,更具新鲜感!同时点击save, 可以将图片保存到本地。

技术实现

chrome插件

chrome插件开发时,需要书写manifest.json,如果想要使用vue、react或者比较新的js语法的话,还需要配置一些自动化的工作流,同时热更新也同正常的热更新有所区别。经过调研后,直接使用现成的模版进行修改开发,还比较好用,拿到手即可着手开发,非常方方便。模版地址

图片源获取

如果在插件中内置几张图片的话,会显得非常单调,故通过爬取百度图片的接口,来根据关键字,宽高获取图片,同时,chrome插件中允许配置跨域接口的地址,可以解决掉跨域的问题

图片的生成及下载

采用常规的canvas的drawImg以及toBlob进行绘制和下载。其中需要注意的是cover和contain的绘制,还是花了点时间。以画布大小作为canvas的宽高,contain模式时,只需要等比例对图片绘制区域进行缩放,而cover时,需要将短比例的边铺满,长比例的边裁剪,才能达到该效果。

结束语

最后,欢迎大家试用,希望能够带来工作效率的提升,奉上chrome商店地址(需梯子)及github地址(可以自行打包安装)

碎碎念

工作之余开发,欢迎issues,欢迎需求,也欢迎请喝茶

你可能感兴趣的:(imgmaker -- 解放双手高效生成占位图)