当前位置:   article > 正文

uniapp 分享微信及分享到朋友圈(方法2中),分享海报(原生 app),及uni-app 中使用 html2canvas 生成图片_uniapp h5生成图片分享

uniapp h5生成图片分享

1.方法一 微信转发及分享到朋友圈

参考链接
在这里插入图片描述

2.方法二 微信转发及分享到朋友圈

shareUrl(this.id).then(response => { // 获取二维码跳转地址
                    switch (e.item.name) {
                        case 'wxchum': // 重点是这里
                            uni.share({
                                provider: 'weixin',
                                scene: 'WXSceneSession',
                                type: 0,
                                href: response.share_url,
                                title: this.goods.name,
                                summary: this.goods.description,
                                imageUrl: this.goods.pictures[0],
                                fail(err) {
                                    uni.showToast({
                                        title: err.errMsg,
                                        icon: 'none'
                                    })
                                }
                            })

                            break;
                        case 'wxcircle':
                            uni.share({
                                provider: 'weixin',
                                scene: 'WXSceneTimeline',
                                type: 0,
                                href: response.share_url,
                                summary: this.goods.description,
                                imageUrl: this.goods.pictures[0],
                                fail(err) {
                                    uni.showToast({
                                        title: err.errMsg,
                                        icon: 'none'
                                    })
                                }
                            })
                            break;
                        case 'download':
                            this.canSave = true
                            uni.showLoading({
                                title: '保存中'
                            })
                            this.down()
                            break;
                    }
                }).catch(err => {
                    return
                })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

3.生成海报-方法一(app原生截屏)

 down() {
                setTimeout(() => {
                    let pages = getCurrentPages();
                    let page = pages[pages.length - 1];
                    let ws = page.$getAppWebview();
                    let bitmap = new plus.nativeObj.Bitmap('drawScreen');
                    // 将webview内容绘制到Bitmap对象中  
                    ws.draw(bitmap, () => {
                        // 保存图片到本地  
                        bitmap.save("_doc/drawScreen.jpg", {
                            overwrite: true
                        }, res => {
                            uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
                                filePath: res.target, //图片文件路径
                                success: () => {
                                    this.canSave = false;
                                    uni.showToast({
                                        title: '保存图片成功,赶紧去转发给好友吧~',
                                        icon: 'none'
                                    })
                                },
                                fail: function(e) {
                                    uni.showModal({
                                        title: '温馨提示',
                                        content: '保存图片失败,重新再试试~',
                                        showCancel: false,
                                        confirmColor: "#34CE98",
                                        confirmText: '知道了',
                                        success: () => {
                                            this.canSave = false;
                                        }
                                    })
                                    uni.hideLoading()
                                }
                            });

                            bitmap.clear(); // 清除Bitmap对象  
                        }, error => {
                            uni.showModal({
                                title: '温馨提示',
                                content: '保存图片失败,重新再试试~',
                                showCancel: false,
                                confirmColor: "#34CE98",
                                confirmText: '知道了',
                                success: () => {
                                    this.canSave = false;
                                }
                            })
                            uni.hideLoading()
                            bitmap.clear(); // 清除Bitmap对象  
                        });
                        // bitmap.clear(); // 清除Bitmap对象  
                    }, error => {
                        uni.showModal({
                            title: '温馨提示',
                            content: '保存图片失败,重新再试试~',
                            showCancel: false,
                            confirmColor: "#34CE98",
                            confirmText: '知道了',
                            success: () => {
                                this.canSave = false;
                            }
                        })
                        uni.hideLoading()
                    }, {
                        check: true, // 设置为检测白屏  
                    });
                }, 2000)
            },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69

4.uni-app 中使用 html2canvas 生成图片

在使用uni-app 开发的过程中有没有遇到 无法使用html2canvas生成图片的问题呢?那么通过这篇文章,我们来记录下如何在uniapp生成画布图片的。
首先需要在你的uni-app项目中安装 html2canvas 插件

npm install html2canvas -D
  • 1

或者

yarn add html2canvas -D
  • 1

在需要生成图片的页面中引入 html2canvas 插件
不过此时需要在 页面中新建一个 script 节点,将 lang 属性设置为renderjs,代码如下:

<script>
export default {
  data() {
    return {};
  }
};
</script>

// 在这里新增一个 script 节点 用于在页面中使用dom
<script lang="renderjs" module="canvasImage">
import html2canvas from 'html2canvas'
export default {
}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/639660
推荐阅读