vue實現(xiàn)調(diào)取手機攝像頭和相冊功能
更新時間:2021年09月29日 15:18:47 作者:心之所向,全是扯淡
這篇文章主要為大家詳細介紹了vue實現(xiàn)調(diào)取手機攝像頭和相冊功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)調(diào)取手機攝像頭和相冊的具體代碼,供大家參考,具體內(nèi)容如下
自己總結(jié)的手機端拍照和相冊原生的方法
HTML代碼
<div>
//要顯示的圖片
<div class="imgBox name">
<img :src="imgSrc" />
</div>
<van-action-sheet v-model="show1">
<ul>
<li class="paizhao" @click="captureImage()">拍照</li>
<li class="paizhao" @click="galleryImg()">從相冊選擇</li>
<li class="paizhao" @click="quxiao()">取消</li>
</ul>
</van-action-sheet>
</div>
js邏輯代碼
//data里聲明的變量
data(){
return{
imgSrc: "", //展示的圖片路徑
tupianlist: "", //展示的圖片容器
}
}
在methods事件方法定義事件名
methods:{
// 從相冊中選取圖片
galleryImg() {
let This = this;
console.log("從相冊中選擇圖片:");
plus.gallery.pick(function(path) {
This.imgSrc = path; //path 是本地路徑
let img = new Image();
img.src = path;
img.onload = function(path) {
var that = img;
var w = that.width, //320
h = that.height, //426
scale = w / h;
w = 320 || w;
h = w / scale;
var canvas = document.createElement("canvas");
canvas.width = 300; //這個設(shè)置不能丟,否者會成為canvas默認的300*150的大小
canvas.height = 300; //這個設(shè)置不能丟,否者會成為canvas默認的300*150的大小
var ctx = canvas.getContext("2d");
ctx.drawImage(that, 0, 0, 300, 300);
var base64 = canvas.toDataURL(
"image/png",
"image/jpeg",
"image/jpg",
1 || 0.8
);
This.tupianlist = base64;
// console.log(This.tupianlist + "我是轉(zhuǎn)碼后的base");
//這里可以請求接口
};
});
},
// 拍照
captureImage() {
let This = this;
var cmr = plus.camera.getCamera(); //獲取攝像頭管理對象
var res = cmr.supportedImageResolutions[0]; //字符串數(shù)組,攝像頭支持的拍照分辨率
var fmt = cmr.supportedImageFormats[0]; //字符串數(shù)組,攝像頭支持的拍照文件格式
// console.log("拍照分辨率: " + res + ", 拍照文件格式: " + fmt);
cmr.captureImage(
function(path) {
plus.gallery.save(path, params => {
let file = params.file;
//編碼為base64
var img = new Image();
img.src = file;
img.onload = function() {
var that = img;
var w = that.width,
h = that.height,
scale = w / h;
w = 320 || w;
h = w / scale;
var canvas = document.createElement("canvas");
canvas.width = 300; //這個設(shè)置不能丟,否者會成為canvas默認的300*150的大小
canvas.height = 300; //這個設(shè)置不能丟,否者會成為canvas默認的300*150的大小
var ctx = canvas.getContext("2d");
ctx.drawImage(that, 0, 0, 300, 300);
var base64 = canvas.toDataURL(
"image/png",
"image/jpeg",
"image/jpg",
1 || 0.8
);
// console.log(base64);
This.tupianlist = base64;
//這里可以請求接口
};
});
//進行拍照操作
// 通過URL參數(shù)獲取目錄對象或文件對象
plus.io.resolveLocalFileSystemURL(path, function(entry) {
var tmpPath = entry.toLocalURL(); //獲取目錄路徑轉(zhuǎn)換為本地路徑URL地址
This.imgSrc = tmpPath;
// alert("拍攝成功: " + tmpPath);
});
},
function(error) {
//捕獲圖像失敗回調(diào)
// alert("捕獲圖像失敗: " + error.message);
},
{ resolution: res, format: fmt }
);
this.show1 = false;
},
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
前端使用print.js實現(xiàn)打印功能(基于vue)
最近新接了一個需求,想要在前端實現(xiàn)打印功能,下面這篇文章主要給大家介紹了關(guān)于前端使用print.js實現(xiàn)打印功能(基于vue)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
useEffect理解React、Vue設(shè)計理念的不同
這篇文章主要為大家介紹了useEffect理解React、Vue設(shè)計理念的不同詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09
Vue父組件和子組件之間數(shù)據(jù)傳遞和方法調(diào)用
vue組件在通信中,無論是子組件向父組件傳值還是父組件向子組件傳值,他們都有一個共同點就是有中間介質(zhì),子向父的介質(zhì)是自定義事件,父向子的介質(zhì)是props中的屬性。2022-12-12
vue前端性能優(yōu)化之預(yù)加載和懶加載示例詳解
這篇文章主要為大家介紹了vue前端性能優(yōu)化之預(yù)加載和懶加載示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-02-02
vuex中store.commit和store.dispatch的區(qū)別及使用方法
這篇文章主要介紹了vuex中store.commit和store.dispatch的區(qū)別及使用方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01

