---

在uniapp中選擇圖片

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

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

頁面的demo結構

<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: "", // 如果是網絡圖片，那就需要配置代理 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中文文檔

生成完成會觸發到頁面中的 posterOver ，因為在 renderjs中拋出來了

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。