【base64】JavaScript&uniapp 将图片转为base64并展示-Toy模板网

这篇具有很好参考价值的文章主要介绍了【base64】JavaScript&uniapp 将图片转为base64并展示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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>

【base64】JavaScript&uniapp 将图片转为base64并展示,Javascript与ES6~,html5 && css3 && 浏览器,uniapp全栈,javascript,开发语言,ecmascript

图片大小从1.36MB到169kb

加密图片

上面的代码中，toDataURL产生的是图片的base64编码，Base64编码必须是完整且正确才能正常显示图片。而只需对此编码做小小修改，哪怕仅是改动一个字符，也会让图片无法正常显示

代码如下：

<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>

【base64】JavaScript&uniapp 将图片转为base64并展示,Javascript与ES6~,html5 && css3 && 浏览器,uniapp全栈,javascript,开发语言,ecmascript

虽然图片编码经过了加密，而且增加了口令保护，但是只要查看网页源码，就可以知道口令，这样完全没有起到加密的效果

js代码加密

JS加密、JS混淆 - JShaman：专业JS代码混淆加密平台

【base64】JavaScript&uniapp 将图片转为base64并展示,Javascript与ES6~,html5 && css3 && 浏览器,uniapp全栈,javascript,开发语言,ecmascript

直接将加密后的代码替换成以前的代码即可，如下：

【base64】JavaScript&uniapp 将图片转为base64并展示,Javascript与ES6~,html5 && css3 && 浏览器,uniapp全栈,javascript,开发语言,ecmascript

uniapp

效果图：

编码：

<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>