87,996
社区成员
发帖
与我相关
我的任务
分享求个用Javascript把页面内所有图片全部压缩的代码，注意不是用CSS改width
最好能给完整代码，直接弄成js书签的形式更好。100分不值的话给个思路也行，请尽量详细一些（最好是伪代码），我连常用函数都不熟。
说一下目的，我是想在把网页用Evernote的剪藏保存之前把图片压缩一下。我大概算了一下，如果把图片的文件大小压缩到10%左右的话免费版的Evernote的流量应该就够用了。免费版的Evernote的每月流量只有60M。最好能自定义长宽和压缩程度，从代码的级别调整就行。能微调任意特定的图片的压缩参数最好。完全去掉图片用AdBlock就行了，不过感觉完全没有图片有点不对劲。
还有一般用js改图像结果只能是那种base64的东西把？我刚才看了一下，弄成base64之后文件大小好像会增加一些，有其他的更节省体积的方法么？Evernote的剪藏插件保存的应该是页面被js修改后的内容。
我平时用Chrome，不过如果Firefox有完美解决方法的话我也能用Firefox。
这是我搜了半天搜到的东西：
resize image before upload javascript - Google 搜索
https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/ （这个有点复杂，我有点难消化）
http://www.plupload.com/ （这个改完直接就上传了）
说一下目的，我是想在把网页用Evernote的剪藏保存之前把图片压缩一下。我大概算了一下，如果把图片的文件大小压缩到10%左右的话免费版的Evernote的流量应该就够用了。免费版的Evernote的每月流量只有60M。最好能自定义长宽和压缩程度，从代码的级别调整就行。能微调任意特定的图片的压缩参数最好。完全去掉图片用AdBlock就行了，不过感觉完全没有图片有点不对劲。
还有一般用js改图像结果只能是那种base64的东西把？我刚才看了一下，弄成base64之后文件大小好像会增加一些，有其他的更节省体积的方法么？Evernote的剪藏插件保存的应该是页面被js修改后的内容。
我平时用Chrome，不过如果Firefox有完美解决方法的话我也能用Firefox。
这是我搜了半天搜到的东西：
resize image before upload javascript - Google 搜索
https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/ （这个有点复杂，我有点难消化）
http://www.plupload.com/ （这个改完直接就上传了）
...全文
请发表友善的回复…
发表回复
jiangbai333 2015-01-27
- 打赏
- 举报
这是整出来了呗！ 回头看了看！ 感觉意义不大！
Braska 2015-01-27
- 打赏
- 举报
启用gzip压缩
xiao_w_xiao 2015-01-27
- 打赏
- 举报
我在另外一个帖子里面回复了
申祷无 2015-01-26
- 打赏
- 举报
我草，累死我了。卡在同源策略上一两个小时。最后终于发现这个玩意是可以关掉的了。
写代码的时候发现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)
申祷无 2014-11-17
- 打赏
- 举报
意思我已经说了。我表达可能不准确，我的意思不是完全用js，并且不调用任何对象。
jiangbai333 2014-11-16
- 打赏
- 举报
你这个好像比用canvas的方法复杂多了啊。今天又看了一下Mozilla网站上的那个，感觉好像能理解了。不知道是不是昨天半夜太困了影响理解能力了。[/quote]
rgbaster.js 就是利用canvas获取颜色！
申祷无 2014-11-16
- 打赏
- 举报
等几天没人给写的话就自己写吧，感觉自己应该能写了。先干正事去。
申祷无 2014-11-16
- 打赏
- 举报
你这个好像比用canvas的方法复杂多了啊。今天又看了一下Mozilla网站上的那个，感觉好像能理解了。不知道是不是昨天半夜太困了影响理解能力了。
jiangbai333 2014-11-16
- 打赏
- 举报
我觉得可以实现！
用rgbaster.js 获取图片像素颜色！ 然后就是你自己写算法了！ 比如获得了a点颜色 然后获取a点周围8个点颜色 然后用你自己的算法压缩成一个点！ 算法你可以看数字图像处理的一些常用算法！ rgbaster.js 我也没用过 所以具体怎么写 我不清楚！ 就是给你提供一个思路！
斯洛文尼亚旅游 2014-11-16
- 打赏
- 举报
js是客户端的。。图片都下载下来了就算js能压缩有什么意思？
而且js应该也不能压缩。。要压缩要用服务器端的语言，生成图片的时候多生成几个尺寸的，或者压缩下图片的像素什么的
