<template>
<view>
<view id="container" class="content">
<view ref="imageDom" class="card h-200rpx">截图内容</view>
</view>
<view class="buttonArea">
<view class="buttonItem" @click="canvasToImage.generateImage_Share">
<image src="@/static/common/add-number.png" class="buttonImg"></image>
<view class="buttonTxt">分享给朋友</view>
</view>
<view class="buttonItem" @click="canvasToImage.generateImage">
<image src="@/static/common/add-number.png" class="buttonImg"></image>
<view class="buttonTxt">保存到相册</view>
</view>
</view>
<view>
图片成功展示哦:hellourl: {{ hellourl }}
<image :src="hellourl" class="buttonImg"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// logo: logo(),
// topBackground: topBackground(),
// QrCode: QrCode(),
hellourl: '',
data: {
type: '',
titleTime: '',
Slogan: []
},
info: {},
name: uni.getStorageSync('nickname'),
avatar: uni.getStorageSync('avatar')
}
},
mounted() {},
methods: {
// 保存图片
getSaveImg(data) {
let _this = this
uni.showLoading({
mask: true
})
let base64data = data.base64data
_this.hellourl3 = base64data
// console.log("base64data", base64data)
// return
let bitmap = new plus.nativeObj.Bitmap('test')
bitmap.loadBase64Data(
base64data,
function () {
console.log('加载Base64图片数据成功')
let time = Date.now()
let url = '_downloads/yflPic' + time + '.png'
_this.hellourl2 = url
uni.hideLoading()
bitmap.save(
url,
{},
function (i) {
console.log('保存图片成功:' + JSON.stringify(i))
uni.showToast({
title: '保存图片成功:' + JSON.stringify(i),
icon: 'none'
})
_this.hellourl = i.target
uni.uploadFile({
url: 'https://upload.imagedelivery.net/dY7HqO6nhLXDP8slbpx2Xw/minipgm%2Fgtl8aa%2Fcommon_image%2F1746799866936',
filePath: i.target,
name: 'file', // Cloudflare 要求字段名是 'file'
success: (uploadRes) => {
uni.showToast({
title: '上传成功7777' + JSON.stringify(uploadRes),
icon: 'none'
})
},
fail: (err) => {
uni.showToast({
title: '上传失败哦7777' + err,
icon: 'none'
})
}
})
return false
// 保存图片到相册
uni.saveImageToPhotosAlbum({
filePath: url,
success: function () {
uni.showToast({
title: '图片保存成功',
icon: 'none'
})
// 图片保存成功后,将临时保存的图片删除
plus.io.resolveLocalFileSystemURL(
url,
function (entry) {
entry.getMetadata(function (metadata) {
// console.log("fileCount=" + metadata.fileCount);
entry.remove() //删除单个文件 _downloads/改文件名
})
},
function (error) {
// uni.showToast({ title: "下载文件" });
console.log('error' + error)
}
)
bitmap.clear()
}
})
bitmap.clear()
},
function (e) {
onsole.log('保存图片失败:' + JSON.stringify(e))
bitmap.clear()
}
)
},
function () {
console.log('加载Base64图片数据失败:' + JSON.stringify(e))
bitmap.clear()
}
)
},
// 分享图片
getSaveImg_Share(data) {
uni.showLoading({
mask: true
})
let base64data = data.base64data
let bitmap = new plus.nativeObj.Bitmap('test')
bitmap.loadBase64Data(
base64data,
function () {
console.log('加载Base64图片数据成功')
let time = Date.now()
let url = '_downloads/yflPic' + time + '.png'
uni.hideLoading()
bitmap.save(
url,
{},
function (i) {
console.log('保存图片成功:' + JSON.stringify(i))
uni.showToast({
title: '保存图片成功:' + JSON.stringify(i),
icon: 'none'
})
// 转发图片到微信
// uni.share({
// provider: 'weixin',
// scene: 'WXSceneSession',
// type: 2,
// imageUrl: url,
// success: function (res) {
// console.log('success:' + JSON.stringify(res))
// bitmap.clear()
// },
// fail: function (err) {
// console.log('fail:' + JSON.stringify(err))
// }
// })
},
function (e) {
onsole.log('保存图片失败:' + JSON.stringify(e))
bitmap.clear()
}
)
},
function () {
console.log('加载Base64图片数据失败:' + JSON.stringify(e))
bitmap.clear()
}
)
}
}
}
</script>
<script module="canvasToImage" lang="renderjs">
import html2canvas from 'html2canvas';
export default {
data() {
return {}
},
methods: {
// 获取设备的Dpr值
getDpr() {
if (window.devicePixelRatio && window.devicePixelRatio > 1) {
return window.devicePixelRatio;
}
return 1;
},
/**
* 将传入值转为整数
* @param value
* @returns {number}
*/
parseValue(value) {
return parseInt(value, 10);
},
// 截图后保存到本地
generateImage(event, ownerInstance) {
// 获取想要转换的dom节点
var dom = document.getElementById('container');
html2canvas(dom, {
// allowTaint: false,
width: dom.clientWidth,
height: dom.clientHeight,
scrollY: 0,
scrollX: 0,
useCORS: true
}).then(function(canv) {
// 将canvas转换成图片渲染到页面上
let url = canv.toDataURL('image/jpg'); // base64数据
ownerInstance.callMethod('getSaveImg', {
base64data: url
})
});
},
// 截图后分享给好友
generateImage_Share(event, ownerInstance) {
// 获取想要转换的dom节点
var dom = document.getElementById('container');
html2canvas(dom, {
// allowTaint: false,
width: window.clientWidth,
height: window.clientHeight,
useCORS: true,
dpi: 350
}).then(function(canv) {
// 将canvas转换成图片渲染到页面上
let url = canv.toDataURL('image/jpg'); // base64数据
ownerInstance.callMethod('getSaveImg_Share', {
base64data: url,
})
});
},
}
}
</script>
<style lang="scss" scoped>
.content {
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: center;
}
.card {
width: 100%;
background: #3f65f4;
// padding: 16px;
.topTitle {
background: url('data:image/png;base64,iVBORw0K...GgoK5CYII=') no-repeat; //这里想要图片能够截取清晰则必须使用base64
background-size: 100% 100%;
width: 100%;
height: 151px;
padding: 16px;
.title {
font-weight: 600;
font-size: 36px;
color: #f5f5f7;
}
.time {
margin-top: 15px;
font-weight: 500;
font-size: 12px;
color: #fff;
}
}
}
.buttonImg {
width: 100px;
height: 100px;
}
</style>

