亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

簡單粗暴的canvas圖片壓縮

Yangyang / 1807人閱讀

摘要：比較適合剛拍的內(nèi)存較大的照片，但存在一個問題，部分傳到后臺的圖片會出現(xiàn)的旋轉(zhuǎn)此問題只存在于直接拍攝的照片中，任何添加濾鏡和處理過的圖片都不存在將文件轉(zhuǎn)為綁定文件的事件，獲取到文件對象調(diào)用方法默認(rèn)按比例壓縮默認(rèn)圖片質(zhì)量為生成創(chuàng)建屬性節(jié)點(diǎn)值越小

比較適合剛拍的內(nèi)存較大的照片，但存在一個問題，部分傳到后臺的圖片會出現(xiàn)90deg的旋轉(zhuǎn)

此問題只存在于IOS直接拍攝的照片中，任何添加濾鏡和處理過的圖片都不存在

將文件轉(zhuǎn)為base64,綁定文件的change事件，獲取到文件對象

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

//調(diào)用方法
dealImage(beforebase64,function(afterbase64) {

})

function dealImage(path, callback) {
    var img = new Image();
    img.src = path;
    img.onload = function() {
        //默認(rèn)按比例壓縮    
        var w = this.width,
            h = this.height;
        var quality = 0.4; // 默認(rèn)圖片質(zhì)量為0.7    
 
        //生成canvas    
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
 
        // 創(chuàng)建屬性節(jié)點(diǎn)    
        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);
        // 回調(diào)函數(shù)返回base64的值    
        callback(base64);
    };
};

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/90731.html

相關(guān)文章

  • canvas一個簡單粗暴的中獎轉(zhuǎn)盤

    摘要：最近在學(xué)做動畫，于是就寫個轉(zhuǎn)盤練下手。設(shè)置中獎區(qū)間為度設(shè)置固定角度會讓動畫有點(diǎn)難看停止循環(huán)中獎操作記錄轉(zhuǎn)過的角度繪制圖形最后現(xiàn)在這個轉(zhuǎn)盤比較大的問題就是，如果中獎區(qū)間比較小，那減速后轉(zhuǎn)動的時間就長一些，最低速度轉(zhuǎn)很久才停下。 最近在學(xué)canvas做動畫，于是就寫個轉(zhuǎn)盤練下手。上個簡陋的成果圖（中間那個是轉(zhuǎn)的指針，外面的圈是圖片，懶得寫了哈哈哈）showImg(https://segme...

    NikoManiac 評論0 收藏0

  • canvas一個簡單粗暴的中獎轉(zhuǎn)盤

    摘要：最近在學(xué)做動畫，于是就寫個轉(zhuǎn)盤練下手。設(shè)置中獎區(qū)間為度設(shè)置固定角度會讓動畫有點(diǎn)難看停止循環(huán)中獎操作記錄轉(zhuǎn)過的角度繪制圖形最后現(xiàn)在這個轉(zhuǎn)盤比較大的問題就是，如果中獎區(qū)間比較小，那減速后轉(zhuǎn)動的時間就長一些，最低速度轉(zhuǎn)很久才停下。 最近在學(xué)canvas做動畫，于是就寫個轉(zhuǎn)盤練下手。上個簡陋的成果圖（中間那個是轉(zhuǎn)的指針，外面的圈是圖片，懶得寫了哈哈哈）showImg(https://segme...

    DoINsiSt 評論0 收藏0

  • canvas一個簡單粗暴的中獎轉(zhuǎn)盤

    摘要：最近在學(xué)做動畫，于是就寫個轉(zhuǎn)盤練下手。設(shè)置中獎區(qū)間為度設(shè)置固定角度會讓動畫有點(diǎn)難看停止循環(huán)中獎操作記錄轉(zhuǎn)過的角度繪制圖形最后現(xiàn)在這個轉(zhuǎn)盤比較大的問題就是，如果中獎區(qū)間比較小，那減速后轉(zhuǎn)動的時間就長一些，最低速度轉(zhuǎn)很久才停下。 最近在學(xué)canvas做動畫，于是就寫個轉(zhuǎn)盤練下手。上個簡陋的成果圖（中間那個是轉(zhuǎn)的指針，外面的圈是圖片，懶得寫了哈哈哈）showImg(https://segme...

    luoyibu 評論0 收藏0

  • 匠心打造canvas簽名組件

    摘要：原文匠心打造簽名組件導(dǎo)讀月又是項目吃緊的時候，一大波需求襲來，猝不及防?？梢韵却吝@里體驗把后面將要提到的簽名組件。剩下的也是綁定事件中關(guān)鍵的一步。設(shè)置完成了上述功能，一個簽名插件就已經(jīng)成型了。 本文首發(fā)于CSDN網(wǎng)站，下面的版本又經(jīng)過進(jìn)一步的修訂。原文：匠心打造canvas簽名組件 導(dǎo)讀 6月又是項目吃緊的時候，一大波需求襲來，猝不及防。 度過了漫長而煎熬的6月，是時候總結(jié)一波。最近移...

    MAX_zuo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<