公告列表
公告列表
收藏
回答

iphone 13 拍照，添加画布，在图片上添加文字，导出图片，多次拍照，会出现 意外退出小程序 ？

html---------------------------------------------

<sec-title title="小区门牌"></sec-title>

<view class="hourse-photo">

<view class="xiang" v-for="(item,i) in houseNumberList" :key="item.photoName">

<image class="upload-del" @click.stop="handDelImg('number',item.src,houseNumberList)"

src="../../static/upload-del.png" mode="">

</image>

<image class="upload-img" :src="item.src" mode="scaleToFill"

@click.stop="imgPreview(i,houseNumberList)"></image>

</view>


<view @click.stop="handUploads('number','小区门牌')" v-if="houseNumberList.length <66" class="xiang">

<image class="upload-img" :src="'../../static/camera.png'" mode=""></image>

</view>

<!-- overflow:visible; -->

<!-- <view style='width:0px;height:0px;position: absolute;top: -999999rpx;'>

<canvas :style="{'width':canvasWidth,'height': canvasHeight}" canvas-id="firstCanvas"></canvas>

</view> -->

<view style='width:0px;height:0px;overflow:hidden;position: fixed;top: -999999rpx;'>

<canvas :style="{'width':canvasWidth,'height': canvasHeight}" canvas-id="firstCanvas"></canvas>

</view>


</view>


js---------------------------------

wake(res, callback) {

const that = this;

let iUp = 0;

uni.getImageInfo({

src: res.tempFilePaths[0],

success: function(ress) {

// console.log("wake getImageInfo success", ress);

// that.canvasWidth = ress.width / 2 + 'px';

// that.canvasHeight = ress.height / 2 + 'px';


// let ctx = uni.createCanvasContext('firstCanvas'); /** 创建画布 */

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

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


// ctx.setFontSize(20) // 字体大小

// // ctx.setFillStyle('#0071bd') //字体颜色

// ctx.setFillStyle('#fff') //字体颜色


// ctx.rotate(24 * Math.PI / 180);

// let textToWidth = ress.width / 4.5 * 0.5;

// let textToHeight = ress.height / 3 * 0.3;


// let textToLongWidth = ress.height / 3 * 0.3;

// let textToLongHeight = ress.height / 2.5 * 0.3;


// const {

// addressName,

// lat,

// long

// } = that

// const wateAddress = `${addressName}`

// // const latAndLong = `${String(lat).substr(0,5)},${String(long).substr(0,5)}`


// const latAndLong = `${String(long).substr(0,10)},${String(lat).substr(0,9)}`


// ctx.fillText(that.addressName, textToWidth, textToHeight)

// ctx.fillText(latAndLong, textToLongWidth, textToLongHeight)

// console.log(" wakeCanvas ctx canvasDraw",ctx)

// ctx.draw(false, () => {

// setTimeout(() => {

// console.log("wakeCanvas ctx ctx.draw",ctx)

// that.canvasDraw(callback)

// }, 1000);

// });

console.log("wake getImageInfo success", ress);

setTimeout(() => {

that.wakeCanvas(ress,res,that,callback);

}, 1000);

},

fail: function(ress)  {

console.log("wake getImageInfo fail", ress);

iUp++;

if(iUp <= 5 ){

that.wake(res, callback);

}else{

uni.hideLoading();

uni.showToast({

icon: 'none',

title: '图片上传失败，请重新拍摄上传!'

})

}

},

complete: function(ress) {

console.log("wake getImageInfo complete", ress);

if( ress.errMsg === "getImageInfo:ok"){

console.log("wake getImageInfo complete  ress.errMsg === getImageInfo:ok  ----- ",  ress.errMsg);


}else{

// uni.hideLoading();

// that.$toast('图片详细信息获取失败，请重新操作')

if(iUp > 5 ){

that.wake(res, callback);

}

}

},

})


// let ress = await uni.getImageInfo({src: res.tempFilePaths[0]})

// // let ress = (await uni.getImageInfo({src}))[1];


// that.canvasWidth = ress.width / 2 + 'px';

// that.canvasHeight = ress.height / 2 + 'px';


// let ctx = uni.createCanvasContext('firstCanvas'); /** 创建画布 */

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

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


// ctx.setFontSize(20) // 字体大小

// // ctx.setFillStyle('#0071bd') //字体颜色

// ctx.setFillStyle('#fff') //字体颜色


// ctx.rotate(24 * Math.PI / 180);

// let textToWidth = ress.width / 4.5 * 0.5;

// let textToHeight = ress.height / 3 * 0.3;


// let textToLongWidth = ress.height / 3 * 0.3;

// let textToLongHeight = ress.height / 2.5 * 0.3;


// const {

// addressName,

// lat,

// long

// } = that

// const wateAddress = `${addressName}`

// // const latAndLong = `${String(lat).substr(0,5)},${String(long).substr(0,5)}`


// const latAndLong = `${String(long).substr(0,10)},${String(lat).substr(0,9)}`


// ctx.fillText(that.addressName, textToWidth, textToHeight)

// ctx.fillText(latAndLong, textToLongWidth, textToLongHeight)


// ctx.draw(false, () => {

// setTimeout(() => {

// that.canvasDraw(callback)

// }, 1000);

// });

},

