H5呼叫相機,裁剪,壓縮照片
最近專案中遇到拍照,預覽上傳的問題,蘋果手機不相容,拍照旋轉90度,在網上查找出好多方法,都無效,最後用input呼叫相機,然後用canvas畫布裁剪照片,壓縮儲存,程式碼如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="640">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<!--<base href="__ROOT__/Public/syh/shy_5/" />-->
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<script src="js/exif.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<title>H5拍照預覽壓縮儲存檔案</title>
</head>
<body>
<img id="imgss" src="img/6/4.jpg" class="ani p6_element4" /> // 預覽
<img src="img/6/8.png" id='uploadBtn' class="ani p6_save" /> //儲存
<input type="file" name="fileToUpload" id="fileToUpload" accept="image/*" capture="camera" onclick="hint()" ;/> //呼叫相機
<input type="hidden" id="pid" value="{$pid}" />
<canvas id="canvas" width="374" height="544" style="display: none;"></canvas>
<input type="hidden" id="url" value="__URL__" />
<textarea id="compressValue" hidden></textarea>
<div id="upp">
<div class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
</div>
<script type="text/javascript">
function hint() {
alert("請您豎屏拍照!")
}
</script>
<script>
var post_flag = false; //設定一個物件來控制是否進入AJAX過程
function post(preview, pid, url) {
if(post_flag) return; //如果正在提交則直接返回,停止執行
post_flag = true; //標記當前狀態為正在提交狀態
$.ajax({
url: url + "/ajax",
type: "POST",
data: {
'imgBase64': preview,
'pid': pid
},
dataType: 'json',
beforeSend: function() {
$('#upp').show();
$('#uploadBtn').hide();
},
success: function(data) {
if(data=='上傳成功!'){
post_flag = false;
$("#upp").hide();
}else{
post_flag = false;
$("#upp").hide();
alert(data);
}
},
error: function() {
alert('操作失敗,請跟技術聯絡');
}
});
}
//提交click事件
$('#uploadBtn').click(function() {
var preview = document.getElementById('compressValue').value;
var pid = document.getElementById('pid').value;
var url = document.getElementById('url').value;
if(preview) {
post(preview, pid, url);
}
});
function getObjectURL(file) {
var url = null;
if(window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if(window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if(window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
$('#fileToUpload').change(function() {
var Orientation = null;
var canvas = document.getElementById('canvas');
var dd = canvas.getContext('2d');
var file = this.files[0];
var imgsrc = getObjectURL(file);
var img = new Image();
img.src = imgsrc;
img.onload = function() {
if(navigator.userAgent.match(/iphone/i) || navigator.userAgent.match(/SM-/i)) {
EXIF.getData(file, function() {
var canvas = document.getElementById('canvas');
var dd = canvas.getContext('2d');
// alert(EXIF.pretty(this));
// EXIF.getAllTags(this);
// alert(EXIF.getTag(this, 'Orientation'));
Orientation = EXIF.getTag(this, 'Orientation');
if(Orientation != "" && Orientation != 1) {
switch(Orientation) {
case 6: //三星豎拍
dd.save();
dd.translate(374 / 2, 544 / 2);
dd.rotate(90 * Math.PI / 180);
// var xs=(544/374)+0.01;
// dd.scale(xs,xs);// 照片放在相框下面,上面用overflow
if(navigator.userAgent.match(/SM-/i)) {
dd.scale(2.5, 1);
} else {
dd.scale(1.94, 1);
}
dd.drawImage(img, 0, 0, img.width, img.height, -187, -272, 374, 544);
base64 = canvas.toDataURL('image/jpeg', 0.4);
dd.restore();
$("#uploadBtn").show();
$('#imgss').attr('src', base64);
// postbase = base64.substr(22);
$('#compressValue').val(base64);
break;
case 8:
dd.save();
dd.translate(374 / 2, 544 / 2);
dd.rotate(-90 * Math.PI / 180);
// var xs=(544/374)+0.01;
// dd.scale(xs,xs);// 照片放在相框下面,上面用overflow
dd.scale(1.94, 1);
dd.drawImage(img, 0, 0, img.width, img.height, -187, -272, 374, 544);
base64 = canvas.toDataURL('image/jpeg', 0.4);
dd.restore();
$("#uploadBtn").show();
$('#imgss').attr('src', base64);
// postbase = base64.substr(22);
$('#compressValue').val(base64);
break;
case 3:
alert(3);
dd.save();
dd.translate(374 / 2, 544 / 2);
dd.rotate(180 * Math.PI / 180);
// var xs=(544/374)+0.01;
// dd.scale(xs,xs);// 照片放在相框下面,上面用overflow
dd.scale(1.94, 1);
dd.drawImage(img, 0, 0, img.width, img.height, -187, -272, 374, 544);
base64 = canvas.toDataURL('image/jpeg', 0.4);
dd.restore();
$("#uploadBtn").show();
$('#imgss').attr('src', base64);
// postbase = base64.substr(22);
$('#compressValue').val(base64);
break;
}
} else {
var canvas = document.getElementById('canvas');
var dd = canvas.getContext('2d');
var sx, sy, sw, sh;
var d_kgb = 374 / 544;
var s_kgb = img.width / img.height;
if(s_kgb > d_kgb) {
sw = parseInt(img.height * d_kgb);
sx = parseInt((img.width - sw) / 2);
sy = 0;
sh = img.height;
} else if(s_kgb < d_kgb) {
sh = img.width / d_kgb;
sy = (img.height - sh) / 2;
sx = 0;
sw = img.width;
// alert(sx+"|"+sy+"|"+sw+"|"+sh);
} else {
sx = 0, sy = 0, sw = img.width, sh = img.height;
}
dd.drawImage(img, sx, sy, sw, sh, 0, 0, 374, 544);
dd.clearRect(10,10,300,100);
base64 = canvas.toDataURL('image/jpeg', 0.4);
$("#uploadBtn").show();
$('#imgss').attr('src', base64);
// postbase = base64.substr(22);
$('#imgbase').val(base64);
}
});
}
var sx, sy, sw, sh;
var d_kgb = 374 / 544;
var s_kgb = img.width / img.height;
if(s_kgb > d_kgb) {
sw = parseInt(img.height * d_kgb);
sx = parseInt((img.width - sw) / 2);
sy = 0;
sh = img.height;
} else if(s_kgb < d_kgb) {
sh = img.width / d_kgb;
sy = (img.height - sh) / 2;
sx = 0;
sw = img.width;
// alert(sx+"|"+sy+"|"+sw+"|"+sh);
} else {
sx = 0, sy = 0, sw = img.width, sh = img.height;
}
dd.drawImage(img, sx, sy, sw, sh, 0, 0, 374, 544);
// dd.clearRect(30,30,500,200);
base64 = canvas.toDataURL('image/jpeg', 0.4);
$("#uploadBtn").show();
$('#imgss').attr('src', base64);
//postbase = base64.substr(22);
$('#compressValue').val(base64);
};
});
</script>
</body>
</html>
相關推薦
H5呼叫相機,裁剪,壓縮照片
最近專案中遇到拍照,預覽上傳的問題,蘋果手機不相容,拍照旋轉90度,在網上查找出好多方法,都無效,最後用input呼叫相機,然後用canvas畫布裁剪照片,壓縮儲存,程式碼如下。 <!DOCTYPE html> <html> <head
Android呼叫相機拍照後,壓縮圖片…
1、直接onActivityResult裡 ,從Intent data引數中可以取出拍照後縮圖,基本不需要壓縮的。 2、是設定儲存路徑,然後拍完之後直接讀取該路徑的圖片: Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); Str
h5呼叫相機、相簿、攝像頭拍照、錄影並壓縮預覽
1、使用h5中的input標籤 <!--相機--> <input id="fileBtn" type="file" onchange="upload('#fileBtn');" accept="image/*" capture='camera' styl
H5呼叫本地的照相機,攝像機等裝置
Htm程式碼: <input type="file" accept="image/*" capture="camera"> <input type="file" accept="video/*" capture="camcorder">
Android簡單呼叫相機Camera功能,實現開啟照相功能
在最開始接觸Android相機功能之前,先來體驗一下Android呼叫系統照相功能吧 核心程式碼 Intent intent = new Intent(); //呼叫照相機 intent.setAction("android.media.action.ST
python PIL和CV對 圖片的讀取,顯示,裁剪,儲存
PIL 圖片操作 讀取圖片 img = Image.open(“a.jpg”) 顯示圖片 im.show() # im是Image物件,im是numpy型別,通過Image.fromarray(nparr, mode='RGB')函式轉換為Image物件 圖片的size (w
安卓開發呼叫相機和本地相簿選擇照片並上傳(上傳retrofit實現)
private File tempFile = new File(Environment.getExternalStorageDirectory(), getPhotoFileName()); // 使用系統當前日期加以調整作為照片的名稱 private String ge
(轉)FFMPEG filter使用實例(實現視頻縮放,裁剪,水印等)
mina fort clean target mes dev 更多 nom 連接 本文轉載自http://blog.csdn.net/li_wen01/article/details/62442162 FFMPEG官網給出了FFMPEG 濾鏡使用的實例,它是將視頻中
Android 7.0及其以上系統拍照,開啟相簿,裁剪,報錯: android.os.FileUriExposedException: file:///storage/emulated/0/.....
全部程式碼:點選下載注意:如果你原先的應用的targetSdkVersion本來就小與27。那就拍照。什麼都不修改。也不會崩潰。但是、一旦你修改了你的targetSdkVersion為27.或者28。那你的應用就會報出這些問題。。具體原因。請自行百度下targetSdkVer
java影象處理:灰度化,二值化,降噪,切割,裁剪,識別,找相似等
前段時間做爬蟲,涉及到對圖片驗證碼的破解,這裡羅列一些常用的影象處理方法,都很簡單並沒用到什麼複雜的演算法,所以不涉及opencv,都是一些直接對rgb畫素點的操作,很簡單也很好理解,至於識別直接用的tesseract-ocr,也可以用svm。(ps:圖片的畫素值矩陣的原點在
android視訊的編輯(錄製,裁剪,合成)(1)
好久沒寫部落格了,最近的事情的比較多。公司正在向產品這塊轉型,要做音視訊的編輯開發,之前的接觸這塊的東西並不多,所以開發起來有很多的困難,從踩自定義相機的坑開始,視訊的錄製,編輯(主要包括合成和裁剪);音訊的錄製,裁剪;圖片的一些基本處理,包括裁剪,旋轉,新增文
FFMPEG 最簡濾鏡filter使用例項(實現視訊縮放,裁剪,水印等)
FFMPEG官網給出了FFMPEG 濾鏡使用的例項,它是將視訊中的畫素點替換成字元,然後從終端輸出。我在該例項的基礎上稍微的做了修改,使它能夠儲存濾鏡處理過後的檔案。在上程式碼之前先明白幾個概念: Filter:代表單個filter FilterPa
java圖片處理,裁剪,合圖,等比例縮放
現在 外面核心,圖片文章比較少,看了拷貝程式碼,而用不了,用相應jar包處理,很多等比例縮放, 達不到 想要的給予的期望:本工具類,是之前做微信印表機寫的 基於java自帶的類,基於rgb。 package com.zjpz.util; import java.awt
解決Android 呼叫相機拍照後得到的照片不清晰問題
最近在做一個需要上傳拍照的APP,上傳的時候因為是小圖片,但是需求提了要點選可預覽大圖,一看大圖,被嚇到了,根本看不清楚,大圖中的具體內容。原因是通過MediaStore.ACTION_IMAGE_CAPTURE方式直接去呼叫相機,在onactivityr
GIMP使用 二 實現圖片的抓圖,裁剪,取色
一,抓圖 執行GIMP,點選 File -----> Create -----> Sreenshot 。選擇需要抓圖的螢幕區域,第一項“take a sreenshot of a single window” 為抓取整個螢幕,第三項“select a regio
Android Bitmap 常見的幾個操作:縮放,裁剪,旋轉,偏移
/** * 根據給定的寬和高進行拉伸 * * @param origin 原圖 * @param newWidth 新圖的寬 * @param newHeight 新圖的高 * @return new Bitmap */ p
Android 7.0呼叫相機/相簿/裁剪
Android 呼叫相機/相簿/裁剪,6.0需要申請許可權,7.0有路勁安全問題 1、安全問題需要設定共享路勁,需要在AndroidManifest.xml裡的application下設定provid
H5呼叫相機和相簿更換頭像
需求:H5呼叫手機的相機和相簿從而實現更換頭像的功能 這個功能是很常用的一個功能,因此做一個記錄。 1.在頭像img下加一個檔案輸入框 <input type="file" id="file" accept="image/*" capture='camera' multiple> 並隱藏之 1
安卓圖片操作(呼叫系統相機,預覽本地照片,呼叫系統裁剪圖片,壓縮圖片,中心裁剪方形圖片,bitmap轉byte[])
先建立照片儲存uri public static Uri createImagePathUri(Context context) { Uri imageFilePath = null; String status = Environment.g
android呼叫相機拍照返回的照片大小太小,變得模糊
1、使用相機拍照預設情況下呼叫相機的方式: Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); startActivityForResult(intent, CAMERA_REQUEST_CODE);//CAMERA_REQ