利用canvas實現本地上傳圖片并預覽

AnthonyHan 發布于2019-08-22 10:40 / 1706人閱讀

摘要：模擬點擊為了能使點擊的按鈕可定制，所以我們采用模擬點擊的方法來觸發里面有個類型是的可以上傳文件，讀取圖片上面函數中點擊，然后監聽，選擇圖片之后會執行函數來讀取文件信息獲取輸入的圖片請確保文件為圖像類型判斷是否圖片，在移動端由于瀏覽器對調用類

模擬點擊input

為了能使點擊的按鈕可定制，所以我們采用模擬點擊input的方法來觸發input
input里面有個類型是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();
}

讀取圖片

上面函數中點擊input，然后監聽change，選擇圖片之后會執行readFile函數來讀取文件信息

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

canvas預覽圖片

用了一個drawToCanvas函數來將轉化后的base64數據寫到canvas，雖然可以直接用img標簽直接顯示，但是總是感覺顯示會很慢

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數據
            }
}

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

上傳服務器

以上已經獲取到了圖片的base64，由于圖片的base64字符串很長不能用get方式，通過post去傳給后臺

注意

這里說一點每次給canvas重新width和height時畫布會重新繪制，也就是init了，還有用css給canvas高寬和字標簽設置是不一樣的，可以自行百度

公眾號

我們的主頁

云服務器 GPU云服務器圖片上傳服務器并預覽圖片本地預覽預覽本地圖片 php 預覽上傳圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91039.html

利用canvas實現本地上傳圖片并預覽

摘要：模擬點擊為了能使點擊的按鈕可定制，所以我們采用模擬點擊的方法來觸發里面有個類型是的可以上傳文件，讀取圖片上面函數中點擊，然后監聽，選擇圖片之后會執行函數來讀取文件信息獲取輸入的圖片請確保文件為圖像類型判斷是否圖片，在移動端由于瀏覽器對調用類模擬點擊input 為了能使點擊的按鈕可定制，所以我們采用模擬點擊input的方法來觸發inputinput里面有個類型是file的可以上傳文件，...

B0B0 2019-08-01 15:52 評論0 收藏0
實踐是檢驗程序員的唯一標準01：用戶不想跟你說話并向你扔出一張圖片 - 圖片上傳組件開發【思路篇】

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

PiscesYE 2019-08-26 11:31 評論0 收藏0
H5 canvas生成圖片并上傳文件轉成PDF下載canvas文字排版

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

canopus4u 2019-08-23 18:24 評論0 收藏0