小程序 canvas 绘制图片

这篇具有很好参考价值的文章主要介绍了小程序 canvas 绘制图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

绘制图片的问题

1、canvas不能绘制网络图片需要转换成本地图片进行使用
2、多张图片绘制需要调用 img.onload,进行嵌套绘制文章来源地址https://www.toymoban.com/news/detail-623927.html

html

<view class="overlay-box">
  <view style="margin-top: 20px;"></view>
  <scroll-view class="overlay-wrap" scroll-y="true" style="visibility:{{!canvasonload?'visible':'hidden'}}">
        <canvas id="{{canvasId}}" type="2d" class="share__canvas1" style="width: 100%; height:964rpx;"></canvas>
        <view class="savebtn" bindtap="saveiImg">
            <van-button type="danger" size='large'  round='{{true}}'> 保存</van-button>
        </view>
  </scroll-view>
</view>
    data: {
        canvasId: 'canvasID',
        canvasonload: false, //加载状态
        bg1: config.host + 'volunteer_bg.png',//背景的网络图片
        cachet1: config.host + 'cachet.png',//公章的网络图片
        title_bg1:config.host + 'volunteer_title.png',//标题的网络图片
        bg2: '',
        cachet2: '',
        title_bg2:'',
        codeImg: '',
    },
    onLoad(options) {

        // 请求小程序二维码的接口,加载完毕在执行后续操作
        my.post(my.urls.Code,true).then(res => {
            if (res.code == 200) {
                this.getCanvas([this.data.bg1, this.data.cachet1,this.data.title_bg1,res.msg], 0)
            }
        })
    },
    getCanvas(urlArr, _type) {
        let _this = this
        wx.getImageInfo({
            src: urlArr[_type],
            success: function (res) {
                //res.path是网络图片的本地地址
                if (_type === 0) {
                    _this.setData({
                        bg2: res.path,
                    })
                    _this.getCanvas(urlArr, 1)
                } else if(_type === 1){
                    _this.setData({ 
                        cachet2: res.path,
                    })
                    _this.getCanvas(urlArr, 2)
                }else if(_type === 2){
                    _this.setData({ 
                        title_bg2: res.path,
                    })
                    _this.getCanvas(urlArr, 3)
                   
                }else if(_type === 3){
                    _this.setData({
                        codeImg: res.path,
                    })
                    var query = wx.createSelectorQuery().in(_this);
                    query.select('#' + _this.data.canvasId).fields({
                        node: true,
                        size: true,
                    }).exec(_this.drawImg.bind(_this))
                }

            }
        })
    },
    // 画图
    drawImg(res) {
        const that = this
        const width = res[0].width
        const height = res[0].height
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = width * dpr
        canvas.height = height * dpr
        ctx.scale(dpr, dpr)
        // 比例 canvas / 设计搞宽度
        const proportion = width / 335
        // 绘制图片
        const img = canvas.createImage();
        const img2 = canvas.createImage();
        const img3 = canvas.createImage();
        const img4 = canvas.createImage();
        // 背景图片
        img.src = this.data.bg2
      
        img.onload = () => {
            ctx.drawImage(img, 0, 0, proportion * 341, proportion * 500)
            // 标题图片
            img2.src = that.data.title_bg2
            img2.onload = () => {
                ctx.drawImage(img2, (width/2)-50, proportion * 40, 100, 100)
                // 绘制公章图片
                img3.src = that.data.cachet2
                img3.onload = () => {
                    ctx.drawImage(img3, proportion * 194, proportion * 365, proportion*100, proportion*100)
                    // 二维码图片
                    img4.src = that.data.codeImg
                    img4.onload = () => {
                        ctx.drawImage(img4, proportion * 23, proportion * 405, proportion *60, proportion *60)
                    }
                }
            }

            
            ctx.fillStyle = "#C84141";
            ctx.font = proportion * 16 + "px  PingFang SC-Medium, PingFang SC";
            drawText(ctx, '小老弟', proportion * 30, proportion * 191, proportion * 290, proportion * 290)
            // 证书内容
            ctx.fillStyle = "#202020";
            ctx.font = proportion * 15 + "px  PingFang SC-Medium, PingFang SC";
            drawText(ctx, '感谢您抽身百忙之中,参加我们的志愿者服务活动。为表达我们由衷的敬意,也为了鼓励更多人士加入我们,特为您颁发此证书,以兹纪念,谢谢。', proportion * 30, proportion * 240, proportion * 284, proportion * 20)

            // 查看二维码
            ctx.fillStyle = "#9D9D9D";
            ctx.font = proportion * 12 + "px  PingFang SC-Medium, PingFang SC";
            drawText(ctx, '长按二维码', proportion * 88, proportion * 430, proportion * 290, proportion * 290)
            ctx.font = proportion * 12 + "px  PingFang SC-Medium, PingFang SC";
            drawText(ctx, '查看更多公益项目', proportion * 88, proportion * 450, proportion * 290, proportion * 290)

            //基金会
            ctx.fillStyle = "#1E2235";
            ctx.font = proportion * 14 + "px  PingFang SC-Medium, PingFang SC";
            drawText(ctx, '基金会',  proportion * 180, proportion * 420, proportion * 284, proportion * 20)
            
            //日期
            ctx.font = proportion * 14 + "px  PingFang SC-Medium, PingFang SC";
            drawText(ctx, '2022-12-16',  proportion * 200, proportion * 450, proportion * 280, proportion * 20)
            wx.hideLoading({
                complete: that.setData({
                    canvasonload: false
                })
            })

        }
        //文本换行 参数:1、canvas对象,2、文本 3、距离左侧的距离 4、距离顶部的距离 5、6、文本的宽度
        function drawText(ctx, str, leftWidth, initHeight, canvasWidth, titleHeight, bool) {
            var lineWidth = 0;
            var lastSubStrIndex = 0; //每次开始截取的字符串的索引
            for (let i = 0; i < str.length; i++) {
                lineWidth += ctx.measureText(str[i]).width;
                if (lineWidth > canvasWidth) {
                    ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
                    // 行高
                    initHeight += proportion * 30; //16为字体的高度
                    lineWidth = 0;
                    lastSubStrIndex = i;
                    titleHeight += proportion * 18;
                }
                if (i == str.length - 1) { //绘制剩余部分
                    ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
                }
            }
            // 标题border-bottom 线距顶部距离
            titleHeight = titleHeight + proportion * 10;
            return titleHeight
        }
        myCanvas = canvas
    },
    
    // 保存图片
    saveiImg() {
        wx.showLoading({
            title: '图片保存中...',
        })
        wx.canvasToTempFilePath({ // 将canvas生成图片
            canvas: myCanvas,
            success: (res) => {
                wx.saveImageToPhotosAlbum({ //保存图片到相册
                    filePath: res.tempFilePath,
                    success: function (res) {
                        wx.showToast({
                            icon: 'success',
                            title: "保存图片保存成功"
                        })
                    },
                    fail: (err) => {
                        if (err.errMsg) { //重新授权弹框确认
                            wx.showModal({
                                title: '提示',
                                content: '您好,请先授权,在保存此图片。',
                                showCancel: false,
                                success(res) {
                                    if (res.confirm) { //重新授权弹框用户点击了确定
                                        wx.openSetting({ //进入小程序授权设置页面
                                            success(settingdata) {
                                                if (settingdata.authSetting['scope.writePhotosAlbum']) { //用户打开了保存图片授权开关
                                                    wx.saveImageToPhotosAlbum({
                                                        filePath: respath,
                                                        success: function (data) {
                                                            wx.showToast({
                                                                title: '保存成功',
                                                                icon: 'success',
                                                                duration: 2000
                                                            })
                                                        },
                                                    })
                                                } else { //用户未打开保存图片到相册的授权开关
                                                    wx.showModal({
                                                        title: '温馨提示',
                                                        content: '授权失败,请稍后重新获取',
                                                        showCancel: false,
                                                    })
                                                }
                                            }
                                        })
                                    }
                                }
                            })
                        }
                        wx.showToast({
                            icon: 'error',
                            title: "保存图片保存失败"
                        })
                    }
                })
            },
            fail: (err) => {
                console.log(err);
            },
            complete: () => {
                wx.hideLoading()
            }
        })
    },

