成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

簡(jiǎn)單粗暴的canvas圖片壓縮

Yangyang / 1823人閱讀

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

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

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

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

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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/90731.html

相關(guān)文章

  • canvas一個(gè)簡(jiǎn)單粗暴的中獎(jiǎng)轉(zhuǎn)盤(pán)

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

    NikoManiac 評(píng)論0 收藏0

  • canvas一個(gè)簡(jiǎn)單粗暴的中獎(jiǎng)轉(zhuǎn)盤(pán)

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

    DoINsiSt 評(píng)論0 收藏0

  • canvas一個(gè)簡(jiǎn)單粗暴的中獎(jiǎng)轉(zhuǎn)盤(pán)

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

    luoyibu 評(píng)論0 收藏0

  • 匠心打造canvas簽名組件

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

    MAX_zuo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<