前端中用手机拍照压缩，上传图片压缩

从百度找了各种方案都是从相册选取图片压缩，就找不到拍照直接压缩的苦恼了好久

下面上代码，自己引一下jquery直接就可以用的代码

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
width: 500px;
height: 500px;
}
button{
width: 100px;
height: 50px;
margin: 0 auto;
}
</style>
</head>

<body>
<img id="x" src="" alt="" />
<button id="btn">拍照</button>
<script src="js/jquery.js"></script>
<script>
// 拍照添加文件
var btn = document.getElementById("btn");
btn.onclick = function(){
console.log(1212)
getImage()
}
function getImage() {
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {

var localurl = entry.toLocalURL(); //把拍照的目录路径，变成本地url路径，例如file:///........之类的。
appendFile(localurl);

});

});
}

// 从相册添加文件 function appendByGallery(){ plus.gallery.pick(function(path){ appendFile(path);//处理图片的地方 });}

// 添加文件
var f1 = null;

function appendFile(path) {

var img = new Image();

img.src = path; // 传过来的图片路径在这里用。
var initSize = img.src.length;
img.onload = function() {
var that = this;
//生成比例
var w = that.width,
h = that.height,
scale = w / h;
w = 480 || w; //480 你想压缩到多大，改这里
h = w / scale;

//生成canvas
var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

$(canvas).attr({
width: w,
height: h
});

ctx.drawImage(that, 0, 0, w, h);

var base64 = canvas.toDataURL('image/jpeg', 0.3); //1最清晰，越低越模糊。有一点不清楚这里明明设置的是jpeg。弹出 base64 开头的一段 data：image/png;却是png。哎开心就好，开心就好
// alert(base64);

f1 = base64; // 把base64数据丢过去，上传要用。

var pic = document.getElementById("x");
pic.src = base64; //这里丢到img 的 src 里面就能看到效果了
}

}
</script>
</body>

</html>

前端中用手机拍照压缩，上传图片压缩相关推荐

android上传图片被旋转,解决android有的手机拍照后上传图片被旋转的问题
需求:做仿新浪发微博的项目,能够上传图片还有两外一个项目用到手机拍摄图片,这两个都需要把图片上传到服务器遇到问题:有的手机拍摄的图片旋转90度,有的图片旋转了180度,有的手机是正常的,服务器要求的 ...
前端解决手机拍照旋转问题及图片压缩上传
1.依赖 jquery.js 2.html部分 <input class="addImage" name="loadFile" type="f ...
解决android有的手机拍照后上传图片被旋转的问题
需求:做仿新浪发微博的项目,能够上传图片还有两外一个项目用到手机拍摄图片,这两个都需要把图片上传到服务器遇到问题:有的手机拍摄的图片旋转90度,有的图片旋转了180度,有的手机是正常的,服务器要求的 ...
前端调用手机拍照功能失败，调用相机没反应
开发过程中需要再ios app的WKwebview里面嵌入前端页面,这时候前端页面可能有需要打开手机相机拍照或者打开手机相册功能,有时候是点击没反应,有时候是点击后能够打开相机或相册,然后拍完照片确定 ...
H5调用手机摄像头拍照，如何压缩后上传
H5调用手机摄像头拍照后,怎样压缩再上传? 实际的压缩功能,就是利用canvas画布功能,将图片进行裁剪后保存图片的base64数据流,然后上传. 案例全部代码,示下: <!DOCTYPE ht ...
html手机上传图片去除拍照,HTML5手机拍照上传
首先需要在页面添加HTML5控件 capture="camera" 这样就可以在android5.0 或则 IOS 9.0 以上直接拉起照相机,但是这些版本之下的手机只能调用相册选 ...
android调用系统照相机拍照，并压缩保存在本地
1.首先拍照和保存文件肯定就需要申请权限 <uses-permission android:name="android.perm ...
vant上传图片压缩
vant上传图片压缩 // HTML部分<template><div><van-cell title="上传图片" value="(拍摄1- ...
移动端h5实现手机拍照上传图片，相册选择上传图片input type=file
移动端h5实现手机拍照上传图片,相册选择上传图片input type=file 有不足或者不对的在下方留言,有不明白的也请在下方留言,虽然我不一定能看到,话不多说上代码,注释都写好了 <!doc ...
Qt中用QuaZip来压缩和解压缩文件
1.简介 QuaZIP是使用Qt,C++对ZLIB进行简单封装的用于压缩ZIP以及解压缩ZIP的开源库.如果你的Qt项目当中用到了压缩以及解压缩ZIP的话你可以考虑选择使用它. 官方主页:http:/ ...

前端中用手机拍照压缩，上传图片压缩

前端中用手机拍照压缩，上传图片压缩相关推荐

最新文章

热门文章