探讨 ASP 图片处理的新方法

[Rimifon]

要求服务器安装了 IE9，现在能生成并保存 png 图片了，但是绘图那里暂时没法将 img 绘制上去，用 sleep 能绘制成功，但是没法 toDataURL。时间不早了，先休息，各位有空的可以接着研究

function zipImage(src, w, h) {
	// 启动 IE9 模式
	var doc = new ActiveXObject("htmlfile");
	doc.write("<meta http-equiv='X-UA-Compatible' content='IE=9' />");
	// 加载图片
	var img = doc.createElement("img");
	img.src = "C:\\Users\\Rimifon\\Desktop\\" + src;
	img.setAttribute("crossOrigin", "anonymous");
	// 创建画布
	var cvs = doc.createElement("canvas");
	cvs.width = w; cvs.height = h;
	var ctx = cvs.getContext("2d");
	// 将图片压缩绘制到指定大小
	ctx.drawImage(img, 0, 0, w, h);
	var str =  cvs.toDataURL("image/png").slice(22);
	// base64 转 二进制存储
	var xml = doc.createElement("xml");
	xml.loadXML("<x/>");
	var root = xml.documentElement;
	root.dataType = "bin.base64";
	root.text = str;
	var bin = root.nodeTypedValue;
	var stm = new ActiveXObject("Adodb.Stream");
	stm.type = 1; stm.open();
	stm.write(root.nodeTypedValue);
	stm.saveToFile("03.png", 2); stm.close();
	return str;
}

WSH.Echo(zipImage("02.jpg", 400, 225));

[Rimifon]

测试通过了，无需 aspjpeg 组件，支持 2012及以上版本的服务器，2008 需要服务器安装 IE9即可。下面是 WSH 代码示例：

<job><script language="javascript">
WSH.Echo(scaleImage("home.jpg", 200, 200));

function scaleImage(src, w, h) {
	var gd = new GD;
	var bin = gd.scaleImage(src, w, h);
	gd.save(bin, "home.scaled.png");
	return bin;
}

function GD() {
	this.newImg = function(src) {
		stm.type = 1; stm.open();
		stm.loadFromFile(src);
		var bin = stm.read();
		stm.close();
		root.nodeTypedValue = bin;
		var img = doc.createElement("img");
		img.src = "data:image/jpeg;base64," + root.text;
		img.crossOrigin = "anonymous";
		return img;
	};
	this.scaleImage = function(src, w, h) {
		cvs.width = w; cvs.height = h;
		var img = this.newImg(src);
		var ss = img.width / img.height, ts = w / h;
		// 对比原宽高比和现在的宽高比，前者大于后者，基于高度裁剪，否则基于宽度裁剪
		var scale = ss > ts ? img.height / h : img.width / w;	// 缩放比
		var sx = (img.width - w * scale) / 2;
		var sy =  (img.height - h * scale) / 2;
		ctx.drawImage(img, sx, sy, w * scale, h * scale, 0, 0, w, h);
		root.text = cvs.toDataURL("image/png").slice(22);
		return root.nodeTypedValue;
	};
	this.save = function(bin, path) {
		stm.open();
		stm.write(bin);
		stm.saveToFile(path, 2);
		stm.close();
	};
	var doc = new ActiveXObject("htmlfile");
	var stm = new ActiveXObject("Adodb.Stream");
	var xml = doc.createElement("xml");
	xml.loadXML("<x/>");
	var root = xml.documentElement;
	root.dataType = "bin.base64";
	// 启动 IE9+ 模式
	doc.write("<meta http-equiv='X-UA-Compatible' content='IE=edge' />");
	// 创建画布
	var cvs = doc.createElement("canvas");
	var ctx = cvs.getContext("2d");
}
</script></job>

[Rimifon]

上面的代码在桌面上测试没问题，但是放到服务端运行的时候，会遇到图像异步加载的问题，导致绘制图片出现空白，所以，暂时只能用 http 异步等待的方式来处理这个问题：

	if(img.complete) return img;
	// ASP 模式下有可能需要异步等待图像加载完成
	var xhr = new ActiveXObject("MsXml2.ServerXmlHttp");
	while(!img.complete) {
		xhr.open("HEAD", "http://localhost/web.config", true);
		xhr.send(); xhr.waitForResponse();
	}
        return img;

各位有更好的方法欢迎指导

[Rimifon]

论坛里代码无法更新，最新代码发到博客了：点击查看

[hookee]

[无·法]

aspjpeg 是付费组件，建议不要用。另外外部调用速度是个问题，而且还会消耗服务器资源比较多。如果是用户上传的图片需要压缩的话可以交给前端去做，用js压缩，这样可以减少服务器的不少工作。

[Rimifon]

引用 5 楼 无·法 的回复:

aspjpeg 是付费组件，建议不要用。另外外部调用速度是个问题，而且还会消耗服务器资源比较多。如果是用户上传的图片需要压缩的话可以交给前端去做，用js压缩，这样可以减少服务器的不少工作。

你好，HTML(CSS) 版主
你好这里探讨的是服务端的 canvas 图片处理，不是 aspjpeg，而且已经实现功能了。
之所以做服务端处理，是因为要对接小程序图片上传。当然，小程序上传也可以使用canvas，但是封装调用的不是很友好，还需要额外在wxml 中放置一个 canvas 标签。

[Rimifon]

另外，安卓中的 canvas 压缩图片，生成的是 png 格式的，最终文件可能会比压缩之前还要大。