zoukankan      html  css  js  c++  java
  • 用canvas压缩图片

    <input type="file" accept="image.*" id="btn">
    
    let inp = document.getElementById('btn');
    addEventListener('change', (e) => {
        let file = e.target.files[0];
        let reader = new FileReader();
        reader.onload = function(ee){
    		console.log(ee)
    		let url = ee.currentTarget.result;
    		let img = new Image();
    		img.src = url;
    		document.body.appendChild(img)
    		compress(url);
        }
        reader.readAsDataURL(file)
    })
    
    // 压缩图片
    function compress(base_64){
    	let img = new Image();
    	img.src = base_64;
    	img.onload=function(e){
    		let canvas = document.createElement('canvas');
    		let ctx = canvas.getContext('2d');
    		canvas.width = img.naturalWidth;
    		canvas.height = img.naturalHeight;
    		console.dir(canvas)
    		ctx.clearRect(0,0,canvas.width,canvas.height)
    		ctx.drawImage(img,0,0,canvas.width,canvas.height);
    		let imgType = getImgType(base_64);
    		let img_compressed = canvas.toDataURL(`image/${imgType}`,0.8);
    		let img2 = new Image();
    		img2.src = img_compressed;
    		document.body.appendChild(img2);
    
    	}
    }
    
    // 获取图片后缀
    function getImgType(base_64 ){
    	let patt1 = new RegExp('image/[a-z]*');
    	if(!base_64.match(patt1)){
    		return 'jpg';
    	}
    	let imgTypeArr = base_64.match(patt1);
    	let type = imgTypeArr[0];
    	type = type.slice(6);
    	return type;
    }
    
  • 相关阅读:
    cocos2d-x CSV文件读取 (Excel生成csv文件)
    cocos2d-x 中 xml 文件读取
    String 类的实现
    json 文件解析与应用
    设计模式 之 《简单工厂模式》
    C++ 0X 新特性实例(比较常用的) (转)
    CCSpriteBatchNode CCSpriteFrameCache
    LongAdder
    ConcurrentHashMap源码
    HashMap源码
  • 原文地址:https://www.cnblogs.com/hyx626/p/14884014.html
Copyright © 2011-2022 走看看