uni-app canvasToTempFilePath画布问题
<p>最近在做一个截图功能，发现uni-app分享自定义图片还是有点问题</p><p>APP端的分享和微信小程序分享还是有点不同的，这里APP测试用的是安卓手机</p>
<p> </p>
<p>下面列举下我遇到的问题</p>
<p><span style="color: rgba(153, 51, 0, 1)"><strong>1.draw函数的回调不执行</strong></span></p>
<p> 一般都是ctx.draw(false,()=>{})的方式执行，但是打印半天都不进入，发现是回调函数的问题，查了一会，最终还是在微信社区找到了解决方案，那就是<span style="color: rgba(0, 204, 255, 1)">强制执行函数</span></p>
<div class="cnblogs_code">
<pre> ctx.draw(<span style="color: rgba(0, 0, 255, 1)">false</span>,(()=>{})())</pre>
</div>
<p><span style="color: rgba(153, 51, 0, 1)"><strong>2.canvasToTempFilePath生成的图片很模糊</strong></span></p>
<p> 这在微信小程序也是存在的，方案大都是W450-H200变成W900-H400的放大画布像素，而我在uni-app试了一点变化都木有还是模糊，还去小程序测了个demo,发现小程序没问题，调大了也变清晰了</p>
<p> 就很纳闷，然后疯狂找了半天，uniapp社区方案还是太少了，然后又去微信社区，发现有人跟我碰到一样的问题，作者下面回了句“我的是<span style="color: rgba(0, 204, 255, 1)">图片太大</span>的原因”，刚开始感觉应该不是，后面还是试了一下，</p>
<p> 真的是图片大的原因。</p>
<p> 然后我就将画布W450-H200变成W225-H100，缩小画布0.5倍的像素，为了减少更多体积，我还用compressImage压缩了一遍，经过微调后，分享的图片真就清晰了好多，如果原图100%，这个能达到</p>
<p> 85%的清晰，后面尝试继续缩小，那就不行了，开始模糊起来了。</p>
<p> tip:这里虽然分享图片虽然清晰了，但如果需要展示的话，展示图片就模糊了，所以我就又生成了一张图片用于展示，是麻烦了点0.0</p>
<p><span style="color: rgba(153, 51, 0, 1)"><strong>3.canvasToTempFilePath生成的图片临时路径</strong></span></p>
<p> _doc/temp 这样的格式，不像小程序http那种临时路径,我用image组件和previewImage打开都是黑的，我以为是要转成file，发现没啥用，最后想了下以前画布生成图片的情况，那就是<span style="color: rgba(0, 204, 255, 1)">画布没画完</span>，然</p>
<p> 后赶紧去加了个延迟，完美，图片出来了。</p>
<div class="cnblogs_code">
<pre> ctx.draw(<span style="color: rgba(0, 0, 255, 1)">false</span>, (() =><span style="color: rgba(0, 0, 0, 1)"> {
setTimeout(()</span>=><span style="color: rgba(0, 0, 0, 1)">{
uni.canvasToTempFilePath({
canvasId: </span>'myCanvas'<span style="color: rgba(0, 0, 0, 1)">,
destWidth: _this.cropW</span>*_this.canvasScale*2, <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">分享图片尺寸=画布尺寸1*缩放比0.5*像素比2</span>
destHeight: _this.cropH*_this.canvasScale*2<span style="color: rgba(0, 0, 0, 1)">,
quality:</span>1<span style="color: rgba(0, 0, 0, 1)">,
fileType:</span>'jpg'<span style="color: rgba(0, 0, 0, 1)">,
success: (res) </span>=><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> console.log(res,'success')</span>
<span style="color: rgba(0, 0, 0, 1)"> uni.compressImage({
src: res.tempFilePath,
quality: </span>100<span style="color: rgba(0, 0, 0, 1)">,
success: res </span>=><span style="color: rgba(0, 0, 0, 1)"> {
const share_img</span>=<span style="color: rgba(0, 0, 0, 1)">res.tempFilePath
uni.canvasToTempFilePath({
canvasId: </span>'myCanvas'<span style="color: rgba(0, 0, 0, 1)">,
destWidth: _this.cropW</span>*2, <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">展示图片尺寸=画布尺寸1*像素比2</span>
destHeight: _this.cropH*2<span style="color: rgba(0, 0, 0, 1)">,
quality:</span>1<span style="color: rgba(0, 0, 0, 1)">,
fileType:</span>'jpg'<span style="color: rgba(0, 0, 0, 1)">,
success: (res) </span>=><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> console.log(res,'success')</span>
<span style="color: rgba(0, 0, 0, 1)"> uni.hideLoading()
const img </span>=<span style="color: rgba(0, 0, 0, 1)"> res.tempFilePath
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> _this.show = false</span>
_this.$emit('confirm'<span style="color: rgba(0, 0, 0, 1)">, {
share_img,
img
})
},
}, _this);
}
})
},
}, _this);
},</span>500<span style="color: rgba(0, 0, 0, 1)">)
})())</span></pre>
</div>
<p> </p>
<p> </p>
<p>感觉还是要记下，不然以后真的忘了。</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/dongzhi1111/p/14044739.html
頁:
[1]