dataURLtoBlob 图片自定义

return: Promise

使用指南

全局使用 (推荐)
  1. //main.js
  2. import Ctpic from '@/common/uni-app-customImg/custom-picture.js';    //文件路径请换成本地路径
  3. Vue.prototype.$Ctpic = new Ctpic();   //挂载到原型上
局部使用
  1. import Ctpic from '@/common/uni-app-customImg/custom-picture.js'; //文件路径请换成本地路径
  2. const ctpic = new Ctpic();
  3. let res=await ctpic.dataURLtoBlob({
  4.         path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=299253315,3157332866&fm=26&gp=0.jpg',
  5.         isNet: true,    //是否为网络路径
  6.         filename: '陈玉琪我女神', //自定义文件名，非后缀
  7. });
  8. console.log(res);

代码演示

1.简单使用
  1. //默认转为.png文件，名称为 HHYANG
  2. let res = await this.$Ctpic.dataURLtoBlob({
  3.     path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=299253315,3157332866&fm=26&gp=0.jpg',
  4.     isNet: true,
  5. });
2.网络图片转自定义的 base64 值
  1. let res = await this.$Ctpic.dataURLtoBlob({
  2.     path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=299253315,3157332866&fm=26&gp=0.jpg',
  3.     isNet: true,
  4.     GetBase64:true
  5. });
3.转自定义名称
  1. let res = await this.$Ctpic.dataURLtoBlob({
  2.     path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=299253315,3157332866&fm=26&gp=0.jpg',
  3.     isNet: true,
  4.     filename:'陈玉琪我女神'
  5. });
4.转自定义名称和格式
  1. let res = await this.$Ctpic.dataURLtoBlob({
  2.     path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=299253315,3157332866&fm=26&gp=0.jpg',
  3.     isNet: true,
  4.     filename:'陈玉琪我女神',
  5.     format:'png'
  6. });
5.网络图片转自定义的 base64 值、并压缩指定百分比
  1. let res = await this.$Ctpic.dataURLtoBlob({
  2.     path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=299253315,3157332866&fm=26&gp=0.jpg',
  3.     isNet: true,
  4.     filename:'陈玉琪我女神',
  5.     format:'png',
  6.     GetBase64:true,
  7.     compress:0.5,   //压缩百分之50
  8. });
6.自定义文件名和格式后上传示例
  1. try {
  2.     let res = await this.$Ctpic.dataURLtoBlob({
  3.         path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=299253315,3157332866&fm=26&gp=0.jpg',
  4.         isNet: true,
  5.         filename: '陈玉琪我女神',
  6.     });
  7.     let filePath = '';
  9.     // #ifdef APP-PLUS
  10.     filePath = filePath.target
  11.     // #endif
  13.     // #ifndef APP-PLUS
  14.     filePath = res;
  15.     // #endif
  17.     uni.uploadFile({
  18.         url: 'http://192.168.0.29:1111/upload_images', //本地接口，换成自己的
  19.         filePath,
  20.         name: 'upload',
  21.         success: (uploadFileRes) => {
  22.             console.log(uploadFileRes.data);
  23.         }
  24.     });
  26. } catch (e) {
  27.     console.log(e)
  28. }

dataURLtoBlob 参数

属性名类型默认值描述兼容
pathString用于加载的图片地址，可以是网络路径也可以是本地路径app/h5/微信小程序
GetBase64Booleanfalse是否仅取当前图片的自定义格式的 base64 值app/h5/微信小程序
filenameStringHHYANG自定义的图片名称app/h5/微信小程序
formatStringpng自定义的图片的格式app/h5/微信小程序
isNetBooleanfalse当前转换的图片是否为网络图片,设置为 true 自动加载网络图片并转换完成app/h5/微信小程序
compressNumber1压缩图片百分比，默认不压缩 0-1 之间，值越大越清晰,默认为不压缩app/h5

dataURLtoBlob 返回参数

终端返回值类型描述
appObject返回一个文件对象，包含文件的绝对路径，图片的高度、宽度、大小 可以通过返回的绝对路径直接上传，也可以支持赋值 img 标签进行预览
h5String返回一个自定义完成的 file 对象 blob 路径，可以通过返回的 blob 路径直接上传，也可以支持赋值 img 标签进行预览
微信小程序String返回一个用户可以操作的绝对路径，可以通过返回的路径直接上传，不支持赋值预览，如需预览可以通过转 base64 预览

以上均为转自定义文件，而非返回 base64 数据。