---

在uniapp中選擇圖片

注意這里的代碼是拍照的，拍照uniapp返回的路徑是 _doc/uniapp_temp_1678758693371/camera/1678758699703.jpg 這種格式的路徑，無法直接使用 img 標(biāo)簽展示，但是如果不用img標(biāo)簽展示，使用image，生成出來的圖片會非常的模糊，因?yàn)閕mage他打包后是被當(dāng)做 背景圖片渲染的，而不是當(dāng)做圖片

uni.chooseImage({count:1,sourceType:['camera'],success:res => {// 獲取到臨時路徑let path = res.tempFilePaths[0]// 轉(zhuǎn)成base64，因?yàn)閕mg不能使用那種路徑，無法渲染plus.io.resolveLocalFileSystemURL(path, function(entry) {//參數(shù)path:圖片相對路徑entry.file(function(file) {var fileReader = new plus.io.FileReader()fileReader.readAsDataURL(file)fileReader.onloadend = function(evt) {_that.sBasePost = evt.target.result}})})} })

頁面的demo結(jié)構(gòu)

<view id="posterHtml"><text>用戶地址信息</text><img :src="sBasePost" alt="" @load="canvas.createPoster"/> </view>

html2canvas是無法直接在app中使用的，但是uniapp提供了renderjs,所以我們還是能在uniapp中使用html2canvas的

<script module="canvas" lang="renderjs">import html2canvas from "html2canvas"; export default {data(){return {}},methods: {createPoster(event, ownerInstance) {// 生成海報 setTimeout(() => {const domObj = document.getElementById("posterHtml");html2canvas(domObj, {useCORS: true,logging: false,proxy: "", // 如果是網(wǎng)絡(luò)圖片，那就需要配置代理 allowTaint:true, }).then(function (canvas) { var posterImg = canvas.toDataURL("image/png",0.7);ownerInstance.callMethod('posterOver', { posterImg: posterImg})}).catch(err => {console.log(err)})},200)},},} </script>

html2canvas中文文檔

生成完成會觸發(fā)到頁面中的 posterOver ，因?yàn)樵?renderjs中拋出來了

posterOver(option){//這里就接收到了圖片的路徑,posterImg 就是圖片的base64，可以直接用來渲染頁面this.posterImg = option.posterImg }

總結(jié)

以上是生活随笔為你收集整理的app拍照添加水印 （uniapp）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。