前端canvas生成海报并保存到本地,高度还原

最近发现很多小伙伴遇到一些需求就是需要前端生成一个海报,有的选择用插件比如html5canvas,

 但是这个有个缺点就是有时候生成的海报很模糊,不太好用,

接下来分享一个我用canvas生成的海报,可以参考:

1. 页面上定义一个canvas,设置宽度和高度是设计图的两倍  
<canvas id="positionShareCanvas" ref="positionShareRef" width="1760" height="2100" style="display:none"></canvas>

2. 获取canvas
const canvas = document.getElementById("positionShareCanvas");
const ctx = canvas.getContext("2d");
var img = document.createElement("img");
img.width = 880;        // 设置背景图片宽高,为设计图原始宽高就行
img.height = 1220;
img.src = "xxxxxxx";    // 设置背景图片的地址
img.onload = function () {       // 图片加载完成后
    ctx.drawImage(img, 0, 0);    // 从canvas画布的左上角开始绘制
    ctx.font = "48px Arial";     // 设置字体大小
    ctx.fillStyle = "#979797";   // 设置字体颜色
    ctx.fillText("绘制的文字", 96, 100)    //设置字体,位置在 x坐标,y坐标,这里的x ,y 坐标都是设计图尺寸的两倍,  下面就是一次类推,

    ……………………………………
    ………………

3. 接下来就是保存图片
    var eleLink = document.createElement("a");     
    eleLink.href = canvas.toDataURL(); // 转换后的图片地址
    eleLink.download = `${t('usdtcontract.position')}`;
    document.body.appendChild(eleLink);
    // 触发点击
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
}

最终实现效果

 

亲测好用………………

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值