重点是uniapp图片转base64，web端作为知识扩充进行了实现。对方法进行了promise封装。 uniapp方法封装抛出了错误。web端未抛出。只参考网络例子进行了测试.
uniapp
- 以下方法兼容app端, 即iosAndroid.
// 支持以下图片路径： 相对路径 - 相对于当前页面的host位置，如"a.jpg"，注意当前页面为网络地址则不支持； 绝对路径 - 系统绝对路径，如Android平台"/storage/sdcard0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/www/ａ.jpg"，iOS平台"/var/mobile/Containers/Data/Application/757966CF-345C-4348-B07F-EEF83CF9A369/Library/Pandora/apps/HBuilder/www/a.png"； 相对路径URL(RelativeURL) - 以"_"开头的相对路径，如"_www/a.jpg"、"_doc/b.jpg"、"_documents/c.jpg"、"_downloads/d.jpg"； 本地路径URL - 以“file://”开头，后面跟随系统绝对路径。
// 平台支持
// Android - 2.2+ (支持) :
// 支持jpg/jpeg、png等格式图片。
// iOS - 5.0+ (支持) :
// 支持jpg/jpeg、png、tif/tiff、gif、bmp、ico、cur、xbm等格式图片。
getAppImageBase64(src) {
return new Promise((resolve, reject) => {
let base64Data = null;
plus.zip.compressImage(
{
src: plus.io.convertLocalFileSystemURL(src),
dst: `_doc/temp/${+new Date()}.jpg`,
quality: 70
},
({ target, size }) => {
console.log(target, size);
plus.io.resolveLocalFileSystemURL(target, file => {
const fileReader = new plus.io.FileReader();
fileReader.readAsDataURL(file);
fileReader.onloadend = ({ target: { result } }) => {
base64Data = result.replace(/^data:image\/\w+;base64,/, '');
resolve(base64Data);
};
fileReader.onerror = err => {
console.log('读取文件失败', err);
};
});
},
e => {
reject(e);
}
);
});
}web端
方法一
getWebImageBase64_1(imgUrl) {
return new Promise((resolve, reject) => {
window.URL = window.URL || window.webkitURL;
let xhr = new XMLHttpRequest();
xhr.open('get', imgUrl, true);
// 至关重要
xhr.responseType = 'blob';
xhr.onload = function() {
if (this.status == 200) {
//得到一个blob对象
let blob = this.response;
console.log('blob', blob);
// 至关重要
let oFileReader = new FileReader();
oFileReader.onloadend = function(e) {
let base64 = e.target.result;
// console.log('方式一》》》》》》》》》', base64);
resolve(base64)
};
oFileReader.readAsDataURL(blob);
}
};
xhr.send();
})
}方法二
getWebImageBase64_2() {
let img = 'https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/uni-app-frame-0310.png'; //imgurl 就是你的图片路径
function getBase64Image(img) {
let canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, img.width, img.height);
let ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();
let dataURL = canvas.toDataURL('image/' + ext);
return dataURL;
}
return new Promise((resolve, reject) => {
let image = new Image();
image.src = img;
image.setAttribute("crossOrigin",'Anonymous')
image.onload = function() {
let base64 = getBase64Image(image);
// console.log(base64);
resolve(base64)
}
})
}
}uniapp测试页面源码
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{ title }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
};
},
onLoad() {
// #ifdef APP-PLUS
this.getAppImageBase64('/static/logo.png')
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
// #endif
// #ifdef H5
this.getWebImageBase64_1('https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/uni-app-frame-0310.png').then(res => {
console.log('getWebImageBase64_1', res);
})
this.getWebImageBase64_2().then(res => {
console.log('getWebImageBase64_2', res);
});
// #endif
},
methods: {
// 支持以下图片路径： 相对路径 - 相对于当前页面的host位置，如"a.jpg"，注意当前页面为网络地址则不支持； 绝对路径 - 系统绝对路径，如Android平台"/storage/sdcard0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/www/ａ.jpg"，iOS平台"/var/mobile/Containers/Data/Application/757966CF-345C-4348-B07F-EEF83CF9A369/Library/Pandora/apps/HBuilder/www/a.png"； 相对路径URL(RelativeURL) - 以"_"开头的相对路径，如"_www/a.jpg"、"_doc/b.jpg"、"_documents/c.jpg"、"_downloads/d.jpg"； 本地路径URL - 以“file://”开头，后面跟随系统绝对路径。
// 平台支持
// Android - 2.2+ (支持) :
// 支持jpg/jpeg、png等格式图片。
// iOS - 5.0+ (支持) :
// 支持jpg/jpeg、png、tif/tiff、gif、bmp、ico、cur、xbm等格式图片。
getAppImageBase64(src) {
return new Promise((resolve, reject) => {
let base64Data = null;
plus.zip.compressImage(
{
src: plus.io.convertLocalFileSystemURL(src),
dst: `_doc/temp/${+new Date()}.jpg`,
quality: 70
},
({ target, size }) => {
console.log(target, size);
plus.io.resolveLocalFileSystemURL(target, file => {
const fileReader = new plus.io.FileReader();
fileReader.readAsDataURL(file);
fileReader.onloadend = ({ target: { result } }) => {
base64Data = result.replace(/^data:image\/\w+;base64,/, '');
resolve(base64Data);
};
fileReader.onerror = err => {
console.log('读取文件失败', err);
};
});
},
e => {
reject(e);
}
);
});
},
getWebImageBase64_1(imgUrl) {
return new Promise((resolve, reject) => {
window.URL = window.URL || window.webkitURL;
let xhr = new XMLHttpRequest();
xhr.open('get', imgUrl, true);
// 至关重要
xhr.responseType = 'blob';
xhr.onload = function() {
if (this.status == 200) {
//得到一个blob对象
let blob = this.response;
console.log('blob', blob);
// 至关重要
let oFileReader = new FileReader();
oFileReader.onloadend = function(e) {
let base64 = e.target.result;
// console.log('方式一》》》》》》》》》', base64);
resolve(base64)
};
oFileReader.readAsDataURL(blob);
}
};
xhr.send();
})
},
getWebImageBase64_2() {
let img = 'https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/uni-app-frame-0310.png'; //imgurl 就是你的图片路径
function getBase64Image(img) {
let canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, img.width, img.height);
let ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();
let dataURL = canvas.toDataURL('image/' + ext);
return dataURL;
}
return new Promise((resolve, reject) => {
let image = new Image();
image.src = img;
image.setAttribute("crossOrigin",'Anonymous')
image.onload = function() {
let base64 = getBase64Image(image);
// console.log(base64);
resolve(base64)
}
})
}
}
};
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
版权属于：ic翼
本文链接：https://bingyishow.top/Technical-article/174.html
您必须遵守 署名-非商业性使用-相同方式共享 CC BY-NC-SA 使用这篇文章
