利用Html5 Canvas前端进行图片压缩 | 云上的日子
利用Html5 Canvas前端进行图片压缩
原创文章,转载请注明出处:http://www.aakuan.cn 云上的日子–AKuan
html代码如下,需要一个Canvas画布,一个隐藏的img图片(临时存储,尤其是WebAPP开发中,防止转化的时候图片可能会闪烁一下,创建隐藏的图片转码完毕后再导入到需要展示的img标签下,可解决此问题)
  
 
    
JavasSript代码如下,只需要向zipImg传递图片路径即可。
 

function zipImg(imgpath) {
//开始canvas绘图
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//src赋值给临时的隐藏的图片
var img = document.getElementById("HidImg");
img.src = imgpath;
//图片载入开始执行压缩
img.onload = function () {
var height = img.height;
var width = img.width;
//判断图片宽高
var chu = 6;
//如果图片宽度在4080-3656之间,5倍压缩宽高
if (width <= 4080 && width >= 3656) {
chu = 5;
}
//如果图片宽度在2500-1440之间,4.5倍压缩宽高 
else if (width <= 3656 && width >= 2500) {
chu = 4.5;
}
//如果图片宽度在2500-1440之间,3.5倍压缩宽高
 else if (width <= 2500 && width >= 1440) {
chu = 3.5;
} 
//如果图片宽度在1440-1080之间,2倍压缩宽高
else if (width <= 1440 && width >= 1080) {
chu = 2;
}
 //如果图片宽度在1080-800之间,1.6倍压缩宽高
else if (width <= 1080 && width > 800) {
chu = 1.6;
} 
//低于800不进行宽高压缩
else if (width <= 800) {
chu = 1
}
//获取倍率后开始宽高压缩
img.height = height / chu;
img.width = width / chu;
c.width = width / chu;
c.height = height / chu;
//开始绘图
ctx.drawImage(img, 0, 0, c.width, c.height);
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
//转化成base64数据,记住一定要转化成jpeg格式,转化成png不能选择清晰度,并且base64长度
//会特别长 括号里的0.5即为0.5的清晰度。0-1之间,越高越清晰(当然base64的体积也会越来越大)
var dataURL = myCanvas.toDataURL("image/jpeg", 0.5);
//由于base64转码属于异步操作,给1.2秒延迟,转码1.2秒后获取转码后的base64数
//据(针对WebAPP,PC端可直接忽略)
setTimeout(function () {
$(".NewImg").attr("src", dataURL);    //dataURL即为压缩后的图片
}, 1200)
}
}

ASP.NET网站开发中数据流形式的图片保存至服务器中

近期在网站开发中使用了一个基于Jquery的头像上传空间,碰到了一个问题,数据流输出的图片无法保存至服务器,因为数据流形式的图片,浏览器只能解析并展示出...

C#/.NET 基于Chrome内核的浏览器开发

博主前段日子接了一个小型项目,需要调用某网站,虽然Winform开发中提供了网页控件WebBrowser,但是该控件直接调用的是windows自带的IE内核,使用起来莫名的...