Base64 es un método para codificar datos binarios y convertirlos en una cadena de texto. Su objetivo principal es convertir datos binarios en caracteres imprimibles para su transmisión durante la transmisión o almacenamiento en red.
javascript
Comprimir imágenes
<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>
Tamaño de imagen de 1,36 MB a 169 kb
cifrar imágenes
En el código anterior, toDataURL genera la codificación base64 de la imagen. La codificación Base64 debe estar completa y correcta para mostrar la imagen normalmente. Sin embargo, si solo necesitas hacer una pequeña modificación a esta codificación, incluso si solo cambias un carácter, la imagen no se mostrará correctamente.
El código se muestra a continuación:
<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>
Aunque la codificación de la imagen se ha cifrado y se ha agregado protección con contraseña, puede conocer la contraseña siempre que vea el código fuente de la página web, que no tiene ningún efecto de cifrado.
cifrado de código js
Cifrado JS, ofuscación JS - JShaman: plataforma profesional de cifrado de ofuscación de código JS
Simplemente reemplace el código cifrado con el código anterior, de la siguiente manera:
aplicación para dormir
Representación:
codificación:
<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>anotación:
_this.base64Image = "data:image/jpeg;base64", + data.data ¿Qué significa?
this.base64ImageEs un enlace de datos que se utiliza para mostrar imágenes en vistas. Al this.base64Imageasignar una cadena que comienza con "data:image/jpeg;base64" y luego unir los datos de la imagen codificados en Base64, los datos de la imagen en formato Base64 se pueden mostrar en la página como una URL.
uni.elegirImagen？
Seleccione una imagen de su álbum de fotos local o tome una foto con su cámara
Documento: uni.chooseImage(OBJECT) | sitio web oficial de uni-app
uni.getFileSystemManager().readFile({})?
Leer archivos usando el método readFile de FileSystemManager en uni-app
Documentación: uni.getFileSystemManager() | sitio web oficial de uni-app
filePath(Obligatorio): La ruta del archivo a leer, que puede ser una ruta relativa o una ruta absoluta.
encoding(Opcional): el formato de codificación del archivo, el valor predeterminado es 'utf8'. Si necesita convertir el contenido del archivo al formato Base64, debe establecer este valor en 'base64'.
success(Opcional): la función de devolución de llamada después de que el archivo se lee correctamente, recibe un parámetro que representa los datos del archivo leído.
fail(Opcional): Función de devolución de llamada cuando falla la lectura del archivo, recibiendo un parámetro que indica información de error.