每日速讯：HTML+CSS布局制作 web前端期末大作业

(资料图片仅供参考)

在通过js对要上传图片进行压缩时，我利用的是html5中的canvas元素进行辅助，具体思路如下：

var reader = new FileReader();    //files[0]对象是从input type=file中获取的file对象    reader.readAsDataURL(files[0]);    //将file对象base64转码成功后进入    reader.onload = function () {        //声明img标签，并将未压缩的图片赋值给src属性        var image = $("");        image.attr("src", this.result);                image.on("load", function () {            //定义canvas的宽、高为72px            var square = 72;            var canvas = document.createElement("canvas");            canvas.width = square;            canvas.height = square;            var context = canvas.getContext("2d");            context.clearRect(0, 0, square, square);            var imageWidth;            var imageHeight;            var offsetX = 0;            var offsetY = 0;            //判断是根据原图片的宽压缩还是高压缩            if (this.width > this.height) {                imageWidth = Math.round(square * this.width / this.height);                imageHeight = square;                offsetX = - Math.round((imageWidth - square) / 2);            } else {                imageHeight = Math.round(square * this.height / this.width);                imageWidth = square;                offsetY = - Math.round((imageHeight - square) / 2);            }            context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);            //data即为压缩为72x72的压缩图片的base64内容            var data = canvas.toDataURL("image/jpeg");        });    };

当图片经过base64转码后获得的字符串是可以被当作图片使用，如:

data:image/jpeg;base64,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