Skip to content

git第一次测试
git第一次测试

cc百川 / git第一次测试

通知 5
Star 1
Fork 1
git第一次测试
git第一次测试

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
js文字转图片.html 9.0 KB
Newer Older
1
Add File  
17360059320 已提交
1 2 3 4 5 
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
C
测试一次修改  
cc百川 已提交
6 
		<title>test</title>
1
Add File  
17360059320 已提交
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 
	</head>
	<body>
        <label>文字内容：</label><input id="text" type="text" />
        <button type="button" title="点击后文字将转为图片" onclick="textToImage()">文字转图片</button> <br/>
        <img src="" id="show" title="文字转图片"/><br/>
        <label>本地图片：</label>
        <input onchange="localFile('localFileShow')" id="localFile" type="file" accept="image/*" /*多选multiple="multiple"*/>
        <img src="" id="localFileShow"/>
        <br/>
        <label>水印内容：</label><input id="waterContent" type="text" value="cc百川"/>
        <label>旋转角度：</label><input id="waterRotate" type="number" value="45" max="60" min="0"/>
        <button type="button" title="图片添加水印" onclick="addWaterMark('show')">添加水印</button> 
        <button type="button" title="图片添加水印" onclick="addWaterMark('localFileShow')">图片添加水印</button> <br/>

        <img src="" id="waterMark" title="图片添加水印"/>
        <button type="button" title="保存到本地" onclick="saveHtml('waterMark')">水印图片保存到本地</button> 
     </body>
     <script type="text/javascript">
         textToImage=()=>{
            let text = document.getElementById("text").value;//文字
            if(text.trim().length == 0) {
                text = "《无衣》\n岂曰无衣？与子同袍。\n王于兴师，修我戈矛，与子同仇！\n岂曰无衣？与子同泽。\n王于兴师，修我矛戟，与子偕作！\n岂曰无衣？与子同裳。\n王于兴师，修我甲兵，与子偕行！\n"+
                "《子衿》\n青青子衿，悠悠我心。纵我不往，子宁不嗣音？\n青青子佩，悠悠我思。纵我不往，子宁不来？\n挑兮达兮，在城阙兮。一日不见，如三月兮。";
            }
           
            if(text.trim().length > 0) {
                let imgsrc =  textToImg(text, 20, "#000");
                document.getElementById("show").src = imgsrc;
                //需要先渲染到dom节点后才能继续处理 

                //宏任务
                window.setTimeout(() => {
                    this.addWaterMark('show')
                }, 0)
               
            } else {
                alert("内容为空！")
            }
        } 

        /**
        * 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, nowNuber));
                        str = str.substr(nowNuber).trimLeft();
                    }
                }else {
                    endTexts.push(str);
                }
            }
            let maxHeight = (fontsize + lineHeight) * ((endTexts.length || 1) + 1) ;

            let canvas = document.createElement('canvas'); //创建canvas画布
            canvas.height = maxHeight;//设置高度
            canvas.width = maxWidth;//设置宽度
            let ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, maxWidth, maxHeight);
 
            ctx.fillStyle = fontColor;
            ctx.font = fontsize + "px Arial";
            //top（顶部对齐） hanging（悬挂） middle（中间对齐） bottom（底部对齐） alphabetic是默认值
            ctx.textBaseline = 'middle';
            for(let i = 0; i < endTexts.length; i++) {
                let lineText = endTexts[i];
                ctx.fillText(lineText, 0, (fontsize + lineHeight) * (i + 1), canvas.width);
            }
            return  canvas.toDataURL('image/png');
        }

        /**
        * js使用canvas给图片添加水印
        * @param {string} imageId 图片所在img的id
        * @param {string} waterContent 水印内容
        * @param {map} otherparams 水印参数
        */
        addWaterMark=(imageId = "", 
            waterContent= document.getElementById("waterContent").value,
            otherparams = {
                rotate:document.getElementById("waterRotate").value || 0, 
                fillStyle:"#f00", 
                fontSize:14, 
                waterLineSpaceing:20, 
                waterPadding:20}
            )=>{
            if(!!imageId) {
                let imgeEle = document.getElementById(imageId);
                let imageSrc = imgeEle.src;
                if(imageSrc) { 
                    //创建图片对象
                    let img = new Image();
                    img.src = imageSrc;
                    let imgWidth = img.width, imgHeight = img.height;
                     //创建canvas画布
                    let canvas = document.createElement('canvas'); 
                    canvas.height = imgHeight;//设置高度
                    canvas.width = imgWidth;//设置宽度
                    let ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0);//图片插入画布
                    ctx.font = otherparams.fontSize+"px 微软雅黑";
                    ctx.rotate(otherparams.rotate * Math.PI / 180);//围绕（0，0）旋转
                    ctx.fillStyle = otherparams.fillStyle;
                    //水印总长度
                    let waterLength = waterContent.length * otherparams.fontSize;
                    //旋转后的宽度
                    let rWaterWidth = Math.cos((otherparams.rotate * Math.PI) / 180) * waterLength;
                    //旋转后的高度
                    let rWaterHeight = Math.sin((otherparams.rotate * Math.PI) / 180) * waterLength + (otherparams.waterLineSpaceing || 0);
                    //水印列数
                    let waterColNumber = Math.floor(imgWidth / (rWaterWidth || imgWidth));
                    //水印行数
                    let waterRowNumber =  Math.ceil(imgHeight / (rWaterHeight || imgHeight));
                    for(let col = 0 ; col < waterColNumber ; col++){
                        //计算减去偏移量
                        let x =  (rWaterWidth * col + Math.sin((otherparams.rotate * Math.PI) / 180) * otherparams.fontSize).toFixed();
                         for(let row = 0 ; row < waterRowNumber ; row++) {
                            //计算减去偏移量、 
                            let y = (row * rWaterHeight + otherparams.fontSize - Math.sin((otherparams.rotate * Math.PI) / 180) * waterLength * col).toFixed();
                            ctx.fillText(waterContent, x, y); //选择位置
                        }
                    }
                    document.getElementById("waterMark").src = canvas.toDataURL('image/png', 0.5);
                }                    
            } else {
                console.error("参数异常imageId=" + imageId)
            }
        }

        localFile=(imageid)=>{
            let files = document.getElementById("localFile");
            let file = files.files[0];
            let urlObject = window.URL || window.webkitURL || window;
            //宏任务
            window.setTimeout(() => {
                document.getElementById(imageid).src=urlObject.createObjectURL(new Blob([file]));             
            }, 0);
        }
 
        /* 保存最终html */
        saveHtml=(imageid)=>{         
            let save_link = document.createElement("a");					
            //返回一个url URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
            save_link.href = document.getElementById(imageid).src;
            save_link.download = "水印内容";//下载后的名称 
            triggerEvent(save_link, "click");
        }
        /* 给定的对象上面，模拟事件 */
        triggerEvent=(obj, type="click")=>{
            let ev = document.createEvent("MouseEvents");
            ev.initMouseEvent( type, true, false, window, 0, 0, 0, 0, 0 , false, false, false, false, 0, null );
            obj.dispatchEvent(ev);
        }
    </script>
</html>