- 发布:2025-05-09 22:34
- 更新:2025-05-09 23:20
- 阅读:52
产品分类: uni小程序SDK
手机系统: Android
手机系统版本号: iOS 16
手机厂商: 苹果
手机机型: 12 pro max
页面类型: vue
SDK版本号: 4.3.6
示例代码:
操作步骤:
点击保存到相册
获取到本地的url
hellourl复制有值,但是在image中展示不出来
点击保存到相册
获取到本地的url
hellourl复制有值,但是在image中展示不出来
预期结果:
想用本地文件在image组件中展示,但是展示不出来
可通过event.target(String类型)获取保存后的图片url路径,以"file://"开头,可直接在html页面中通过src属性引用,如Android平台"file:///storage/sdcard0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/a.jpg",iOS平台"file:///var/mobile/Containers/Data/Application/757966CF-345C-4348-B07F-EEF83CF9A369/Library/Pandora/apps/HBuilder/doc/a.png";
想用本地文件在image组件中展示,但是展示不出来
可通过event.target(String类型)获取保存后的图片url路径,以"file://"开头,可直接在html页面中通过src属性引用,如Android平台"file:///storage/sdcard0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/a.jpg",iOS平台"file:///var/mobile/Containers/Data/Application/757966CF-345C-4348-B07F-EEF83CF9A369/Library/Pandora/apps/HBuilder/doc/a.png";
实际结果:
image展示不出来
image展示不出来
bug描述:
获取本地文件路径后,用image标签 展示不出来
2 个回复
今天回复我了吗 (作者) - uniapp 粉丝条
使用这个方法可以展示, _documents/c.jpg"、"_downloads/d.jpg"
这俩个开头的不能展示,请问为什么
今天回复我了吗 (作者) - uniapp 粉丝条
而且保存成功后, 系统相册也没找到该文件,但可以在image上展示