uniapp,圖片添加文字下載操作

initImg() {
                let that = this
                uni.getImageInfo({
                    src: "/static/img/certificate.png",//背景圖路徑,本地圖片
                    success(res) {
                        console.log(res.path)
                        var ctx = uni.createCanvasContext("firstCanvas") // 使用畫布創(chuàng)建上下文 圖片
                        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); //文字內(nèi)容、x坐標,y坐標
                        ctx.setFontSize(8) //設置字體大小,默認10
                        ctx.fillText('2022-08-26').format("YYYY"), 190, 351.7); //文字內(nèi)容、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, "http://")

    // 保存本地
    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);
},

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容