画像を共有して圧縮してデモをアップロードします.一枚または複数の写真を選んで写真を撮ってもいいです.
25793 ワード
2016-08-05更新:下のコードは比較的OLDです.jsによって画像の切り出し回転を行って再生成するので、効率が低いです.その後、native.jsローカルインターフェースを利用した圧縮コードを統合しました.ここにリンクします.ページに詳しい説明がありますが、必要な子供用の靴は以下の通りです.
ソースアドレスhttps://github.com/phillyx/MUIDemos/tree/dce9283ea3e0726ccff0e8ef5b25fa028025ac69
コード統合しました.偉子二人のデモのうち、resize元のfilereaderは5でplus.io.FileReaderに変更されました.誤りがあれば,批判を惜しまず指摘してください. 更新日誌:[email protected]では画像の幅の高さが取れない問題を修復しました.iosではimg.onloadにいないとファイルのオブジェクトが取得できません.
最大幅(高さ)の判別が追加され、比例圧縮されました.具体的なコードは以下の通りです.
画像を共有して圧縮してアップロードします.一枚または複数の写真を選んで写真を撮ってもいいです.
転載先:https://www.cnblogs.com/xiaoshen666/p/10917027.html
ソースアドレスhttps://github.com/phillyx/MUIDemos/tree/dce9283ea3e0726ccff0e8ef5b25fa028025ac69
コード統合しました.
最大幅(高さ)の判別が追加され、比例圧縮されました.具体的なコードは以下の通りです.
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>title>
<link href="http://ask.dcloud.net.cn/../../../css/mui.min.css" rel="stylesheet" />
<style type="text/css">
body {
background-color: #efeff4;
}
.mui-content {} .mui-content a {
color: #8F8F94;
}
.mui-content a.active {
color: #007aff;
}
.mui-title {
font-family: simhei;
}
.btn_1 {
position: absolute;
bottom: 100px;
left: 10px;
right: 10px;
}
.btn_2 {
position: absolute;
bottom: 20px;
left: 10px;
right: 10px;
}
.mui-btn-block {
width: 90%;
margin: 0 auto;
}
body {
overflow: hidden;
}
.showimg {
margin: 20px 10px auto 10px;
text-align: center;
}
style>
head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">a>
<h1 class="mui-title"> h1>
<a class="mui-pull-right mui-icon mui-icon-upload" onclick="imgupgrade()">a>
header>
<div class="mui-content">
<div class="showimg">
div>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block btn_1" onclick="galleryImgs()"> button>
<br>
<button type="button" class="mui-btn mui-btn-success mui-btn-block btn_2" onclick="cameraimages()"> button>
div>
body>
<script src="../../../js/mui.min.js">script>
<script src="../../../js/binaryajax.js" type="text/javascript" charset="utf-8">script>
<script src="../../../js/exif.js" type="text/javascript" charset="utf-8">script>
<script src="../../../js/canvasResize.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {})
//
function galleryImg() {
//
f1.splice(0, f1.length);
document.getElementsByClassName("showimg")[0].innerHTML = null;
//
mui.toast(" ");
plus.gallery.pick(function(path) {
showImg(path);
}, function(e) {
mui.toast(" ");
}, {
filter: "image",
multiple: false
});
}
function galleryImgs() {
//
f1.splice(0, f1.length);
document.getElementsByClassName("showimg")[0].innerHTML = null;
//
mui.toast(" ");
plus.gallery.pick(function(e) {
if (e.files.length != 2) {
mui.toast(' ');
return false;
}
for (var i in e.files) {
showImg(e.files[i]);
}
}, function(e) {
mui.toast(" ");
}, {
filter: "image",
multiple: true
});
}
//
function cameraimages() {
//
f1.splice(0, f1.length);
document.getElementsByClassName("showimg")[0].innerHTML = null;
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
var localurl = entry.toLocalURL(); // ， url ， file:///........ 。
showImg(localurl);
});
}, function(e) {
mui.toast(" ， " e);
});
}
// ， ,
var f1 = new Array();
function imgupgrade() {
mui.toast(' ');
return;
var wt = plus.nativeUI.showWaiting();
var url = ' ';
var dataType = 'json';
//
var data = {
files1: f1 //base64
};
mui.post(url, data, success, dataType);
}
//
var success = function(response) {
plus.nativeUI.closeWaiting();
if (response != null) {
alert(" ");
}
}
function showImg(url) {
// “file:”
if (0 != url.toString().indexOf("file://")) {
url = "file://" + url;
}
var div = document.getElementsByClassName("showimg")[0];
var img = new Image();
img.src = ur l; // 。
img.onclick = function () {
plus.runtime.openFile(url);
};
img.onload = functi on() {
var tmph = img.height;
var tmpw = img.width;
var isHengTu = tmpw > tmph;
var max = Math.max(tmpw, tmph);
var min = Math.min(tmpw, tmph);
var bili = min / max;
if (max > 1200) {
max = 1200;
min = Math.floor(bili * max);
}
tmph = isHengTu ? min : max;
tmpw = isHengTu ? max : min;
img.style.border = "1px solid rgb(200,199,204)";
img.style.margin = "10px";
img.style.width = "150px";
img.style.height = "150px";
img.onload = null;
plus.io.resolveLocalFileSystemURL(url, function (entry) {
entry.file(function (file) {
console.log(file.size + '--' + file.name);
canvasResize(file, {
width: tmpw,
height: tmph,
crop: false,
quality: 50, //
rotate: 0,
callback: function (data, width, height) {
f1.push(data);
img.src = data;
div.appendChild(img);
plus.nativeUI.closeWaiting();
}
});
});
},
function (e) {
plus.nativeUI.closeWaiting();
console.log(e.message);
});
};
}; 画像を共有して圧縮してアップロードします.一枚または複数の写真を選んで写真を撮ってもいいです.
転載先:https://www.cnblogs.com/xiaoshen666/p/10917027.html