所在位置:
首页 >
营销资讯 >
网站运营 > 网页制作图片素材保存技巧:图片助手(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属性中补充本地图片地址就好,这个过程最好是分列两个窗口,一个是网页文件,一个是文件资源管理器,确保本地图片地址正确。
这样相比,平常的图片搜寻是不是要麻烦一些呢