成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

利用canvas實(shí)現(xiàn)本地上傳圖片并預(yù)覽

AnthonyHan / 1728人閱讀

摘要：模擬點(diǎn)擊為了能使點(diǎn)擊的按鈕可定制，所以我們采用模擬點(diǎn)擊的方法來觸發(fā)里面有個(gè)類型是的可以上傳文件，讀取圖片上面函數(shù)中點(diǎn)擊，然后監(jiān)聽，選擇圖片之后會(huì)執(zhí)行函數(shù)來讀取文件信息獲取輸入的圖片請(qǐng)確保文件為圖像類型判斷是否圖片，在移動(dòng)端由于瀏覽器對(duì)調(diào)用類

模擬點(diǎn)擊input

為了能使點(diǎn)擊的按鈕可定制，所以我們采用模擬點(diǎn)擊input的方法來觸發(fā)input
input里面有個(gè)類型是file的可以上傳文件，

function doInput(id){
    var inputObj = document.createElement("input");
    inputObj.addEventListener("change",readFile,false);
    inputObj.type = "file";
    inputObj.accept = "image/*";
    inputObj.id = id;
    inputObj.click();
}
讀取圖片

上面函數(shù)中點(diǎn)擊input，然后監(jiān)聽change，選擇圖片之后會(huì)執(zhí)行readFile函數(shù)來讀取文件信息

function readFile(){
    var file = this.files[0];//獲取input輸入的圖片
    if(!/image/w+/.test(file.type)){
        alert("請(qǐng)確保文件為圖像類型");
        return false;
    }//判斷是否圖片，在移動(dòng)端由于瀏覽器對(duì)調(diào)用file類型處理不同，雖然加了accept = "image/*"，但是還要再次判斷
    var reader = new FileReader();
    reader.readAsDataURL(file);//轉(zhuǎn)化成base64數(shù)據(jù)類型
    reader.onload = function(e){
            drawToCanvas(this.result);
        }
    }
}
canvas預(yù)覽圖片

用了一個(gè)drawToCanvas函數(shù)來將轉(zhuǎn)化后的base64數(shù)據(jù)寫到canvas，雖然可以直接用img標(biāo)簽直接顯示，但是總是感覺顯示會(huì)很慢

function drawToCanvas(imgData){
    var cvs = document.querySelector("#cvs");
        cvs.width=300;
        cvs.height=400;
        var ctx = cvs.getContext("2d");
        var img = new Image;
            img.src = imgData;
            img.onload = function(){//必須onload之后再畫
                ctx.drawImage(img,0,0,300,400);
                strDataURI = cvs.toDataURL();//獲取canvas base64數(shù)據(jù)
            }
}

用canvas呈現(xiàn)更加靈活，如果后面要對(duì)圖片進(jìn)行位置，大小的變換，這樣比較方便

上傳服務(wù)器

以上已經(jīng)獲取到了圖片的base64，由于圖片的base64字符串很長(zhǎng)不能用get方式，通過post去傳給后臺(tái)

注意

這里說一點(diǎn)每次給canvas重新width和height時(shí)畫布會(huì)重新繪制，也就是init了，還有用css給canvas高寬和字標(biāo)簽設(shè)置是不一樣的，可以自行百度

公眾號(hào)

我們的主頁

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91039.html

相關(guān)文章

  • 利用canvas實(shí)現(xiàn)本地上傳圖片并預(yù)覽

    摘要：模擬點(diǎn)擊為了能使點(diǎn)擊的按鈕可定制，所以我們采用模擬點(diǎn)擊的方法來觸發(fā)里面有個(gè)類型是的可以上傳文件，讀取圖片上面函數(shù)中點(diǎn)擊，然后監(jiān)聽，選擇圖片之后會(huì)執(zhí)行函數(shù)來讀取文件信息獲取輸入的圖片請(qǐng)確保文件為圖像類型判斷是否圖片，在移動(dòng)端由于瀏覽器對(duì)調(diào)用類 模擬點(diǎn)擊input 為了能使點(diǎn)擊的按鈕可定制，所以我們采用模擬點(diǎn)擊input的方法來觸發(fā)inputinput里面有個(gè)類型是file的可以上傳文件，...

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

  • 實(shí)踐是檢驗(yàn)程序員的唯一標(biāo)準(zhǔn)01：用戶不想跟你說話并向你扔出一張圖片 - 圖片上傳組件開發(fā)【思路篇】

    摘要：表示不一定是原生形式的數(shù)據(jù)。接口基于，繼承了的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件。讀取操作完成的時(shí)候，會(huì)變成已完成，并觸發(fā)事件，同時(shí)屬性將包含一個(gè)格式的字符串編碼以表示所讀取文件的內(nèi)容。 溫馨提示：這里除了一些幼稚的小組件啥也沒有溫馨提示-續(xù)：這是一個(gè)新的系列，寫一些實(shí)際開發(fā)中遇到的一些常用的功能，想法笨拙，代碼亂套 寫在前面 圖片上傳，作為web端一個(gè)常用的功能，在不同的項(xiàng)目中有...

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

  • H5 canvas生成圖片并上傳文件轉(zhuǎn)成PDF下載canvas文字排版

    摘要：將預(yù)覽的圖片上傳，后端生成，在管理系統(tǒng)中下載。技術(shù)要點(diǎn)文字排版設(shè)置指定背景顏色引入外部字體繪制文字圖片將生成的圖片轉(zhuǎn)成上傳這里根據(jù)后端協(xié)商，此處后端要求將圖片生成，并點(diǎn)擊批量下載實(shí)現(xiàn)步驟文字排版在一般容器中，如果要實(shí)現(xiàn)文字的排版很容易。 最近遇到一個(gè)業(yè)務(wù)需求，在小程序端定制預(yù)覽功能，并在預(yù)覽的圖片中使用指定的外部字體。將預(yù)覽的圖片上傳OSS，后端生成PDF，在管理系統(tǒng)中下載。但是………...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<