時(shí)間：2023-07-22 00:15:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-07-22 00:15:01 來源：網(wǎng)站運(yùn)營
canvas 繪制證書：最近公司的新項(xiàng)目要給參與答題的同學(xué)頒發(fā)一個(gè)獎(jiǎng)狀，老大說有公司有一套比較成熟的系統(tǒng)，但不是由前端來完成。我想了一下這東西用canvas就能搞定。之后就根據(jù)自己現(xiàn)有的知識來搞了一下。先上效果圖
在線咨詢
<template> <div> <canvas id="sz" width="800" height="600"></canvas> <button id="saveBtn" type="button" @click="saveImg">保存圖片</button> </div></template>設(shè)置canvas的width和height屬性，這個(gè)屬性會決定你下載下來的圖片的尺寸。 creatDarw() { //創(chuàng)建畫板 let c1 = document.querySelector('#sz') let ctx = c1.getContext('2d') var img = new Image(); img.src = require("../assets/images/model.png") img.onload = function() { ctx.drawImage(img,0,0,800,600) ctx.font = "36px 微軟雅黑"; ctx.fillStyle = "#EC5E37"; ctx.fillText("恭喜法外狂徒 張三 獲得一等獎(jiǎng)!",160,330); } } 好了繪制好的圖片怎么讓用戶下載下來呢？這里我是利用a標(biāo)簽的download屬性來實(shí)現(xiàn)的。saveImg() { //下載保存圖片 /* let c1 = document.querySelector('#sz') let urlData = c1.toDataURL() let img = new Image() img.src = urlData; */ let downloadA = document.createElement('a'); downloadA.setAttribute('download','獎(jiǎng)狀') downloadA.href = urlData; downloadA.click() }移動(dòng)端不能通過a 標(biāo)簽下載，一般是長按圖片進(jìn)行下載。但canvas不是image不能調(diào)起圖片下載的接口，可以使用上面注釋掉的內(nèi)容在頁面中append一張圖片，把canvas畫板刪除掉，在頁面上展示一張圖片，進(jìn)行圖片的下載。關(guān)鍵詞：證書,繪制
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
