美文网首页
uniapp,图片添加文字下载操作

uniapp,图片添加文字下载操作

作者: aE_0ff7 | 来源:发表于2022-08-25 13:58 被阅读0次
    initImg() {
                    let that = this
                    uni.getImageInfo({
                        src: "/static/img/certificate.png",//背景图路径,本地图片
                        success(res) {
                            console.log(res.path)
                            var ctx = uni.createCanvasContext("firstCanvas") // 使用画布创建上下文 图片
                            ctx.drawImage(res.path, 0, 0, 300,
                                423) // 设置图片坐标及大小,括号里面的分别是(图片路径,x坐标,y坐标,width,height)
                            ctx.setFontSize(12) //设置字体大小,默认10
    
                            ctx.setFillStyle(that.jin) //文字颜色:默认黑色
                            ctx.setTextAlign('center')//文本水平居中
                            ctx.fillText('名字', 68, 170); //文字内容、x坐标,y坐标
                            ctx.setFontSize(8) //设置字体大小,默认10
                            ctx.fillText('2022-08-26').format("YYYY"), 190, 351.7); //文字内容、x坐标,y坐标
                            ctx.save(); //保存
                            ctx.draw() //绘制
                        }
                    })
                },
    

    点击下载
    downloadCentificate() {
    let that = this
    uni.canvasToTempFilePath({

        destWidth: 300,
        destHeight: 423,
        canvasId: 'firstCanvas',
        success: function(res) {
        // 在H5平台下,tempFilePath 为 base64
        console.log(res.tempFilePath, "//")
    
        // 保存本地
        that.savePicture(res.tempFilePath)
    
            }
        })
    

    },

    savePicture(base64) {
    var arr = base64.split(',');
    var bytes = atob(arr[1]);
    let ab = new ArrayBuffer(bytes.length);
    let ia = new Uint8Array(ab);
    for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
    }
    var blob = new Blob([ab], { type: 'application/octet-stream' });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = '下载名字' + ".png";
    var e = document.createEvent('MouseEvents');
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    a.dispatchEvent(e);
    URL.revokeObjectURL(url);
    },

    相关文章

      网友评论

          本文标题:uniapp,图片添加文字下载操作

          本文链接:https://www.haomeiwen.com/subject/twytnrtx.html