Simple and crude canvas image compression


It is suitable for photos with large memory just taken, but there is a problem. Some pictures transferred to the background will rotate 90 DEG

This problem only exists in the photos directly taken by IOS, and any images added with filters or processed are not found

Convert the file to Base64, bind the change event of the file, and get the file object

var fileObjArr =;
var windowURL = window.URL || window.webkitURL;
var dataURL = windowURL.createObjectURL(fileObjArr[0]);

//Call method
dealImage(beforebase64,function(afterbase64) {


function dealImage(path, callback) {
    var img = new Image();
    img.src = path;
    img.onload = function() {
        //Default scale compression    
        var w = this.width,
            h = this.height;
        Var quality = 0.4; // the default image quality is 0.7    
        //Generate canvas    
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        //Create attribute node    
        canvas.setAttribute("width", w);
        canvas.setAttribute("height", h);
        ctx.drawImage(this, 0, 0, w, h);
        // ctx.rotate(90 * Math.PI / 180);
        //The smaller the quality value, the more blurred the image    
        var base64 = canvas.toDataURL('image/jpeg', quality);
        //The callback function returns the value of Base64    

Recommended Today

Comparison and analysis of Py = > redis and python operation redis syntax

preface R: For redis cli P: Redis for Python get ready pip install redis pool = redis.ConnectionPool(host=’′, port=6379, db=1) redis = redis.Redis(connection_pool=pool) Redis. All commands I have omitted all the following commands. If there are conflicts with Python built-in functions, I will add redis Global command Dbsize (number of returned keys) R: dbsize P: print(redis.dbsize()) […]