canvas生成海报

最新推荐文章于 2024-02-20 10:31:47 发布

嗨哆嚒

最新推荐文章于 2024-02-20 10:31:47 发布

阅读量571

点赞数 1

文章标签： js canvas

本文链接：https://blog.csdn.net/cbxugong/article/details/108748249

版权

需求：

提供一个模板图片，商家输入自己的店铺名，即可生成一张海报。

实现：

使用canvas 画出模板，获取 input 框的内容，再将其添加到指定位置，下载保存。

代码如下：

结构

    <body>

    <input type="text" id="merchants" placeholder="请输入店铺名(不要太长哦)">
    <button id="generate">点击生成海报</button>
    <button id="save">保存海报</button>
    <canvas id="myCanvas" width="750" height="1000">您的浏览器不支持 HTML5 canvas 标签。</canvas>

</body>

样式

    <style>
        #merchants{
            width: 300px;
            height: 30px;
            border: 1px solid #ff9191;
            position:absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
        }

        #generate,#save{
            position: absolute;
            top: 70px;
            left: 50%;
            transform: translateX(-50%);
            height: 40px;
            width: 120px;
            border-radius: 16px;
            background: #ff6868;
        }

        #save{
            transform: translateX(50%);
        }

        #myCanvas{
            position: absolute;
            top: 110px;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>

js功能

获取元素

 ```
 let myCanvas = document.getElementById('myCanvas');
 let merchants = document.querySelector('#merchants');
 let generate = document.querySelector('#generate');
 let save = document.querySelector('#save')
 ```

创建画布

```
let ctx = myCanvas.getContext("2d");
myCanvas.style.letterSpacing = '2px';//字体字间距
ctx.font = "bold 30px STHeiti";//字体样式
ctx.textAlign = 'center';//字体轴线位置
ctx.fillStyle = "#dc4449";//填充（字体）颜色
```

加载模板图片

```

let myImg = new Image();//图片，也可以使用img标签，通过获取el
myImg.setAttribute('crossOrigin', 'anonymous');//在线图片必须，处理跨域
myImg.src = '';//图片地址
myImg.onload = function () {//必须在图片加载完成后再调用
    ctx.drawImage(myImg, 0, 10);
}
```

添加文字

generate.addEventListener('click', () => {
    let isR = isRight();//文字内容验证函数
    if (isR) {
        ctx.clearRect(0, 0, 750, 1000);//清除画布
        ctx.drawImage(myImg, 0, 10);//重新加载模板，这两个步骤目的是清除之前画的内容
        let str = merchants.value;//输入的内容
        ctx.fillText(str, 375, 460);//填入文字。第一个个参数为 内容，第二个为轴线位置，第三个为y周位置，表现为水平居中
    }

})

保存并下载

```
//保存为图片，设置保存格式
function saveImg(){
    let img_png_src = myCanvas.toDataURL("image/jpeg",1.0);//保存图片格式和质量，0~1,1最大，超过默认为 0.92
    let imgData = img_png_src.replace('jpeg','image/octet-stream');
    let fileName = merchants.value + '.' + 'jpg'; //下载图片的文件名
    // console.log(fileName)
    saveFile(imgData,fileName);//调用保存函数
}

//下载
function saveFile(data,fileName){
    let save_link = document.createElement('a');
    save_link.href = data;
    save_link.download = fileName;
    let event = document.createEvent('MouseEvents');
    event.initEvent("click", true, false);
    save_link.dispatchEvent(event);
}

//保存函数调用
save.addEventListener('click',()=>{
    saveImg()
})

```

还存在的问题：

部分浏览器不支持，表现为下载文件为乱码或者文件大小为 0k，下载失败。

嗨哆嚒

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas生成海报

需求：提供一个模板图片，商家输入自己的店铺名，即可生成一张海报。实现：使用canvas 画出模板，获取 input 框的内容，再将其添加到指定位置，下载保存。代码如下：结构 <body> <input type="text" id="merchants" placeholder="请输入店铺名(不要太长哦)"> <button id="generate">点击生成海报</button> <button
复制链接

扫一扫