求个用Javascript把页面内所有图片全部压缩的代码，注意不是用CSS改width

Question

本帖最后由 shendaowu 于 2014-11-16 00:00:20 编辑

Answer 1

我觉得可以实现！
用rgbaster.js 获取图片像素颜色！ 然后就是你自己写算法了！ 比如获得了a点颜色 然后获取a点周围8个点颜色 然后用你自己的算法压缩成一个点！ 算法你可以看数字图像处理的一些常用算法！  rgbaster.js 我也没用过  所以具体怎么写 我不清楚！　　就是给你提供一个思路！

Answer 2

你这个好像比用canvas的方法复杂多了啊。今天又看了一下Mozilla网站上的那个，感觉好像能理解了。不知道是不是昨天半夜太困了影响理解能力了。

Answer 3

 rgbaster.js 就是利用canvas获取颜色！

Answer 4

js是客户端的。。图片都下载下来了就算js能压缩有什么意思？而且js应该也不能压缩。。要压缩要用服务器端的语言，生成图片的时候多生成几个尺寸的，或者压缩下图片的像素什么的

Answer 5

我草，累死我了。卡在同源策略上一两个小时。最后终于发现这个玩意是可以关掉的了。
写代码的时候发现toDataURL没法导出，然后发现网站上的图片和网站不在一个域名里。好像网站的服务器必须设置Access-Control-Allow-Origin才能导出。幸亏只是我自己用，不然这基本就无解了。
http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome#
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
不过这个模式好像是有危险的。开贴问一下会有什么危险吧。已经基本上成功了，之后都是一些修饰性的东西了。
代码写得很烂。$("body").append("<canvas id='img_resizer'></canvas>");
var canvas = document.getElementById("img_resizer");
var ctx = canvas.getContext("2d");
var img_cur = $("img")[0];
img_cur.crossOrigin = "anonymous";
var img_cur = $("img")[0];var MAX_WIDTH = 200;
var MAX_HEIGHT = 200;
var width = img_cur.width;
var height = img_cur.height;
 
if (width > height) {
  if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
  }
} else {
  if (height > MAX_HEIGHT) {
    width *= MAX_HEIGHT / height;
    height = MAX_HEIGHT;
  }
}
canvas.width = width;
canvas.height = height;ctx.drawImage(img_cur, 0, 0, width, height);
//ctx.fillStyle = "green";
//ctx.fillRect(10, 10, 100, 100);var dataURL = canvas.toDataURL();
//console.log(dataURL);
$("img:first").attr("src",dataURL)