uniapp中WebView中可以按住图片实现图片保存到相册吗？

BoredApe - 有问题就会有答案。

写了个Demo 可以参考

有用请在右下方点赞哦

downloadWebviewImgDemo.zip

不老刘

亲测可用，非常感谢！

2022-01-27 08:06
BoredApe

回复不老刘: 点个赞谢谢

2022-01-27 08:49
w***@163.com

我嵌套的是聊天页面但是保存不了图片，返回的是base64位的

2022-03-09 15:09
BoredApe

回复 w***@163.com: 原理都是一样的。

2022-03-09 15:15
w***@163.com

回复 BoredApe: 谢谢，解决了

2022-03-09 15:40
尅下

回复 w***@163.com: 那个base64的保存图片怎么解决的呀

2022-05-12 10:38
大前端小王子

大兄弟，demo下载下来不能实现

2022-07-01 17:11
大前端小王子

一加载就满堂红

2022-07-01 17:13
大前端小王子

17:13:16.717 App Launch at App.vue:4

17:13:16.747 App Show at App.vue:7

17:13:16.965 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

17:13:17.025 (found at pages/index/index.vue:1)

17:13:17.748 20964674 at https://q.plusx.cn/wechat/live_d/dist/static/js/app.b60ae7ee1a0114f3006a.js:1

17:13:18.773 A cookie associated with a cross-site resource at http://hm.baidu.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032. at https://live.photoplus.cn/live/20964674?nw=live#/:0

17:13:19.115 10 at https://q.plusx.cn/wechat/live_m/live_common/dist/js/app.109ea975.js:1

17:13:19.147 10 at https://q.plusx.cn/wechat/live_m/live_common/dist/js/app.109ea975.js:1

17:13:19.178 TypeError: Cannot read property 'appendChild' of null at https://q.plusx.cn/wechat/live_m/live_common/dist/js/chunk-vendors.25d7ea94.js:7

17:13:19.521 Uncaught (in promise) #<Object> at https://live.photoplus.cn/live/20964674?nw=live#/live:0

17:13:19.553 Access to XMLHttpRequest at 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe89488e21d961fe0&redirect_uri=https%3A%2F%2Flive.photoplus.cn%2Fredpackrain%2Ficon%3F_s%3Dd5c6d6f72949378b487bc43e82bb3cb6%26_t%3D1656666799099%26activityNo%3D20964674&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect=' (redirected from 'https://live.photoplus.cn/redpackrain/icon?activityNo=20964674&_s=d5c6d6f72949378b487bc43e82bb3cb6&_t=1656666799099') from origin 'https://live.photoplus.cn' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. at https://live.photoplus.cn/live/20964674?nw=live#/live:0

17:13:19.582 %c [ error ]-36 font-size:13px; background:pink; color:#bf2c9f; Error: Network Error at https://q.plusx.cn/wechat/live_m/live_common/dist/js/app.109ea975.js:1

17:13:19.617 Access to XMLHttpRequest at 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe89488e21d961fe0&redirect_uri=https%3A%2F%2Flive.photoplus.cn%2Fhome%2Factivity%2Flike%3F_s%3D5cd87970553e1bcb8c45360d399a645d%26_t%3D1656666799101%26activityNo%3D20964674%26type%3D0&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect=' (redirected from 'https://live.photoplus.cn/home/activity/like?activityNo=20964674&type=0&_s=5cd87970553e1bcb8c45360d399a645d&_t=1656666799101') from origin 'https://live.photoplus.cn' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. at https://live.photoplus.cn/live/20964674?nw=live#/live:0

17:13:19.644 %c [ error ]-36 font-size:13px; background:pink; color:#bf2c9f; Error: Network Error at https://q.plusx.cn/wechat/live_m/live_common/dist/js/app.109ea975.js:1

17:13:19.677 点赞错误 TypeError: Cannot read property 'data' of undefined at https://q.plusx.cn/wechat/live_m/live_common/dist/js/app.109ea975.js:1

17:13:19.709 Uncaught (in promise) Error: Network Error at https://q.plusx.cn/wechat/live_m/live_common/dist/js/chunk-vendors.25d7ea94.js:7

17:13:19.742 Uncaught (in promise) TypeError: Cannot read property 'data' of undefined at https://q.plusx.cn/wechat/live_m/live_common/dist/js/app.109ea975.js:1

17:13:19.776 Uncaught (in promise) Error: Network Error at https://q.plusx.cn/wechat/live_m/live_common/dist/js/chunk-vendors.25d7ea94.js:7

