【发布时间】：2021-06-11 04:00:47
【问题描述】：
所以我有了这个简单的图像编辑器，我在其中使用画布绘制用户选择的图像和一些文本。也就是说，用户可以上传一张图片，然后如果他们愿意，他们可以添加文字或者只是改变图片的渐变。
目前该应用程序运行良好，除了有一个问题。
如何找到问题？执行以下操作：
- 上传随机图片。
- 在输入字段中输入内容。
- 上传并更改图片。
你会看到文字消失了。
这是代码：
const canvasTxt = window.canvasTxt.default;
const canvas = document.getElementById('canvas');
const ctx = canvas?.getContext('2d');
const btnDownload = document.querySelector('.btnDownload');
const fileUpload = document.querySelector('.file-upload');
const text1 = document.getElementById('text1');
const textForm1 = document.getElementById('text1-form');
const text2 = document.getElementById('text2');
const textForm2 = document.getElementById('text2-form');
const text2ShadowColor = document.getElementById('text2shadowcolor');
const text2ShadowOffsetY = document.getElementById('text2shadowoffy');
const imageForm = document.getElementById('image-form');
const imageGrad = document.getElementById('gradientcolor');
const imageGradOpacity = document.getElementById('gradientopacity');
$(fileUpload).on('change', function(e) {
let imgObj = new Image();
imgObj.onload = draw;
imgObj.onerror = failed;
imgObj.src = URL.createObjectURL(this.files[0]);
imgManipulation( e, imgObj );
});
const imgManipulation = ( e, imgObj ) => {
$(textForm1).on('change keyup input', updateCanvas);
$(textForm2).on('change keyup input', updateCanvas);
$(imageForm).on('change keyup input', updateCanvas);
function updateCanvas(e) {
e.preventDefault();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(imgObj, 0, 0);
createGradient($(imageGrad).val(), $(imageGradOpacity).val());
// TEXT1 STYLES based on user input
canvasTxt.fontSize = 70;
ctx.fillStyle = "white";
canvasTxt.drawText(
ctx,
$(text1).val(),
0,
0,
200,
200
);
// TEXT2 STYLES
canvasTxt.font = 50;
ctx.fillStyle = "white";
canvasTxt.drawText(
ctx,
$(text2).val(),
20,
20,
200,
200
);
}
};
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
};
function createGradient(hex, alpha) {
const r = hexToRgb(hex).r.toString();
const g = hexToRgb(hex).g.toString();
const b = hexToRgb(hex).b.toString();
var gradient = ctx.createLinearGradient(800, 0, 0, 0);
gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, ${alpha})`);
ctx.save() // <----------- ADD
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.restore() // <----------- ADD
};
function draw() {
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
const nw = this.naturalWidth;
const nh = this.naturalHeight;
ctx.drawImage(this, 0, 0, nw, nh);
};
function failed() {
console.error("The provided file couldn't be loaded as an Image media");
};
$(btnDownload).on('click', function(e) {
const a = document.createElement('a');
document.body.appendChild(a);
a.href = canvas.toDataURL();
a.download = "canvas-image.png";
a.click();
document.body.removeChild(a);
}); #canvas{
background-color: transparent;
width: 30%;
height: auto;
border: 1px solid #777;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/canvas-txt@3.0.0/build/index.js"></script>
<canvas id="canvas" width="800" height="500"></canvas>
<div>
<input type="file" class="file-upload" />
<button class="btnDownload">Download</button>
</div>
<div>
<form id="text1-form">
<input type="text" id="text1" placeholder="text 1"/>
</form>
</div>
<div>
<form id="text2-form">
<input type="text" id="text2" placeholder="text 2"/>
</form>
</div>
<div>
<h2>Image Gradient and Opacity</h2>
<form id="image-form">
<input type="color" id="gradientcolor" value="#000000" />
<input type="range" id="gradientopacity" min="0" max="1" value="0" step="0.05" />
</form>
</div>
<div>
<h2>Text2 Shadow Offset X</h2>
<input type="color" id="text2shadowcolor" value="#000000" />
<input type="range" id="text2shadowoffy" min="0" max="40" value="0" />
</div>代码概要：
1：首先我有 fileUpload 事件监听器。它从用户那里获取图像并创建一个图像对象并将其绘制在画布上。然后以 imgObj 和 event 作为参数调用 imgManipulation 函数。
imgManipulation 函数从文本的输入事件侦听器开始。也就是说，只要输入发生变化，即用户写了一些东西，就会调用 updateCanvas 函数。
updateCanvas 函数实际上是在图像上绘制文本。我正在使用一个名为 canvasTxt 的包，它可以帮助文本变为多行。
更改图像后，如果用户在先前输入用户文本的输入字段上写一个字母，文本就会神奇地出现。
如何在不删除用户输入的文本的情况下更改图像？
我们将非常感谢您的帮助。
提前致谢
【问题讨论】：
标签： javascript jquery css canvas html5-canvas