问题解决谢谢> <

冰箱研会长e-3M · 发表于 2021-2-1 12:05

本帖最后由冰箱研会长e-3M 于 2021-2-1 14:17 编辑

RT, 我写了一个用canvas渲染文字到图片的网页,
基本功能都写出来了, 也如我所想的输出了图片...

现在只有一个问题, 就是每次触发(input)事件, 渲染图片, 获取本地URL之后,
图像元素本身并不会即时刷新, 需要我手动小刷新(f5, 与之相对的大刷新就是ctrl+f5咯, 自造词2333)
canvas似乎也没有刷新...

我试过用reload方法刷新网页本身, 但文字框里的东西也全都没了,
相当于重新请求了index.html...

我看网上有在图像url后面传参的方法, 但是这些图像是本地连接, 下面这种东西, 这玩意是没法传参的吧...

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABYIAAAGMCAYAAABnKdZ7AAAgAElEQVR4nO3d63KjyLIG0P0kev+35Pzo8Rm1RxegbplZa0U4QtO2ISuroIevEfrfAQAAAABAaf9bXQAAAAAAAGMJggEAAAAAihMEAwAAAAAUJwhmW4/HI9V2V+8Lflh3j

复制代码

虽然也不是不能同, 但每次都需要刷新感觉像给松了的type B口充电一样难受,
想问问泥潭的大佬们有没有好办法

代码:https://github.com/GrandArth/AA-Text_Render

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AA制图器</title>
<style>
input {font-family:MS PGothic;font-size:16px;line-height: 18px;white-space:normal;width:80vw;}
</style>
</head>
<body>
<table>
<tr>
<td>
<textarea rows="5" cols="130" name="text" placeholder="Enter text" id="aaText"></textarea>
<canvas hidden id="aaCanvas"></canvas>
</td>
</tr>
<tr>
<td>
<img id="resultedImage">
</td>
</tr>
</table>
<script>
var aaCanvasContext = document.getElementById('aaCanvas').getContext('2d');
var aaCanvas = aaCanvasContext.canvas;
var textArea = document.getElementById('aaText');
var imageElem = document.getElementById('resultedImage');
var inputText = textArea.value;
var linesOfInputText = inputText.split('\n');
var widthOfEachLines = linesOfInputText.map(function(text){return text.length;});
aaCanvas.globalCompositeOperation = "source-over";
aaCanvas.width = Math.max.apply(null,widthOfEachLines)*8;
aaCanvas.height = linesOfInputText.length*18;
document.getElementById('aaText').addEventListener('input', function (){
imageElem.src = "";
aaCanvasContext.fillStyle = "#FFFFFF";
aaCanvasContext.fillRect(0, 0, aaCanvas.width, aaCanvas.height);
aaCanvasContext.fillStyle = "#1E1E1E";
aaCanvasContext.font="16px MS PGothic";
for(var i = 0; i < linesOfInputText.length; i++)
{
aaCanvasContext.fillText(linesOfInputText[i], 10, 18*(i+1));
imageElem.src = aaCanvas.toDataURL();
console.log(imageElem.src);
}
}, false);
</script>
</body>
</html>

复制代码

maritimus · 发表于 2021-2-1 12:24

如果我没理解错你的意图的话，代码里有别的问题。linesOfInputText不会更新，这样肯定是什么都不渲染的，可以用一下chrome，firefox，edge之类的开发者工具，看一看执行过程。

冰箱研会长e-3M · 发表于 2021-2-1 12:28

maritimus 发表于 2021-2-1 12:24
如果我没理解错你的意图的话，代码里有别的问题。linesOfInputText不会更新，这样肯定是什么都不渲染的，可 ...

啊! 确实!
我完全没注意到...太丢人了

		自动登录	找回密码
密码			立即注册

[软件] 问题解决谢谢> <

评分

[软件] 问题解决 谢谢> <

评分

[软件] 问题解决谢谢> <