0
キャンバスで写真のフォントサイズと色を変更しようとしています。そのため、画像にテキストを追加する前に写真をアップロードする必要があります。写真を追加してテキストを追加した後、色とフォントを変更することができますが、再作成する必要がある場合、変更を適用しないでください。何が起こっているかについてのアイデアは？色やフォントサイズを変更したときに再描画する必要がありますか？前もって感謝します。キャンバスのフォントサイズと色を変更しようとすると問題が発生する
HTML：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="theText" type="text">
<button id="submit">Draw text on canvas</button>
<br>
<canvas id="canvas" width="1000" height="500" class="playable-canvas"></canvas>
<div id="image_div">
<h1> Choose an Image to Upload </h1>
<input type='file' name='img' id='uploadimage' />
</div>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.filter = 'blur(0px)';
</textarea>
<!-- Change Font Size -->
<div class="radio">
<input type="radio" name="radio" id="size16" onclick="size16()" checked="">
<label for="size16"> Font Size 16 </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="size20" onclick="size20()" >
<label for="size20"> Font Size 20 </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="size25" onclick="size25()" >
<label for="size25"> Font Size 25 </label>
</div>
<div class="radio">
<input type="radio" name="radio"id="size30" onclick="size30()" >
<label for="size30"> Font Size 30</label>
</div>
<div class="radio">
<input type="radio" name="radio" id="size35" onclick="size35()" >
<label for="size35"> Font Size 35 </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="size40" onclick="size40()" >
<label for="size40"> Font Size 40 </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="size45" onclick="siz45()" >
<label for="size45"> Font Size 45 </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="size50" onclick="size50()" >
<label for="size50"> Font Size 50 </label>
</div>
<Br>
<!-- Change Color on Text -->
<div class="col-lg-2 col-md-2 col-xs-12">
<div class="radio">
<input type="radio" name="radio" id="black" onclick="BlackText()" checked="">
<label for="radio1"> Black </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="white" onclick="WhiteText()" >
<label for="radio1"> White </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="yellow" onclick="YellowText()" >
<label for="radio1"> Yellow </label>
</div>
<div class="radio radio-primary">
<input type="radio" name="radio" id="blue" onclick="BlueText()" >
<label for="radio3"> Blue </label>
</div>
<div class="radio radio-success">
<input type="radio" name="radio" id="green" onclick="GreenText()" >
<label for="radio4"> Green </label>
</div>
<div class="radio radio-danger">
<input type="radio" name="radio"id="red" onclick="RedText()" >
<label for="radio6"> Red </label>
</div>
<div class="radio radio-warning">
<input type="radio" name="radio" id="orange" onclick="OrangeText()" >
<label for="radio7"> Orange </label>
</div>
<div class="radio radio-purple">
<input type="radio" name="radio"id="purple" onclick="PurpleText()" >
<label for="radio8"> Purple </label>
</div>
</div>
Javscript：
//===========================================================================================================================
// Javascript that loads Image into canvas
//===========================================================================================================================
var drawnImage;
function drawImage(ev) {
console.log(ev);
var ctx = document.getElementById('canvas').getContext('2d'),
img = new Image(),
f = document.getElementById("uploadimage").files[0],
url = window.URL || window.webkitURL,
src = url.createObjectURL(f);
img.src = src;
img.onload = function() {
drawnImage = img;
ctx.drawImage(img, 0, 0);
url.revokeObjectURL(src);
}
}
document.getElementById("uploadimage").addEventListener("change", drawImage, false);
//===========================================================================================================================
// Javascript for input in textbox
//===========================================================================================================================
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
drawImage();
}
reset.addEventListener('click', function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener('click', function() {
textarea.focus();
})
textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);
//===========================================================================================================================
// Javascript for Moving Text around.
//===========================================================================================================================
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
var startX;
var startY;
var texts = [];
var selectedText = -1;
function draw() {
ctx.rect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < texts.length; i++) {
var text = texts[i];
// ctx.fillStyle = "blue";
ctx.fillText(text.text, text.x, text.y);
}
}
function redraw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(drawnImage, 0, 0);
draw();
}
function textHittest(x, y, textIndex) {
var text = texts[textIndex];
return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
}
function handleMouseDown(e) {
e.preventDefault();
startX = parseInt(e.clientX - offsetX);
startY = parseInt(e.clientY - offsetY);
for (var i = 0; i < texts.length; i++) {
if (textHittest(startX, startY, i)) {
selectedText = i;
}
}
}
function handleMouseUp(e) {
e.preventDefault();
selectedText = -1;
}
function handleMouseOut(e) {
e.preventDefault();
selectedText = -1;
}
function handleMouseMove(e) {
if (selectedText < 0) {
return;
}
e.preventDefault();
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
var dx = mouseX - startX;
var dy = mouseY - startY;
startX = mouseX;
startY = mouseY;
var text = texts[selectedText];
text.x += dx;
text.y += dy;
redraw();
}
$("#canvas").mousedown(function(e) {
handleMouseDown(e);
});
$("#canvas").mousemove(function(e) {
handleMouseMove(e);
});
$("#canvas").mouseup(function(e) {
handleMouseUp(e);
});
$("#canvas").mouseout(function(e) {
handleMouseOut(e);
});
$("#submit").click(function() {
var y = texts.length * 20 + 20;
var text = {
text: $("#theText").val(),
x: 20,
y: y
};
// ctx.font = "16px verdana";
text.width = ctx.measureText(text.text).width;
text.height = 16;
texts.push(text);
draw();
});
//===========================================================================================================================
// Javascript for Text Size :)
//===========================================================================================================================
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function size16() {
ctx.font = "16px verdana";
}
function size20() {
ctx.font = "20px verdana";
}
function size25() {
ctx.font = "25px verdana";
}
function size30() {
ctx.font = "30px verdana";
}
function size35() {
ctx.font = "35px verdana";
}
function size40() {
ctx.font = "40px verdana";
}
function size45() {
ctx.font = "45px verdana";
}
function size50() {
ctx.font = "50px verdana";
}
//===========================================================================================================================
// Javascript for Drop down for Text Color :)
//===========================================================================================================================
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function PurpleText() {
ctx.fillStyle= 'purple';
}
function BlackText() {
ctx.fillStyle= 'black';
}
function YellowText() {
ctx.fillStyle= 'yellow';
}
function OrangeText() {
ctx.fillStyle = "orange";
}
function BlueText() {
ctx.fillStyle= 'blue';
}
function WhiteText() {
ctx.fillStyle = "white";
}
function GreenText() {
ctx.fillStyle= 'green';
}
function RedText() {
ctx.fillStyle = "red";
}