收藏
回答

分享截屏能否从页面最底端开始截屏

问题模块
API和组件

分享截屏能否从页面最底端开始截屏

最后一次编辑于  2017-10-26  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

14 个回答

  • 嗯
    2017-10-26

    实在不行你就画图吧 哈哈哈哈

    2017-10-26
    赞同
    回复
  • 已无风雨已无晴
    已无风雨已无晴
    2017-10-26

    还是要谢谢你, 我再看一下,因为我们是问答页面分享,用户可能问很多问题,他要分享出去,最好是能截屏到他最近问的问题,这样用户体验会好一点。

    2017-10-26
    赞同
    回复
  • 嗯
    2017-10-26

    我一般都是跟设计沟通过的,告诉他分享时候截屏原则,他在设计的时候,一般不会出现对应的问题

    其实 上面那个我也没在线上时候,

    我的想法是 , 既然是截取最下面那部分,

    那在截取之前,把上面那部分 wx:if 调,或者 style="{{ topShow ? '' : 'height: 0;'}}"

    可能出现问题所在,在于 setData({})是异步,return 的navtive 比他快

    不好意思,给你回答了一个未经过认真验证的答案,(我在自己手机上试了一遍OK就。。)


    2017-10-26
    赞同
    回复
  • 已无风雨已无晴
    已无风雨已无晴
    2017-10-26

    谢谢你。

    画图的我参照你的代码研究一下。


    上面那个转发截屏的代码好像不是很正确,

    let that = this;

    that.setData({

    topShow: false

    })


    return

    complete() {

    that.setData({

    topShow: true

    })

    }

    好像这样不生效还是原来那样子,安卓是从当前可视窗口80%截屏,iOS是内容最上面80%截屏。



    2017-10-26
    赞同
    回复
  • 嗯
    2017-10-26

    wx.createSelectorQuery().selectAll('.canvas-draw')

    // 画图

            function imageDraw(nodeInfo) {


                ctx.drawImage(nodeInfo.dataset.content, nodeInfo.left, nodeInfo.top, nodeInfo.width, nodeInfo.height)

                drawedCount++


                console.log('image', nodeInfo.left, nodeInfo.top, nodeInfo.width, nodeInfo.height)

                if (drawedCount === nodeLength) {

                    setTimeout(() => {

                        console.log('截止')

                        doneAll()

                    },0)   

                }

            }


            // 划线

            function lineDraw(nodeInfo) {


                ctx.rect(nodeInfo.left, nodeInfo.top, nodeInfo.width, 1)

                ctx.setFillStyle(nodeInfo.dataset.color)

                ctx.fill()

                console.log('line', nodeInfo.left, nodeInfo.top, nodeInfo.width, 1)

                drawedCount++


                if (drawedCount === nodeLength) {

                    setTimeout(() => {

                        console.log('截止')

                        doneAll()

                    }, 0)

                }


            }


            // 写字

            function fontDraw(nodeInfo) {


                let fontSize = Math.floor(Number(nodeInfo.dataset.size) * scaleVal)

                let fontColor = nodeInfo.dataset.color || '#475669'


                ctx.setFontSize(fontSize)

                ctx.setFillStyle(fontColor)

                ctx.setTextAlign('center')

                ctx.setTextBaseline('top')


                // 处理换行 依据是高度大于两倍字体

                let lineCount = Math.floor(nodeInfo.height / fontSize)


                if (lineCount === 1) {

                    

                    ctx.fillText(nodeInfo.dataset.content, that.data.contentWidth / 2, nodeInfo.top)

                    // 如果要加粗

                    if (nodeInfo.dataset.weight) {

                        ctx.fillText(nodeInfo.dataset.content, that.data.contentWidth / 2 + .2, nodeInfo.top + .2)

                        ctx.fillText(nodeInfo.dataset.content, that.data.contentWidth / 2 - .2, nodeInfo.top - .2)

                    }

                } else {


                    let contentWord = nodeInfo.dataset.content

                    let lineNum = Math.floor(contentWord.length / lineCount)

                    

                    for (let i = 0; i < lineCount; i++) {

                        

                        let tempWord = i === lineCount - 1 ? contentWord.substr(i * lineNum) : contentWord.substr(i * lineNum, lineNum)

                        let tempTop = nodeInfo.top + ((fontSize + 5) * i)


                        ctx.fillText(tempWord, that.data.contentWidth / 2, tempTop)

                        

                        // 如果要加粗

                        if (nodeInfo.dataset.weight) {

                            ctx.fillText(tempWord, that.data.contentWidth / 2 + .2, tempTop + .2)

                            ctx.fillText(tempWord, that.data.contentWidth / 2 - .2, tempTop - .2)

                        }

                        

                    }

                }

                console.log('font', nodeInfo.top)

                drawedCount++


                if (drawedCount === nodeLength) {

                    setTimeout(() => {

                        console.log('截止')

                        doneAll()

                    }, 0)

                }

            }


    2017-10-26
    赞同
    回复
  • 已无风雨已无晴
    已无风雨已无晴
    2017-10-26

    非常感谢你!

    topShow: true这样设置安卓测试时从可视窗口的百分之八十截屏,已经基本解决了这个问题,有没有参数从底部开始截屏呢?

    或者你能否简单讲一下小程序wxml按按钮转化为图片保存的大概思路,我也可以提前研究下,后面看你github会更容易懂一些

    2017-10-26
    赞同
    回复
  • 嗯
    2017-10-26

    写错了 写错了   ,

    topShow: false

    complete(){

        topShow: true

    }

    不好意思,

    2,canvas保存图片的话,我尽量这周造好,放github上,好了我再回复你一下地址

    2017-10-26
    赞同
    回复
  • 已无风雨已无晴
    已无风雨已无晴
    2017-10-26

    请问下设置topShow: true是什么意思呢?

    2017-10-26
    赞同
    回复
  • 嗯
    2017-10-26

    哈哈哈哈 限制回复图片了,

    一张图片说我 超过20000字了  6666

    那就算了,我去写轮子了

    2017-10-26
    赞同
    回复
  • 嗯
    2017-10-26


    这里是 wxml  其他的style、needWhitefont、inviteSkin 是我设置切换多种皮肤用的


    主要就是   data-xx传递主要信息

    canvas-draw 方便我处理我想要画的

    2017-10-26
    赞同
    回复

正在加载...