base64照片压缩

			//拍照方法
			takePhoto:function(){
 				 PAD.device.TakePhoto(function (data) {
							  var _this = this
 							 //data 为Pad拍照返回base64
                            _this.image = "data:image/jpg;base64," + data;
                            // 压缩时注意,返回的base64如果没带前缀"data:image/jpg;base64," 一定要加上,不然压缩不了
                            // 500为压缩后的图片宽度
                            _this.changeImgSize(_this.image, 500, function (newBase64) {
                                console.log('压缩前',data.length)
                                console.log('压缩后',newBase64.length)
                            })
                        })
                      }
					//压缩方法
		 changeImgSize: function (base64, w, callback) {
                    var newImage = new Image();
                    // quality 为压缩的像素 越低压缩的越小,图片越模糊
                    var quality = 0.6; //压缩系数0-1之间
                    newImage.src = base64;
                    newImage.setAttribute("crossOrigin", 'Anonymous'); //url为外域时需要
                    var imgWidth, imgHeight;
                    newImage.onload = function () {
                        imgWidth = this.width;
                        imgHeight = this.height;
                        var canvas = document.createElement("canvas");
                        var ctx = canvas.getContext("2d");
                        if (Math.max(imgWidth, imgHeight) > w) {
                            if (imgWidth > imgHeight) {
                                canvas.width = w;
                                canvas.height = w * imgHeight / imgWidth;
                            } else {
                                canvas.height = w;
                                canvas.width = w * imgWidth / imgHeight;
                            }
                        } else {
                            canvas.width = imgWidth;
                            canvas.height = imgHeight;
                            quality = 0.6;
                        }
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
                        var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句
                        // 如想确保图片压缩到自己想要的尺寸,如要求在50-200kb之间,请加以下语句,quality初始值根据情况自定
                        // while (base64.length / 1024 > 200) {
                        // 	quality -= 0.01;
                        // 	base64 = canvas.toDataURL("image/jpeg", quality);
                        // }
                        // // 防止最后一次压缩低于最低尺寸,只要quality递减合理,无需考虑
                        // while (base64.length / 1024 < 50) {
                        // 	quality += 0.001;
                        // 	base64 = canvas.toDataURL("image/jpeg", quality);
                        // }
                        callback(base64); //必须通过回调函数返回,否则无法及时拿到该值
                    }
                },
上一篇:推荐30个原生JavaScript的demo


下一篇:canvas 使用transform 实现不同屏幕尺寸的适配