文字转图片@图片加水印(JS版)

最新推荐文章于 2024-05-16 09:14:17 发布

cc百川

最新推荐文章于 2024-05-16 09:14:17 发布

阅读量1.1k

点赞数

分类专栏： web前端文章标签：前端文字转图片 js文字转图片图片添加水印 canvas画图 js图片添加水印

本文链接：https://blog.csdn.net/ljcc122/article/details/113268984

版权

文字转图片@图片添加水印——之js版本

最终效果
文字转图片
图片添加水印
相关点
说明

最终效果

在这里插入图片描述
可直接获取代码：链接：https://pan.baidu.com/s/1zc–FohBx0-n0VHqRo24QQ 提取码：92d9
本案例涉及到在线实时编译运行html（v2）的相关内容，请移步查看。

文字转图片

利用cancvs把文字写在画布上，然后画布转图片即可。图片、网页内容保持到本地见：在线实时编译运行html（v2）

在这里插入图片描述

/**
* js使用canvas将文字转换成图像数据base64
* @param {string} text 文字内容
* @param {string} fontsize 文字大小
* @param {string} fontColor 文字颜色
* @param {number} lineHeight 行高
*/
textToImg = (text,fontsize = 14,fontColor = "#000",lineHeight = 0)=>{
   
     let maxWidth = 500;
      //每一行最多多少个字符
    let maxNumber = Math.floor(maxWidth/fontsize);

    let texts = text.split("\n");
    let endTexts = [];
    for(let i = 0;i < texts.length; i++){
   
        let str = texts[i];
        if(str.trim().length == 0) continue;
        if(str.length*fontsize > maxWidth) {
   
            while(str.length > 0){
   
                let nowNuber = maxNumber;
                //处理结束符号换行问题
                if(/^(，|。|\?|!|、|:|;)/ig.test(str.substr(nowNuber).trimLeft())) {
   
                    nowNuber += 1;
                }
                endTexts.push(str.substring(0,