15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 网页制作图片素材保存技巧:图片助手(ImageAssistant)

网页制作图片素材保存技巧:图片助手(ImageAssistant)

时间:2023-07-26 12:54:02 | 来源:网站运营

时间:2023-07-26 12:54:02 来源:网站运营

网页制作图片素材保存技巧:图片助手(ImageAssistant):搜集图片,再一张张保存图片再命名,会给网页制作带来很不好的体验和效率。

所以,为了摆脱这种模式,我找到了Chrome下的一款图片保存插件:

图片助手(ImageAssistant)Chrome应用商店: https://chrome.google.com/webstore/detail/dbjbempljhcmhlfpfacalomonjpalpko

下载安装好了,就可以开始制作网页了

展示一个网页的制作,用这个ImageAssistant插件辅助开发。

这是一个简单有效的图片素材保存替换教程。

希望可以帮到你的开发,或带给你灵感。


第一步,打开chrome,寻找自己需要的图片,比如我要一张banner图片,右键复制它的图片地址。

PS:这个图片地址是指在这个http://www.bnu.edu.cn服务器上的地址

图片地址:
https://www.bnu.edu.cn/images/content/2020-05/20200521085839240146.jpg
第二步,将复制的图片地址粘贴到网页的<img>标签Src属性中。


重复上述两步,让你项目的所有网页上<img>的src属性全都变成所谓的外链为止:

图片地址:
https://www.bnu.edu.cn/images/content/2020-05/20200521085839240146.jpg
第三步,点击Chrome网页插件ImageAssistant的提取本页图片,

所有引用的图片都在下载列表上,点击下载全部即可完成图片保存到本地。

默认的保存规则是,文件名是ix00000xx的,

文件位置:下载/ImageAssistant/当前时间>网页名。

图片保存位置
在项目文件中新建一个文件夹images,并打开它。

新建一个Finder文件窗口,之后再将以网页名命名的文件夹拖到images文件夹中。

此时,若图片已经全部下载到本地,则项目中已经存在所有需要的图片。

第四步,更换项目的所有HTML文件中<img>的src属性,首先针对所有HTML中存在一样的地址,如Logo图片、底部图片。

使用IDE(集成开发环境)的软件替换,以Vscode为例,首页的logo图片文件为例。

点击全部替换按钮,即可将首页的logo图片地址全部替换成本地路径。

全部替换按钮
最麻烦的是针对于不同的数据字段,先要剔除外链。

目前想到最好的方法是,找一个支持正则表达式的编辑器,编写正则表达式来将所有的http开头的url外链删除,如此,外链已成功清除。

接下来就是在已经剔除的src属性中补充本地图片地址就好,这个过程最好是分列两个窗口,一个是网页文件,一个是文件资源管理器,确保本地图片地址正确。

这样相比,平常的图片搜寻是不是要麻烦一些呢

关键词:图片,技巧,助手,保存,素材

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