极客观点
项目管理
HarmonyOS
小程序canvas把网络图片下载缓存到本地之后为什么显示不出来？
html
<view class='one'>
<canvas style='width:{{width}}px;height:{{height}}px' canvas-id="firstCanvas">
</canvas>
</view>
<view class='three'></view>
<view class='two' bindtap='totemp'>
保存并分享到朋友圈
</view>
JavaScript
// zh_jd/pages/canvas/canvas.js
var app = getApp()
var hotel
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this
var width = 0
var height = 0
wx.getSystemInfo({
success: res => {
console.log(res)
width = res.windowWidth
height = res.windowHeight
that.setData({
width: res.windowWidth,
height: res.windowHeight
})
}
})
var url = wx.getStorageSync("url")
console.log('可使用的宽度为' + width + 'px')
console.log('可使用的高度为' + height + 'px')
function getTrueLength(str) {//获取字符串的真实长度（字节长度）
var len = str.length, truelen = 0;
for (var x = 0; x < len; x++) {
if (str.charCodeAt(x) > 128) {
truelen += 2;
} else {
truelen += 1;
}
}
return truelen;
}
var ctx = wx.createCanvasContext('firstCanvas')
ctx.setFillStyle('#fff')
ctx.fillRect(0, 0, width, height-100)
ctx.fillStyle = "#333";
ctx.setFontSize(16)
ctx.lineWidth = 1;
var dText = "虎嗅注：麦赫特（Saumil Mehta，现任Square的总经理）曾是一家初创公司的创始人，后来他的公司被Square（美国的一家移动支付公司）收购，他也因此和其他几名同事加盟了Square。他讲述了自己在Square工作两年后的一些感悟，并首次分享了“与之前我们告诫自己的内容”形成鲜明对比的五个告白"
var lastSubStrIndex = 0;
var dTextWidth = 0;
var lineHeight = 30; // 行高
var initX = 15; // 起始X坐标
var initY = 80 / 2; // 起始Y坐标
for (var i = 0; i < dText.length; i++) {
dTextWidth += ctx.measureText(dText[i]).width;
if (dTextWidth > width-20 - initX) {
ctx.fillText(dText.substring(lastSubStrIndex, i), initX, initY);
initY += lineHeight;
dTextWidth = 0;
lastSubStrIndex = i;
}
if (i == dText.length - 1) {
ctx.fillText(dText.substring(lastSubStrIndex, i + 1), initX, initY);
}
}
console.log(initX)
console.log(initY)
var wid = width-200
function downLoadImg(netUrl, storageKeyUrl) {
wx.getImageInfo({
src: netUrl,
success: function (res) {
wx.setStorage({
key: storageKeyUrl,
data: res.path,
});
}
})
}
var image = url + "images/24/2018/03/JZtspJM73RInTt961Spc99M1ZzvS79.jpg"
downLoadImg(image,'imgs')
var headUrl = wx.getStorageSync('imgs')
console.log(headUrl)
if(headUrl!=''||headUrl!=null){
ctx.drawImage(headUrl, 50, 50, 200, 200)
ctx.draw()
}
},
totemp: function (e) {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 414,
height: 600,
destWidth: 414,
destHeight: 600,
canvasId: 'firstCanvas',
success: function (res) {
console.log(res.tempFilePath)
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: res => {
console.log(res)
}
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})附上截图
求解！！！！！！！！！！！！！
显示不了图片，因为路径错了。
显示本地图片时，图片路径不能使用 http:// 作为前缀。我这边没有开发环境调试，你应该试一下 file:// 前缀，如下：