17:13:19.960 Access to XMLHttpRequest at 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe89488e21d961fe0&redirect_uri=https%3A%2F%2Flive.photoplus.cn%2Fform%2Fget%3F_s%3D66e83e4c7453b343bfdd38d1ee5920b3%26_t%3D1656666799784%26relateNo%3D20964674%26type%3D2&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect=' (redirected from 'https://live.photoplus.cn/form/get?relateNo=20964674&type=2&_s=66e83e4c7453b343bfdd38d1ee5920b3&_t=1656666799784') from origin 'https://live.photoplus.cn' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. at https://live.photoplus.cn/live/20964674?nw=live#/live:0

17:13:19.993 %c [ error ]-36 font-size:13px; background:pink; color:#bf2c9f; Error: Network Error at https://q.plusx.cn/wechat/live_m/live_common/dist/js/app.109ea975.js:1

17:13:20.025 request fail TypeError: Cannot read property 'data' of undefined at https://q.plusx.cn/wechat/live_m/live_common/dist/js/app.109ea975.js:1

17:13:20.057 Uncaught (in promise) Error: Network Error at https://q.plusx.cn/wechat/live_m/live_common/dist/js/chunk-vendors.25d7ea94.js:7

17:13:20.239 Uncaught TypeError: Cannot read property 'getElementsByClassName' of null at https://q.plusx.cn/wechat/live_m/live_common/dist/js/app.109ea975.js:1

17:13:20.428 Uncaught TypeError: Cannot read property 'getElementsByClassName' of null at https://q.plusx.cn/wechat/live_m/live_common/dist/js/app.109ea975.js:1

17:13:49.378 Uncaught (in promise) #<Object> at https://live.photoplus.cn/live/20964674?nw=live#/live:0

2022-07-01 17:13
大前端小王子

回复 BoredApe: https://live.photoplus.cn/live/pc/20964674/#/live 用你链接可以用我链接不行，大佬能帮忙看看吗

2022-07-01 17:25
BoredApe

回复 8***@qq.com: 新开一个帖子。点赞关注邀请我回答

2022-07-01 17:27
大前端小王子

回复 BoredApe: 你好，我新开贴子了，也用过你这个demo。然后你在帖子回复我来这个链接看哦

2022-07-07 09:36

1***@qq.com

demo压缩包 app退出应用键失灵了

mrTwelve

是的我也遇到这个问题了请问你解决了么

2022-10-05 16:46
1***@qq.com

mui.init({

gestureConfig: {

longtap: true

},

keyEventBind: {

backbutton: false

}

});

这样配置，关闭返回键监听就没问题了

2022-11-29 12:10

8***@qq.com

别沉，顶一下，遇到一样的问题了

choin

图片不支持longtouch？

8***@qq.com

场景如下：在uni制作的APP里嵌入webview，webview里调用的是uni制作的h5页面，目前在app的webview里长按图片无任何效果，在浏览器有

choin

浏览器都是自己代码实现的，这回明白了吗？在webview自己去实现，然后发送消息到app端，app端接收消息实现保存等等功能

2021-01-24 16:48
8***@qq.com

回复 choin: 是的，现在在实现webview与APP之间的通信，但是尝试了几种方法都不太行，大佬有没有什么方案

2021-01-25 14:05

不老刘

function saveImg(url){  
    var oA = document.createElement("a");  
    oA.download = '';// 设置下载的文件名，默认是'下载'  
    oA.href = url;  
    document.body.appendChild(oA);  
    oA.click();  
    oA.remove(); // 下载之后把创建的元素删除  
    }

iOS下，这样可以实现图片预览的效果，但图片还是没法直接保存下来

BoredApe - 有问题就会有答案。

之前写过一个demo，可以参考一下。主要是向webview注入一个js 通过这个js操作下载图片.

// index.vue  
<script>  
export default {  
    onLoad() {  
        // #ifdef APP-PLUS  
        const wv = plus.webview.create("","custom-webview",{});  
        wv.loadURL("http://www.news.cn/photo/index.htm");  

        var currentWebview = this.$scope.$getAppWebview();  
        currentWebview.append(wv);  

        setTimeout(function(){  
            wv.appendJsFile('_www/static/script.js')  
        },1000)  
        wv.appendJsFile('_www/static/mui.min.js')  
        // #endif   
    }  
};  
</script>

// static/script.js  

mui.init({  
    gestureConfig: {  
        longtap: true, //默认为false  
    }  
});  
document.addEventListener('longtap', function(e) {  
    if (e.target.tagName == "IMG") {  
        mui.plusReady(function() {  
            mui.confirm('是否下載此圖片', '確認下載框', '下載', function(d) {  
                if(d.index==0){  
                var down = plus.downloader.createDownload(e.target.src, {}, function(e, a) {  
                    console.log();  
                    plus.gallery.save(e.filename,function (e) {  
                    mui.toast('下载成功,請查看系统相册')  
                    console.log("下载成功,請查看系统相册");  
                    },function (e) {  
                        console.log("下载失败,請重试");  
                    })  
                })  
                down.start()  
                }  
            })  
        })  

    }  
})