一.前言 最近有这样的一个需求,需要把两个同名的.mtl文件和.obj文件打包成一个同名的.zip压缩包.刚开始文件不多的时候,只有几个,或者十几个,甚至二三十个的时候,还能勉强接受手动修改,但是随着项目的进展,手动压缩是没有效率且浪费时间的,于是就有了想用程序实现自动打包的想法. 二.使用jszip打包压缩包 首先项目的前端是通过jszip进行解压读取的,既然它能解压,自然也可以实现压缩.上GitHub上找了关于zip的压缩插件,还是发现jszip的star是排名第一的,不用用,有些过意不去啊

因为canvas总结到后面又想到了jszip的一些事情,那就索性也回去看看吧.试过,至少谷歌和火狐都是支持jszip的. 1.  jszip的使用 官方文档说的很清楚了,而且也有读取zip文件.生成zip文件下载的js代码示例,下面就简单说说吧. <1>读取zip文件,一般用于上传zip文件后读取内容,不过我懒得写input结构,并没有实现,只是了解一下,官网文档有相关说明. //****读取zip文件,可以用在文件上传时,content就需要传入一个file var new_zip = ne

代码如下: <?php header("Content-type=html/text;charset=utf-8"); function download($file_name,$file_sub_dir) { $file_name = iconv("utf-8","gb2312",$file_name); $file_path = $_SERVER['DOCUMENT_ROOT'].$file_sub_dir.$file_name; if

最近用到 java,用tomcat起的服务,经常服务关了,对应的进程还在跑,导致再次启动服务失败,需要手动关闭进程. 使用 dos命令虽然只有两行,总是输,也很烦. netstat -ano | findstr 8080 //查找8080端口,对应的进程 taskkill /pid 5684 /f //关闭进程 5684 于是就想着,写一个 .bat 的文件,每次直接点击一下就好,可惜 dos命令玩不熟,折腾一番,决定放弃,换自己熟悉的语言 node来,然后使用 pkg 将node文件打包为 .

vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/xx.png, 我们希望改为 https://oss.xx.com/img/xx.png 思路: 了解到 publicPath 可以修改项目内静态文件的引用路径, 尝试这样修改 module.exports = { .. publicPath:'https://oss.xx.com/img' ..

这讲我们来讲解下如何使用phonegapa创建项目环境并通过她们将sencha touch打包成app,这里我们只讲解打包android的apk,打包ios的过程有点类似,但是需要在mac环境下,最后通过xcode导出成ipa安装程序: 一.phonegap环境搭建: phonegap从3.0开始已经不再使用手动的方式搭建项目了,而是使用command-line命令行工具来搭建项目环境,并且插件引入的机制也在3.0做了调整,采用了模块化的方式,即需要什么功能模块就通过命令行工具来安装对应的模块,

使用插件webpack-spritesmith生成雪碧图 1.安装webpack-spritesmith:npm install --save-dev webpack-spritesmith 2.配置webpack.config.js new SpritesmithPlugin({ //生成的雪碧图本身就压缩了图片大小 src: { cwd: path.resolve(__dirname, 'src/image/icon'), //准备合并成sprit的图片存放文件夹 glob: '*.png'

当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run build : 打包项目,资源使用相对路径,所以会出现路径错误问题. 绝对路径:从盘符开始的路径,如:C:\windows\system32\cmd.exe 相对路径:从当前路径开始的路径 我项目中静态图片都是放在和src同级的static目录中,写的都是相对路径 开发过程中npm run dev读取图片是没问题的,

首先项目是vue-cli搭建的,项目结构如下: 然后发现在css里写的图片引用地址在开发时正常显示,但在打包扔上服务器之后报错 报的是404,路径前面多了/static/css,不知道为啥. 在自己慢慢摸索之后发现了解决方法,其实很简单,只需把config下的index.js的assetsPublicPath配置成你项目的根目录路径就行了,例如: 图片也能正常访问了. 网上还看到说把图片都放到static下的,我试了下也是要配置assetsPublicPath成根目录的不然还是报错. 转自:ht

上一篇我们讲了如何用node.js给图片加水印,但是只是给某一张图片加,并没有涉及到批量处理.这一篇,我们学习如果批量进行图片加水印处理. 一.准备工作: 首先,你要阅读完这篇文章:http://www.yuanbo88.com/article.php?rid=31. 然后,我们安装node.js的一个模块:imageinfo. npm install imageinfo 二.直接上DEMO: 步骤如下: step1:文件夹结构 step2:JS代码 //引用文件系统模块 var fs = re

打包之前需要修改如下配置文件: 配置文件一:build>>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件(图片路径失效)的问题) 配置文件二:config>>>index.js(修改assetsPublicPath:'./' ,修改目的是为了解决js找不到的问题) 打包好后双击index.html可以正常浏览网页就说明没问题了

用vue做了一个小的移动端项目,从头到尾做下来,感觉自己好多东西都没弄清楚过.也学到了很多,已整理笔记在自己电脑上,但是比较零散,空了再来仔细整理整理. 于是,上周五模拟好数据(接口还未写),准备打包发布到服务器上面看看效果. 这时,真的问题就来了,很多图片没出来,仔细一看,这特么的路径完全不对呀! 虽然以前也做vue, 但是仔细想想,自己还从来没有用vue-cli打包过后来看,一直是在本地边开发边看的. 所以呢,什么都得自己实践,才能学得更多! 废话不多说,直接上自己的代码例子: 之前我也写过

项目打包,默认是打包在根目录下面的.当然我们可以通过设置,打包到任意子目录中去. 但是,当项目中引入资源的,比如:引入图片资源.js资源.或者字体图标之类的.那么可能在这个中间又会踩坑. 1.在vue文件引入图片 例如,我们将一张图片放到资源目录 /static/image/lyf.jpg 我们在 vue 文件中用下面的代码来使用这张图片. <img src="static/image/lyf.jpg" alt=""> 注意,最前面不要加 / ,如果是这

今天准备把vue-cli build 的文件发到服务器上单发现会出现图片找不到的问题 解决办法如下 修改 assetsPublicPath: './' .打开webpack.prod.conf.js,在output:增加 publicPath: './' 虽然解决了资源路径的引用问题,但是资源里面的背景图片还是不显示, background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了url(static/

步骤一:创建项目 npm init 步骤二:安装 request,cheerio,async 三个模块 request 用于请求地址和快速下载图片流. https://github.com/request/request cheerio 为服务器特别定制的,快速.灵活.实施的jQuery核心实现. 便于解析html代码. https://www.npmjs.com/package/cheerio async 异步调用,防止堵塞. http://caolan.github.io/async/ np

最近在做一个提供给浏览器和node同时使用的js的url模板工具类,在用什么打包工具上纠结了一段时间,正好有一天在知乎上看到了关于rollup的介绍,在自己试了试之后,就决定用rollup.js来打包自己的工具类了. 这篇文章主要是为了让对rollup.js也有兴趣的同学能够快速入门rollup的使用方式而写的,文章除了开始对rollup.js的基本介绍之外,主要用多个demo来介绍rollup.js的不同使用方法,以及介绍一些比较常用的rollup插件.读者可以选择自己有兴趣的部分查看. de

一:只上传一张图片 1.1:node需要安装的插件,先安好 npm install ali-oss uuid co --save A.ali-oss 用途:aliyun OSS(Object Storage Service) js client for Node and Browser env: 文档地址:https://www.npmjs.com/package/ali-oss 学习参考地址:https://help.aliyun.com/document_detail/31927.html?

sharp 是 Node.js 平台上相当热门的一个图像处理库,其实际上是基于 C 语言编写 的 libvips 库封装而来,因此高性能也成了 sharp 的一大卖点.sharp 可以方便地实现常见的图片编辑操作,如裁剪.格式转换.旋转变换.滤镜添加等.当然,网络上相关的文章比较多,sharp 的官方文档也比较详细,所以这不是本文的重点.这里主要是想记录一下我在使用 sharp 过程中遇到的一些稍复杂的图片处理需求的解决方案,希望分享出来能够对大家有所帮助. https://blog.csdn.

前言 大家在工作中肯定有没有遇到过图片尺寸和我们要求的尺寸不一致的情况吧?通常我们会在网上找一下找在线的或者下载一个小工具,再或者通过ps的批处理解决.但是,作为程序猿,当然还是通过代码来解决这种小问题啦.所以,闲话不多说啦,开始写我们的代码啦~~ 简单的搭建一下 新建一个 canvas-image-resize 目录 初始化一个node项目工程 npm init -y 安装依赖,这里主要用到了三个依赖,分别是处理图片.批量处理文件.压缩成zip文件 npm i canvas glob arch

index.js var server = require("./server"); var router = require("./router"); var requestHandlers = require("./requestHandlers"); var handle = {} handle["/"] = requestHandlers.start; handle["/start"] = requ

关于base64 优点: base64就是一串字符串码表示的图片,在加载页面和js时一块加载出来,减少了加载图片时的http请求.加载一张图片时会发起一次http请求,http请求每次建立都会需要一定的时间,对于加载一张小图来说,下载图片所需的时间会比建立http请求的时间要短, 所以对小图进行base64转码是优化http请求,保证页面加速渲染,加快页面加载速度. 缺点: base64会增加图片本身的大小,对于小图来说,转码增加的大小导致js加载延时能远远弥补建立http请求的时长.这种取舍是