H5 頁面 移動端實現長按保存圖片以及圖片顯示異常問題

uniapp 中的 一些小坑：

h5 頁面 image 標簽中的 src 屬性不支持 寫 @ ，將image 標簽修改為 img標簽即可。

uniapp 寫 h5 頁面 ， image 標簽 在 ios 端 不支持 長按 保存圖片，使用canvas 標簽包裹img標簽，然后將 image 標簽更換為 img 標簽，添加-webkit-touch-callout: default 即可，如下所示：

<view class="linkreceive"><canvas style="width: 100%;height:100%;" canvas-id="code"><!-- @longtap="bc_code" --><img src="@/static/evaluationResult/getWXAUnlimitCode.jpg" class="linkimage" mode="widthFix" /></canvas></view>

css 部分：

.linkimage {display: block;width: 100%;height: 100%;-webkit-touch-callout: default; // 要配置這行關鍵代碼，不然可能不生效}

照這樣設置即可（只是測試了部分機型–目前測試的 ios 都支持）。

uniapp 項目中 引入大型圖片，圖片顯示異常問題 。解決辦法：方式一：豎屏狀態下 在 image 標簽上面設置 mode="widthFix" ，橫屏狀態下 設置 mode="heightFix"，可能還要針對上面設置的兩個屬性，添加對應的高度即可。
方式二：就是不要使用image標簽，使用img標簽（未測試），如果使用這種方式，就不需要額外設置高度了，圖片會自行撐起來。

總結

以上是生活随笔為你收集整理的uniapp h5 页面 解决 ios 长按无法保存图片问题（安卓支持此功能）--实现移动端长按保存图片的全部內容，希望文章能夠幫你解決所遇到的問題。

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