canvas生成圖片失真問題
- canvas生成圖片的程序
- 把網路圖片保存到小程式的快取中，并獲取到圖片的資訊用
getImageInfo - 在canvas上繪制想要的圖片，用canvas各種方法
- 使用
canvasToTempFilePath或者saveImageToPhotosAlbum保存圖片
分析決定圖片質量， 圖片失真的原因在第三部，使用canvasToTempFilePath保存的時候，
- 示例代碼
saveImageCanvas(){
wx.showLoading({
title: '正在保存',
})
let bgImageObj = this.data.bgImageObj;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 300,
height: 500,
destWidth: bgImageObj.width, // 決定了保存圖片的清晰程度
destHeight: bgImageObj.height, // 決定了保存圖片的清晰程度
canvasId: 'share',
success(res) {
console.log(res.tempFilePath);
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.hideLoading()
wx.showToast({
title: '圖片保存成功',
})
console.log("保存成功")}
})
},
fail(){
console.log("shibai");
wx.hideLoading()
wx.showToast({
title: '圖片保存失敗，請稍后再試',
icon: 'none'
})
},
complete(){
console.log("完成")
}
})
}
canvasToTempFilePath的destWidth, destHeight決定了圖片的清晰度和像素，只要按比例放大這個數值，圖片質量也會提高，
在ios中draw失效問題
- 示例代碼
cxt_arc.draw(false, function (e) {
console.log('draw callback')
})
- 問題分析
canvas.draw 繪圖結束后的回呼再IOS上不執行，安卓手機未見此問題，
原因為：頁面上設定了 wx:if hidden，本想在繪圖結束后再顯示，不過再IOS11上不行，
解決辦法：去掉hidden / wx:if 或者再draw之前顯示頁面，總之頁面不顯示沒辦法在IOS上執行draw的回呼函式
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/258762.html
標籤：其他
上一篇：java開發環境的搭建