Base64 はバイナリ データをエンコードする方法であり、バイナリ データをテキスト文字列に変換します。その主な目的は、ネットワーク送信または保存中にバイナリ データを印刷可能な文字に転送することです。
JavaScript
画像を圧縮する
<html>
<body>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<input id="file" type="file" accept="image/*"><br>
压缩后的图片：<span id="sz"></span><br>
<img id="pic">
<script>
var base64, base64_2, base64_3;
// 选择图片
$("#file").change(function () {
var m_this = this;
cutImageBase64(m_this, 900, 0.7);
})
function cutImageBase64(m_this, wid, quality) {
var file = m_this.files[0];
// 获取当前浏览器的URL对象
var URL = window.URL || window.webkitURL;
// 该方法会返回一个代表文件的Blob URL。Blob URL是一个特殊的URL，可以用来临时表示二进制数据（比如文件、图像等）
var blob = URL.createObjectURL(file);
var img = new Image();
img.src = blob;
img.onload = function () {
var that = this;
//生成比例
var w = that.width,
h = that.height,
scale = w / h;
w = wid || w;
h = w / scale;
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
$(canvas).attr({
width: w,
height: h
});
// 将指定的图像绘制到Canvas上
// 参数依次表示图像源、起始点的X坐标、起始点的Y坐标、绘制的宽度和高度
ctx.drawImage(that, 0, 0, w, h);
// 将Canvas上的图像转换为Base64编码的数据
// 参数依次表示图像类型、图像质量
base64 = canvas.toDataURL('image/jpeg', quality || 0.9);
document.getElementById("pic").src = base64;
document.getElementById("sz").innerHTML = parseInt(base64.length / 2014, 0) + "kb";
};
}
</script>
</body>
</html>
画像サイズは1.36MB～169kb
暗号化された写真
上記のコードでは、toDataURL によって画像の Base64 エンコーディングが生成されます。画像を正常に表示するには、Base64 エンコーディングが完全で正しい必要があります。ただし、このエンコードを少し変更するだけの場合は、1 文字を変更しただけでも、画像は正しく表示されません。
コードは以下のように表示されます。
<html>
<body>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<input id="file" type="file" accept="image/*"><br>
压缩后的图片：<span id="sz"></span><br>
<img id="pic">
<a onclick="jm()">点此解密并显示图片</a>
<script>
var base64, base64_2, base64_3;
// 选择图片
$("#file").change(function () {
var m_this = this;
cutImageBase64(m_this, 900, 0.7);
})
function jm() {
var pass = prompt('请输入口令', '');
if (pass != "123") {
alert("口令错误。");
}
else {
base64_2 = document.getElementById("pic").src.toString();
//解密
base64_3 = base64_2.substring(0, 26) + base64_2.substring(27, base64_2.length);
document.getElementById("pic").src = base64_3;
console.log(base64_3)
}
}
function cutImageBase64(m_this, wid, quality) {
var file = m_this.files[0];
// 获取当前浏览器的URL对象
var URL = window.URL || window.webkitURL;
// 该方法会返回一个代表文件的Blob URL。Blob URL是一个特殊的URL，可以用来临时表示二进制数据（比如文件、图像等）
var blob = URL.createObjectURL(file);
var img = new Image();
img.src = blob;
img.onload = function () {
var that = this;
//生成比例
var w = that.width,
h = that.height,
scale = w / h;
w = wid || w;
h = w / scale;
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
$(canvas).attr({
width: w,
height: h
});
// 将指定的图像绘制到Canvas上
// 参数依次表示图像源、起始点的X坐标、起始点的Y坐标、绘制的宽度和高度
ctx.drawImage(that, 0, 0, w, h);
// 将Canvas上的图像转换为Base64编码的数据
// 参数依次表示图像类型、图像质量
base64 = canvas.toDataURL('image/jpeg', quality || 0.9);
// document.getElementById("pic").src = base64;
document.getElementById("pic").src = base64.substring(0, 26) + 'a' + base64.substring(26, base64.length);
document.getElementById("sz").innerHTML = parseInt(base64.length / 2014, 0) + "kb";
};
}
</script>
</body>
</html>
画像エンコーディングは暗号化されており、パスワード保護が追加されていますが、Web ページのソースコードを見ることでパスワードを知ることができ、暗号化の効果はまったくありません。
jsコードの暗号化
次のように、暗号化されたコードを前のコードに置き換えるだけです。
睡眠アプリ
レンダリング：
コーディング：
<template>
<view class="container">
<button @click="chooseImage">选择图片</button>
<image v-if="base64Image" :src="base64Image"></image>
</view>
</template>
<script>
export default {
data() {
return {
base64Image: ''
};
},
methods: {
chooseImage() {
let _this = this
uni.chooseImage({
count: 1,
success(res) {
const tempFilePath = res.tempFilePaths[0];
uni.getFileSystemManager().readFile({
filePath: tempFilePath,
encoding: "base64",
success(data) {
console.log("图片的Base64数据:", data.data);
_this.base64Image = "data:image/jpeg;base64," + data.data;
},
fail(error) {
console.log("读取文件失败:", error);
}
});
},
fail(error) {
console.log("选择图片失败:", error);
}
});
}
}
}
</script>
<style>
.container {
margin: 20px;
}
</style>注釈:
_this.base64Image = "data:image/jpeg;base64," + data.data とは何を意味しますか?
this.base64Imageビューに画像を表示するために使用されるデータ バインディングです。「data:image/jpeg;base64」で始まる文字列を割り当て、その後ろにBase64でエンコードされた画像データを繋ぐことでthis.base64Image、ページ上にBase64形式の画像データをURLとして表示できます。
uni.画像を選択しますか？
ローカルのフォトアルバムから写真を選択するか、カメラで写真を撮ります
uni.getFileSystemManager().readFile({})?
uni-app の FileSystemManager の readFile メソッドを使用してファイルを読み取る
filePath(必須): 読み取るファイルのパス。相対パスまたは絶対パスを指定できます。
encoding(オプション): ファイルのエンコード形式。デフォルト値は「utf8」です。ファイルの内容を Base64 形式に変換する必要がある場合は、値を「base64」に設定する必要があります。
success(オプション): ファイルが正常に読み取られた後のコールバック関数は、読み取られたファイル データを示すパラメーターを受け取ります。
fail(オプション): ファイルの読み取りが失敗したときのコールバック関数。エラー メッセージを示すパラメータを受け取ります。