canvas画布保存的图片链接拒绝访问,上传报错
发布于 5 年前 作者 dxue 7952 次浏览 来自 问答
  • 当前 Bug 的表现(可附上截图)
  • 预期表现
  • 复现路径
  • 提供一个最简复现 Demo

js代码

Page({

data: {

url:’’,

fileList:[],

canvasHeight:’’,

canvasWidth:’’,

},

onLoad: function (e) {

var that = this;

wx.chooseImage({

count: 9, // 默认9

sourceType: [‘camera’],

sizeType: [‘original’, ‘compressed’], // 可以指定是原图还是压缩图,默认二者都有

success: function (res) {

// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片

var arr = that.data.fileList

res.tempFilePaths.forEach(function (item) {

arr.push(item)

})

that.setData({

fileList: arr

})

//获取图片详细信息

wx.getImageInfo({

src: res.tempFilePaths[0],

success: (ress) => {

let date =new Date();

let time = date.toLocaleTimeString()

let ctx = wx.createCanvasContext(‘firstCanvas’)

that.setData({

canvasHeight: ress.height,

canvasWidth: ress.width

})

//将图片src放到cancas内,宽高为图片大小

ctx.drawImage(res.tempFilePaths[0], 0, 0, ress.width, ress.height)

//将声明的时间放入canvas

ctx.setFontSize(30) //注意:设置文字大小必须放在填充文字之前,否则不生效

ctx.setFillStyle(‘blue’)

ctx.fillText(‘拍摄地点’, 0, 100)

ctx.fillText(‘单证类型’, 100, 50)

ctx.strokeText(time, 100, 10)

ctx.draw(false, function () {

wx.canvasToTempFilePath({

canvasId: ‘firstCanvas’,

success: (res) => {

console.log(res.tempFilePath)

wx.uploadFile({

url: ‘’,

filePath: res.tempFilePath[0],

name: ‘file’,

formData:{},

header: {

“Content-Type”: “multipart/form-data”

},

success: function (res) {

console.log(res.data)

},

fail: function (res) {

console.log(res)

},

complete: function (res) {

console.log(res)

}

})

},

fail: (e) => {

console.log(e)

}

})

})

}

})

}

})

}

})

index.html

<canvas class=‘canvas’ style=“width:{{canvasWidth}}px;height:{{canvasHeight}}px;top:{{canvasHeight*2}}px;” canvas-id=“firstCanvas”></canvas>

index.css

.canvas{

position: fixed;

top: 200%;

left: 0;

/* background: red;*/

width: 100%;

height: 100%;

}

2 回复

临时文件路径,本来就直接访问不了,但是可以上传的呢。

上传也报错啊

而且临时路径以前是可以点开看的

回到顶部