到了这里,关于小程序 canvas 绘制图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 新版canvas绘制图片方法

    截至2022.12.23 修改日 微信小程序开发文档介绍不全,导致很多用户绘制图片不显示或失败,因此写下截至目前的可行方案 如果新手不熟悉canvas,先看下小程序官方文档 可运行案例: wxml: js:

    2024年02月12日
    浏览(47)
  • 微信小程序canvas画布绘制base64图片并保存图片到相册中

    WXML部分: 样式可以根据自己需求自行调整 canvas绘制成图片部分: 这就将图片绘制出来了。 首先获取用户相册权限。 保存功能:

    2024年02月13日
    浏览(44)
  • uni-app,关于 canvas 在 app,小程序, h5中,实现绘制,保存本地图片

    没有套路,没有难读的文档,直接看代码 html部分 js部分

    2024年02月13日
    浏览(63)
  • canvas 绘制图片 - ctx.drawImage()

    canvas的左上角位置为 (0, 0) ctx.drawImage(图片对象, x位置, y位置) 图片的原始比例,图片的左上角在画布的(x, y) ctx.drawImage(图片对象, x位置, y位置, 宽度, 高度) 图片的左上角在画布的(x, y),指定图片的宽高 ctx.drawImage(图片对象, 图像裁剪的x位置, 图像裁剪的y位置, 裁剪的宽度, 裁剪

    2024年02月10日
    浏览(31)
  • Flutter 绘制番外 | 将你的 Canvas 绘制保存为图片

    前言 光阴似箭,《Flutter 绘制指南 - 妙笔生花》 转眼间已经发布两年半了,不知道各位练习得怎么样。有不少朋友问过如何将 Canvas 绘制的内容保存为图片,最近在做的东西刚好涉及了这块,通过本文来分享一下。 提到保存图片,很多人可能会想到 RepaintBoundary , 但它使用起

    2024年02月05日
    浏览(43)
  • HTML5 Canvas与JavaScript携手绘制动态星空背景

    目录 一、程序代码 二、代码原理 三、运行效果 这段代码通过 HTML5 的 canvas 元素和 JavaScript 实现了一个星空背景效果。首先,它在页面加载时创建了一个全屏大小的画布,并使用 JavaScript 生成了多个具有不同运动轨道的星星对象。每颗星星都具有随机的半径、位置、运动速度

    2024年02月20日
    浏览(53)
  • canvas绘制图片的三种方法(图文示例)

    查看专栏目录 canvas示例教程100+专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重要的帮助。 如何使用canvas来绘制图片呢?这里有三种方法。 d

    2024年01月16日
    浏览(53)
  • uni-app实现canvas绘制图片、海报等

    前段时间有个项目,需要绘制海报,我一听这不是可以用canvas来实现吗,所以我在五一假期就记录下实现方式 我把canvas绘制图片封装成一个组件,直接引入使用就好了。 这里虽然是uni-app写的,但实现方式其实都是一样的,之后其他原生小程序用到也是大差不大的,真的很简

    2024年02月09日
    浏览(70)
  • vue - vue中使用canvas进行前端图片合并

    如何合成一个二维码和背景图片:其实就是多次调用canvas的 drawImage 方法进行不同坐标的图像;但是因为涉及到微信长按分享图片或保存到本地,所以不能直接使用canvas来放置图片(因为微信中长按识别不出来),只能使用 img 标签来引入canvas合成的base64路径。 Canvas API 提供了

    2024年02月02日
    浏览(42)
  • Android优化RecyclerView图片展示:Glide成堆加载批量Bitmap在RecyclerView成片绘制Canvas,Kotlin(b)

    对 Android GridLayoutManager Glide批量加载Bitmap绘制Canvas画在RecyclerView,Kotlin(a)-CSDN博客 改进,用Glide批量把Bitmap加载出来,然后在RecyclerView成片成堆的绘制Canvas,此种实现是RecyclerView加载多宫格图片展示,卡顿丢帧最低的一种实现,上下滑动流畅。 Android GridLayoutManager Glide批量

    2024年04月25日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包