vue實現(xiàn)調取手機攝像頭和相冊功能
更新時間：2021年09月29日 15:18:47 作者：心之所向，全是扯淡
這篇文章主要為大家詳細介紹了vue實現(xiàn)調取手機攝像頭和相冊功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)調取手機攝像頭和相冊的具體代碼，供大家參考，具體內容如下
自己總結的手機端拍照和相冊原生的方法
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; //這個設置不能丟，否者會成為canvas默認的300*150的大小
canvas.height = 300; //這個設置不能丟，否者會成為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 + "我是轉碼后的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; //這個設置不能丟，否者會成為canvas默認的300*150的大小
canvas.height = 300; //這個設置不能丟，否者會成為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(); //獲取目錄路徑轉換為本地路徑URL地址
This.imgSrc = tmpPath;
// alert("拍攝成功: " + tmpPath);
});
},
function(error) {
//捕獲圖像失敗回調
// alert("捕獲圖像失敗: " + error.message);
},
{ resolution: res, format: fmt }
);
this.show1 = false;
},
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue Cli與BootStrap結合實現(xiàn)表格分頁功能
這篇文章主要介紹了Vue Cli與BootStrap結合實現(xiàn)表格分頁功能,需要的朋友可以參考下2017-08-08
在使用服務器端渲染時，除了服務端的接口緩存、頁面緩存、組建緩存等，瀏覽器端也避免不了要使用緩存，減少頁面的重繪。這篇文章主要介紹了詳解vue服務端渲染瀏覽器端緩存（keep-alive），感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了vue項目中實現(xiàn)圖片裁剪功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
這篇文章主要介紹了Vue狀態(tài)管理工具Pinia的安裝與使用,一步一步學習如何將pinia運用到項目實戰(zhàn)中去,文中有詳細的安裝教程和使用方法,并通過代碼示例講解的非常詳細,需要的朋友可以參考下2024-03-03
Element-UI日期選擇器(選擇日期范圍)禁用未來日期實現(xiàn)代碼
我們在網(wǎng)頁開發(fā)時通常需要用到一些日期組件來方便用戶選擇時間,其中element日期組件是一個非常好用的工具,這篇文章主要給大家介紹了關于Element-UI日期選擇器(選擇日期范圍)禁用未來日期的相關資料,需要的朋友可以參考下2024-02-02
路由攔截是一種在用戶訪問特定頁面之前對其進行攔截和處理的機制,下面這篇文章主要給大家介紹了關于vue前端img訪問鑒權后端進行攔截的相關資料,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue3中引入Pinia存儲庫使用,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue-Ant Design Vue-普通及自定義校驗實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
最近接觸了一個項目，vue怎么在不同屏幕上做根據(jù)不同屏幕大小適配，本文就詳細的來介紹一下，感興趣的可以了解一下2021-09-09
vue @click與@click.native,及vue事件機制的使用分析
這篇文章主要介紹了vue @click與@click.native,及vue事件機制的使用分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04