資訊專欄INFORMATION COLUMN
摘要：模擬點擊為了能使點擊的按鈕可定制，所以我們采用模擬點擊的方法來觸發(fā)里面有個類型是的可以上傳文件，讀取圖片上面函數(shù)中點擊，然后監(jiān)聽，選擇圖片之后會執(zhí)行函數(shù)來讀取文件信息獲取輸入的圖片請確保文件為圖像類型判斷是否圖片，在移動端由于瀏覽器對調(diào)用類
模擬點擊input
為了能使點擊的按鈕可定制，所以我們采用模擬點擊input的方法來觸發(fā)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();
}
讀取圖片
上面函數(shù)中點擊input，然后監(jiān)聽change，選擇圖片之后會執(zhí)行readFile函數(shù)來讀取文件信息
function readFile(){
var file = this.files[0];//獲取input輸入的圖片
if(!/image/w+/.test(file.type)){
alert("請確保文件為圖像類型");
return false;
}//判斷是否圖片，在移動端由于瀏覽器對調(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預覽圖片
用了一個drawToCanvas函數(shù)來將轉(zhuǎn)化后的base64數(shù)據(jù)寫到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數(shù)據(jù)
}
}
用canvas呈現(xiàn)更加靈活，如果后面要對圖片進行位置，大小的變換，這樣比較方便
上傳服務器以上已經(jīng)獲取到了圖片的base64，由于圖片的base64字符串很長不能用get方式，通過post去傳給后臺
注意這里說一點每次給canvas重新width和height時畫布會重新繪制，也就是init了，還有用css給canvas高寬和字標簽設置是不一樣的，可以自行百度
公眾號
我們的主頁
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50170.html
摘要：模擬點擊為了能使點擊的按鈕可定制，所以我們采用模擬點擊的方法來觸發(fā)里面有個類型是的可以上傳文件，讀取圖片上面函數(shù)中點擊，然后監(jiān)聽，選擇圖片之后會執(zhí)行函數(shù)來讀取文件信息獲取輸入的圖片請確保文件為圖像類型判斷是否圖片，在移動端由于瀏覽器對調(diào)用類 模擬點擊input 為了能使點擊的按鈕可定制，所以我們采用模擬點擊input的方法來觸發(fā)inputinput里面有個類型是file的可以上傳文件，...
摘要：表示不一定是原生形式的數(shù)據(jù)。接口基于，繼承了的功能并將其擴展使其支持用戶系統(tǒng)上的文件。讀取操作完成的時候，會變成已完成，并觸發(fā)事件，同時屬性將包含一個格式的字符串編碼以表示所讀取文件的內(nèi)容。 溫馨提示：這里除了一些幼稚的小組件啥也沒有溫馨提示-續(xù)：這是一個新的系列，寫一些實際開發(fā)中遇到的一些常用的功能，想法笨拙，代碼亂套 寫在前面 圖片上傳，作為web端一個常用的功能，在不同的項目中有...
摘要：將預覽的圖片上傳，后端生成，在管理系統(tǒng)中下載。技術要點文字排版設置指定背景顏色引入外部字體繪制文字圖片將生成的圖片轉(zhuǎn)成上傳這里根據(jù)后端協(xié)商，此處后端要求將圖片生成，并點擊批量下載實現(xiàn)步驟文字排版在一般容器中，如果要實現(xiàn)文字的排版很容易。 最近遇到一個業(yè)務需求，在小程序端定制預覽功能，并在預覽的圖片中使用指定的外部字體。將預覽的圖片上傳OSS，后端生成PDF，在管理系統(tǒng)中下載。但是………...
閱讀 2115·2023-04-25 20:52
閱讀 2507·2021-09-22 15:22
閱讀 2134·2021-08-09 13:44
閱讀 1776·2019-08-30 13:55
閱讀 2820·2019-08-23 15:42
閱讀 2293·2019-08-23 14:14
閱讀 2886·2019-08-23 13:58
閱讀 3019·2019-08-23 11:49
