简单粗暴的canvas图片压缩

Yangyang 发布于2019-08-21 18:42 / 1744人阅读

摘要：比较适合刚拍的内存较大的照片，但存在一个问题，部分传到后台的图片会出现的旋转此问题只存在于直接拍摄的照片中，任何添加滤镜和处理过的图片都不存在将文件转为绑定文件的事件，获取到文件对象调用方法默认按比例压缩默认图片质量为生成创建属性节点值越小

比较适合刚拍的内存较大的照片，但存在一个问题，部分传到后台的图片会出现90deg的旋转

此问题只存在于IOS直接拍摄的照片中，任何添加滤镜和处理过的图片都不存在

将文件转为base64,绑定文件的change事件，获取到文件对象

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

//调用方法
dealImage(beforebase64,function(afterbase64) {

})

function dealImage(path, callback) {
    var img = new Image();
    img.src = path;
    img.onload = function() {
        //默认按比例压缩    
        var w = this.width,
            h = this.height;
        var quality = 0.4; // 默认图片质量为0.7    
 
        //生成canvas    
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
 
        // 创建属性节点    
        canvas.setAttribute("width", w);
        canvas.setAttribute("height", h);
 
        ctx.drawImage(this, 0, 0, w, h);
        // ctx.rotate(90 * Math.PI / 180);
        // quality值越小，所绘制出的图像越模糊    
        var base64 = canvas.toDataURL("image/jpeg", quality);
        // 回调函数返回base64的值    
        callback(base64);
    };
};

GPU云服务器云服务器私有的图片压缩 php压缩图片的方法 vps压缩的图片还清楚吗简单的上传图片js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90731.html

canvas一个简单粗暴的中奖转盘

摘要：最近在学做动画，于是就写个转盘练下手。设置中奖区间为度设置固定角度会让动画有点难看停止循环中奖操作记录转过的角度绘制图形最后现在这个转盘比较大的问题就是，如果中奖区间比较小，那减速后转动的时间就长一些，最低速度转很久才停下。最近在学canvas做动画，于是就写个转盘练下手。上个简陋的成果图（中间那个是转的指针，外面的圈是图片，懒得写了哈哈哈）showImg(https://segme...

NikoManiac 2019-08-29 16:17 评论0 收藏0
canvas一个简单粗暴的中奖转盘

摘要：最近在学做动画，于是就写个转盘练下手。设置中奖区间为度设置固定角度会让动画有点难看停止循环中奖操作记录转过的角度绘制图形最后现在这个转盘比较大的问题就是，如果中奖区间比较小，那减速后转动的时间就长一些，最低速度转很久才停下。最近在学canvas做动画，于是就写个转盘练下手。上个简陋的成果图（中间那个是转的指针，外面的圈是图片，懒得写了哈哈哈）showImg(https://segme...

DoINsiSt 2019-08-23 10:44 评论0 收藏0
canvas一个简单粗暴的中奖转盘

摘要：最近在学做动画，于是就写个转盘练下手。设置中奖区间为度设置固定角度会让动画有点难看停止循环中奖操作记录转过的角度绘制图形最后现在这个转盘比较大的问题就是，如果中奖区间比较小，那减速后转动的时间就长一些，最低速度转很久才停下。最近在学canvas做动画，于是就写个转盘练下手。上个简陋的成果图（中间那个是转的指针，外面的圈是图片，懒得写了哈哈哈）showImg(https://segme...

luoyibu 2019-08-02 11:09 评论0 收藏0
匠心打造canvas签名组件

摘要：原文匠心打造签名组件导读月又是项目吃紧的时候，一大波需求袭来，猝不及防。可以先戳这里体验把后面将要提到的签名组件。剩下的也是绑定事件中关键的一步。设置完成了上述功能，一个签名插件就已经成型了。本文首发于CSDN网站，下面的版本又经过进一步的修订。原文：匠心打造canvas签名组件导读 6月又是项目吃紧的时候，一大波需求袭来，猝不及防。度过了漫长而煎熬的6月，是时候总结一波。最近移...

MAX_zuo 2019-08-20 17:53 评论0 收藏0