// new dyj

wakeCanvas(ress,res,that,callback){

const timeWakeCanvasKs = that.getNowTime();

console.log("timeWakeCanvasKs ________",timeWakeCanvasKs);

that.canvasWidth = ress.width / 2 + 'px';

that.canvasHeight = ress.height / 2 + 'px';

let ctx = uni.createCanvasContext('firstCanvas', that); 

// console.log("wakeCanvas ctx",ctx)

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

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

ctx.setFontSize(20) // 字体大小

// ctx.setFillStyle('#0071bd') //字体颜色

ctx.setFillStyle('#fff') //字体颜色

ctx.rotate(24 * Math.PI / 180);

let textToWidth = ress.width / 4.5 * 0.5;

let textToHeight = ress.height / 3 * 0.3;

let textToLongWidth = ress.height / 3 * 0.3;

let textToLongHeight = ress.height / 2.5 * 0.3;

const {

addressName,

lat,

long

} = that

const wateAddress = `${addressName}`

// const latAndLong = `${String(lat).substr(0,5)},${String(long).substr(0,5)}`

const latAndLong = `${String(long).substr(0,10)},${String(lat).substr(0,9)}`

ctx.fillText(that.addressName, textToWidth, textToHeight)

ctx.fillText(latAndLong, textToLongWidth, textToLongHeight)

// console.log("wakeCanvas ctx canvasDraw",ctx)

ctx.draw(false, () => {

const timeWakeCanvasJs = that.getNowTime();

console.log("timeWakeCanvasJs ________",timeWakeCanvasJs);

setTimeout(() => {

console.log("wakeCanvas ctx canvasDraw ctx.draw",ctx)

const timeWakeCanvasDcq = that.getNowTime();

console.log("timeWakeCanvasDcq ________",timeWakeCanvasDcq);

that.canvasDraw(callback)

}, 1000);

});

// ctx.draw(false);

// setTimeout(() => {

// const timeWakeCanvasDcq = that.getNowTime();

// console.log("timeWakeCanvasDcq ________",timeWakeCanvasDcq);

// that.canvasDraw(callback)

// }, 1000);

},

canvasDraw(callback) {

const that = this

let iUp = 0;

uni.canvasToTempFilePath({

canvasId: 'firstCanvas',

success: (res1) => {

console.log("canvasDraw canvasToTempFilePath success", res1);

// console.log(res1.tempFilePath,

// '带水印的图片');

callback(res1.tempFilePath)

},

fail: (ress) => {

console.log("canvasDraw canvasToTempFilePath fail", ress);

iUp++;

if(iUp <= 5 ){

that.canvasDraw(callback)

}else{

uni.hideLoading();

uni.showToast({

icon: 'none',

title: '图片上传失败，请重新拍摄上传!'

})

}

},

complete: (ress) => {

console.log("canvasDraw canvasToTempFilePath complete", ress);

if( ress.errMsg === "canvasToTempFilePath:ok"){

// console.log("canvasDraw canvasToTempFilePath complete ress.errMsg === canvasToTempFilePath:ok  -----  " ,  ress.errMsg);

// callback(ress.tempFilePath)

}else{

if(iUp > 5 ){

that.canvasDraw(callback)

}

// uni.hideLoading();

// this.$toast('图片水印绘制失败，请重新操作')

}

},

}, this);

},

