LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

Closes #132

Browse source
This commit is contained in:
ポール ウェッブ 2018-09-28 16:59:38 -05:00
parent 7654917466
commit 43db987a7e
3 changed files with 22 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
app/components/client/tour-scripts.js
View file

@ -337,8 +337,8 @@ const handleExamples = debounce(event => {
function initCanvas() { // eslint-disable-line
const canvas = document.getElementById("meme-canvas");
const canvasHeight = 300;
const canvasWidth = 400;
const canvasHeight = 600;
const canvasWidth = 800;
const ctx = canvas.getContext("2d");
const img = document.getElementById("base-image");
@ -346,37 +346,41 @@ function initCanvas() { // eslint-disable-line
ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
ctx.fillStyle = "white";
ctx.font = "bold 28px Karla";
ctx.font = "bold 56px Karla";
ctx.lineJoin = "round";
ctx.lineWidth = 4;
ctx.strokeStyle = "black";
ctx.textAlign = "center";
ctx.textBaseline = "top";
ctx.strokeText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20);
ctx.fillText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20);
positionCanvasText(ctx, canvasHeight, canvasWidth);
}
ctx.strokeText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
ctx.fillText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
function positionCanvasText(canvas, height, width) {
canvas.strokeText(document.getElementById("meme-top-line").value.toUpperCase(), width / 2, 40);
canvas.fillText(document.getElementById("meme-top-line").value.toUpperCase(), width / 2, 40);
canvas.strokeText(document.getElementById("meme-bottom-line").value.toUpperCase(), width / 2, (height - 80));
canvas.fillText(document.getElementById("meme-bottom-line").value.toUpperCase(), width / 2, (height - 80));
}
function updateCanvas(imageSource) {
const canvas = document.getElementById("meme-canvas");
const canvasHeight = 300;
const canvasWidth = 400;
const canvasHeight = 600;
const canvasWidth = 800;
const ctx = canvas.getContext("2d");
const img = document.getElementById("base-image");
clearCanvas(canvas);
if (imageSource) {
ctx.drawImage(imageSource, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
ctx.drawImage(imageSource, 0, 0, canvasWidth, 600 * imageSource.height / imageSource.width);
// ctx.drawImage(imageSource, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
img.src = imageSource.src;
} ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
ctx.strokeText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20);
ctx.fillText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20);
ctx.strokeText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
ctx.fillText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
} else {
ctx.drawImage(imageSource, 0, 0, canvasWidth, 600 * imageSource.height / imageSource.width);
// ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
}
positionCanvasText(ctx, canvasHeight, canvasWidth);
}

1
app/sass/pages/_tour.scss
View file

@ -193,6 +193,7 @@
canvas {
width: 100%; height: 100%;
// width: 400px; height: 300px;
background-color: rgba($teal, 0.3);
margin-bottom: 1rem;

2
app/sockets.js
View file

@ -220,7 +220,7 @@ function generateMemeCreator(socket) {
const memeCreator = html`
<div class="tour__content__meme__canvas">
<img alt="Base image for LBRY meme creator" id="base-image" style="height: 0; position: absolute; visibility: hidden;"/>
<canvas id="meme-canvas" height="300" width="400">Unfortunately, it looks like canvas is <strong>not supported</strong> in your browser</canvas>
<canvas id="meme-canvas" height="600" width="800">Unfortunately, it looks like canvas is <strong>not supported</strong> in your browser</canvas>
${renderedImages}
</div>