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

Canvas in meme creator works

Browse source
This commit is contained in:
ポール ウェッブ 2018-07-24 11:44:32 -05:00
parent 433bc4a27d
commit 41dff8505a
2 changed files with 72 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
views/pages/tour.js
View file

@ -203,10 +203,9 @@ function step2() {
<div class="hook__page__content inner-wrap">
<div class="hook__page__content__meme left">
<img v-bind:src="backgroundImage" id="base-image" style="height: 0; visibility: hidden;" alt="Base image for LBRY meme creator"/>
<img id="base-image" style="height: 0; visibility: hidden;" alt="Base image for LBRY meme creator"/>
<canvas id="meme-canvas" width="400" height="300">Unfortunately, it looks like canvas is <strong>not supported</strong> in your browser</canvas>
<!--/ <img v-for="image in images" v-bind:src="image.src" v-on:click="chooseImage(image.src)" class="hook__page__content__meme__thumbnail" v-bind:class="{'selected': backgroundImage === image.src}" v-bind:alt="image.alt"/> /-->
${renderedImages}
</div>

73
views/partials/tour-scripts.js
View file

@ -3,7 +3,9 @@
$("#fetch-claim-uri").val(""); // reset
detectLanguageAndUpdate();
initCanvas();
@ -36,6 +38,7 @@ $("body").on("click", "[data-action]", event => {
$("#step1-page").hide();
$("#step2-page").show();
$(".hook__page__content__meme__thumbnail").click();
$("#step3-page").hide();
break;
@ -53,6 +56,15 @@ $("body").on("click", "[data-action]", event => {
}
});
$("body").on("click", ".hook__page__content__meme__thumbnail", event => {
$(".hook__page__content__meme__thumbnail").removeClass("selected");
event.currentTarget.className += " selected";
updateCanvas(event.currentTarget);
});
$("#meme-top-line, #meme-bottom-line").on("keyup", () => updateCanvas());
// H E L P E R S
@ -88,7 +100,7 @@ function fetchMetadata(metadataId) {
/**
TODO:
[ ] Style code with highlightjs
[ ] Add copy to explain that the lbry app has to be running in order to follow example
[✓] Add copy to explain that the lbry app has to be running in order to follow example
*/
$("#step1-placeholder").html(`
@ -104,6 +116,63 @@ function fetchMetadata(metadataId) {
$("#step1-selections").hide();
}
send(JSON.stringify({
function clearCanvas(canvas) {
const ctx = canvas.getContext("2d");
ctx.save();
ctx.globalCompositeOperation = "copy";
ctx.strokeStyle = "transparent";
ctx.beginPath();
ctx.lineTo(0, 0);
ctx.stroke();
ctx.restore();
}
function initCanvas() {
const canvas = document.getElementById("meme-canvas");
const canvasWidth = 400;
const canvasHeight = 300;
const ctx = canvas.getContext("2d");
const img = document.getElementById("base-image");
clearCanvas(canvas);
ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
ctx.fillStyle = "white";
ctx.font = "bold 28px Karla";
ctx.lineJoin = "round";
ctx.lineWidth = 4;
ctx.strokeStyle = "black";
ctx.textAlign = "center";
ctx.textBaseline = "top";
ctx.strokeText($("#meme-top-line").val().toUpperCase(), canvasWidth / 2, 20);
ctx.strokeText($("#meme-bottom-line").val().toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
ctx.fillText($("#meme-top-line").val().toUpperCase(), canvasWidth / 2, 20);
ctx.fillText($("#meme-bottom-line").val().toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
}
function updateCanvas(imageSource) {
const canvas = document.getElementById("meme-canvas");
const canvasWidth = 400;
const canvasHeight = 300;
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);
img.src = imageSource.src;
} ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
ctx.strokeText($("#meme-top-line").val().toUpperCase(), canvasWidth / 2, 20);
ctx.strokeText($("#meme-bottom-line").val().toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
ctx.fillText($("#meme-top-line").val().toUpperCase(), canvasWidth / 2, 20);
ctx.fillText($("#meme-bottom-line").val().toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
}
send(JSON.stringify({ // TODO: Remove this
"message": "Landed on Tour"
}));