lihai
lihai
  • 发布:2020-10-22 09:03
  • 更新:2024-02-28 11:30
  • 阅读:4237

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

分类:uni-app

webview嵌套中可以按住图片实现图片保存到相册吗?

2020-10-22 09:03 负责人:无 分享
已邀请:
BoredApe

BoredApe - 有问题就会有答案。

写了个Demo 可以参考

有用请在右下方点赞哦

  • 不老刘

    亲测可用,非常感谢!

    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

BoredApe

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()  
                }  
            })  
        })  

    }  
})
1***@qq.com

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

8***@qq.com

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

choin

choin

图片不支持longtouch?

8***@qq.com

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下,这样可以实现图片预览的效果,但图片还是没法直接保存下来

9***@qq.com

9***@qq.com - hyr

哈哈哈,完美的解决了问题!Uniapp帮全体成员向大佬致敬

2***@qq.com

2***@qq.com

请问我安装demol跑,报错了
error
11:26:48.143 请求的页面无法打开:http://www.news.cn/photo/index.html at file:///android_asset/data/dcloud_error.html:41

大佬什么原因呢

  • BoredApe

    换个有图片的网站再试试。

    2024-02-28 13:34

要回复问题请先登录注册