// 拍照上传 去掉横岗后面

    handUploads(type, name) {

// if (!this.addressName) {

// return this.$toast('请先授权定位')

// }

if (!this.long) {

return this.$toast('请先授权定位')

}

const that = this

const timeKs = that.getNowTime();

console.log("timeKs ________",timeKs);

uni.chooseImage({

count: 1, //默认9

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

sourceType: ['camera'], //拍照camera,相册album

success: function(res) {

if (res.tempFiles[0].size > 1020000) {

return that.$toast('图片太大')

}


// that.$loading('上传中')

uni.showLoading({

title: "正在上传...",

mask: true,

});


console.log(res, '选择图片的rees111');


that.wake(res, (callback) => {

const timeJs = that.getNowTime();

console.log("timeJs ________",timeJs);

console.log(callback, 'callback');

let img = callback;

that.houseNumber = img; // that.houseNumber = res.tempFiles[0].path

// console.log(res, '选择图片的rees111  that.wake');

let _photoName = name + "_" + name + "_" + that.$functionPub

.getSubLastYxWx(img) + that.$functionPub.getSubLastYx(img);


// that.$api.uploadeFilesFormal(img, '/uploadFile/ftpUploadFile',

// 'file', {

// photoName: _photoName,

// imageNum: uni.getStorageSync('customer_listdata').imageNum,

// }) // src, urltype, name, params

// uni.hideLoading();


// new

// console.log(img, '选择图片的rees111 uploadeFilesFormal');

that.$api.uploadeFilesFormal(img, '/uploadFile/ftpUploadFile',

'file', {

photoName: _photoName,

imageNum: uni.getStorageSync('customer_listdata').imageNum,

}).then(res => {

if (res.code === "200") {

if (type === 'number') {

that.houseNumberList.push({

src: img,

name,

type: that.$functionPub.getSubLastYx(img),

typeName: that.$functionPub.getSubLastYxWx(img),

photoName: _photoName

})

} else if (type === 'unit') {

that.unitDoorList.push({

src: img,

name,

type: that.$functionPub.getSubLastYx(img),

typeName: that.$functionPub.getSubLastYxWx(img),

photoName: _photoName

})

} else if (type === 'hourse') {

that.hourseDoorList.push({

src: img,

name,

type: that.$functionPub.getSubLastYx(img),

typeName: that.$functionPub.getSubLastYxWx(img),

photoName: _photoName

})

}

const timeJsEnd = that.getNowTime();

console.log("timeJsEnd ________",timeJsEnd);

uni.hideLoading();

} else {

uni.hideLoading();

}

});



})


// let img = res.tempFilePaths[0];

// that.houseNumber = img // that.houseNumber = res.tempFiles[0].path


// let _photoName = name + "_" + name + "_" + that.$functionPub.getSubLastYxWx(

// img) + that.$functionPub.getSubLastYx(img)


// if (type === 'number') {

// that.houseNumberList.push({

// src: img,

// name,

// type: that.$functionPub.getSubLastYx(img),

// typeName: that.$functionPub.getSubLastYxWx(img),

// photoName: _photoName

// })

// } else if (type === 'unit') {

// that.unitDoorList.push({

// src: img,

// name,

// type: that.$functionPub.getSubLastYx(img),

// typeName: that.$functionPub.getSubLastYxWx(img),

// photoName: _photoName

// })

// } else if (type === 'hourse') {

// that.hourseDoorList.push({

// src: img,

// name,

// type: that.$functionPub.getSubLastYx(img),

// typeName: that.$functionPub.getSubLastYxWx(img),

// photoName: _photoName

// })

// }




// that.$api.uploadeFilesFormal(img, '/uploadFile/ftpUploadFile', 'file', {

// photoName: _photoName,

// imageNum: uni.getStorageSync('customer_listdata').imageNum,

// }) // src, urltype, name, params



},

fail: function(ress)  {

console.log("handUploads chooseImage fail", ress);

uni.hideLoading();

// uni.showToast({

// icon: 'none',

// title: '图片上传失败，请重新拍摄上传!'

// })

},

});

},

回答关注问题邀请回答
收藏

2 个回答

  • Demons
    Demons
    2022-08-22

    请具体描述问题出现的流程，并提供能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。

    2022-08-22
    有用
    回复
  • 李聪
    李聪
    2022-08-22

    canvas比较蚝性能，建议改一下，图片由后台处理。或者交互改一下：图片预览部分用节点来渲染，最后提交的时候再用canvas处理完成提交给后台

    2022-08-22
    有用
    回复
请 登录 后发表内容
相关问题
相关文档