my code runs first perfectly but now not anymore.
its a welcome card for a discord server.
here's how it should have looked:
https://imgur.com/GEcULY5.png
and here's how it looks now:
https://imgur.com/cHLr2Bi.png
here is the code:
client.on("guildMemberAdd",async member => {
var name = member.displayName
var id = member.id
var membercount = member.guild.memberCount
var displayAvatarURL = member.user.displayAvatarURL({format:"jpg"})
var joinimage = Canvas.createCanvas(2000,1000)
var ctx = joinimage.getContext("2d")
var background = await Canvas.loadImage("./background.png")
ctx.drawImage(background,0,0,2000,1000)
ctx.textAlign = "center"
ctx.font = '120px Arial';
ctx.fillStyle = '#ffffff';
ctx.fillText("welkom",1400,400)
ctx.fillText(name,1400,550)
ctx.font = '60px Arial';
ctx.fillText(("Maak veel plezier in PixelKingdoms!"),1400,750)
const avatar = await Canvas.loadImage(displayAvatarURL)
ctx.beginPath();
ctx.arc(500, 500, 300, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(avatar, 200, 200, 600, 600);
ctx.lineWidth = 20;
ctx.strokeStyle = "white";
ctx.stroke();
ctx.closePath()
const attachment = new discord.MessageAttachment(joinimage.toBuffer(), 'welcome-image.png');
member.guild.channels.cache.get("873169519881900033").send("Hey <#"+id+">Welkom in **"+member.guild.name+"**!",attachment)
var fanrole = member.guild.roles.cache.get("873163741276033084")
member.roles.add(fanrole)
})```
(sorry for bad english)
Related
I am using pdf-lib to capture and html2canvas, but when the page is captured, Button labels, they go wrong. "Buy Again" becomes "BuyA Gain".
Also when I scroll the page, the page captured gets cut, when it should not because it is being captured on the basis of elementID
const onClickPrint = () => {
const domElement = document.getElementById(elementId);
var printButton = document.getElementById("printIcon");
printButton.style.visibility = "hidden";
var downloadButton;
try {
downloadButton = document.getElementById("downloadIcon");
downloadButton.style.visibility = "hidden";
} catch (e) { }
html2canvas(domElement).then((canvas) => {
(async () => {
const pdfDoc = await PDFDocument.create();
const imagePDF = await pdfDoc.embedPng(canvas.toDataURL("image/PNG"));
let height = imagePDF.height;
let width = imagePDF.width;
const page = pdfDoc.addPage([A4_PAGE.width, A4_PAGE.height]);
let widthRatio = A4_PAGE.width / width;
let heightRatio = A4_PAGE.height / height;
let ratio = widthRatio > heightRatio ? heightRatio : widthRatio;
page.drawImage(imagePDF, {
x: A4_PAGE.width / 2 - (width * ratio) / 2,
y: A4_PAGE.height / 2 - (height * ratio) / 2,
width: width * ratio,
height: height * ratio,
});
const pdfBytes = await pdfDoc.save();
const blob = new Blob([pdfBytes], { type: "application/pdf" });
openPrintDialog(blob);
})();
});
printButton.style.visibility = "visible";
if (downloadButton != null) {
downloadButton.style.visibility = "visible";
}
};
I'm looking for a clean way to convert a SVG to PNG and download, in Vue 2. What is the best approach ?
I finally managed to come up with this solution:
save() {
const a = document.querySelector("a");
const triggerDownload = (imgURI: string) => {
const evt = new MouseEvent("click", {
view: window,
bubbles: false,
cancelable: true,
});
a?.setAttribute("download", "FileName.png");
a?.setAttribute("href", imgURI);
a?.setAttribute("target", "_blank");
a?.dispatchEvent(evt);
};
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d");
data = new XMLSerializer().serializeToString(
document.getElementById("svgId") as Node
);
const DOMURL = window.URL || window.webkitURL || window;
const img = new Image();
const svgBlob = new Blob([data], { type: "image/svg+xml;charset=utf-8" });
const url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx?.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
const imgURI = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream");
triggerDownload(imgURI);
ctx?.clearRect(0, 0, canvas.width, canvas.height);
};
img.src = url;
},
The code shown below is from this post. It works fine when using fabric.js/1.4.0, but when I update fabric.js to 2.4.3, it fails to run. The issue is that the clipTo funtion has been replaced by a new function called clipPath. Does anyone know how to update this code so it works with clipPath? I've gone through the docs for clipPath and have been searching Google and Stackoverflow for almost 2 days, but I'm still lost.
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');
img.onload = function() {
var OwnCanv = new fabric.Canvas('c', {
isDrawingMode: true
});
var imgInstance = new fabric.Image(img, {
left: 0,
top: 0,
});
OwnCanv.add(imgInstance);
OwnCanv.freeDrawingBrush.color = "purple"
OwnCanv.freeDrawingBrush.width = 4
OwnCanv.on('path:created', function(options) {
var path = options.path;
OwnCanv.isDrawingMode = false;
OwnCanv.remove(imgInstance);
OwnCanv.remove(path);
OwnCanv.clipTo = function(ctx) {
path.render(ctx);
};
OwnCanv.add(imgInstance);
});
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/3/33/Jbassette4.jpg?uselang=fi";
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="c" width="500" height="500"></canvas>
Ok, so the path, right after being created is already cached.
What you need to do is set the fill to a color that is not null, using the 'set' method.
Then set the path as clipPath for the canvas, or the Object itself.
If you want to set it just for the object, you need to recalculate its correct position.
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');
img.onload = function() {
var OwnCanv = new fabric.Canvas('c', {
isDrawingMode: true
});
var imgInstance = new fabric.Image(img, {
left: 0,
top: 0,
});
OwnCanv.add(imgInstance);
OwnCanv.controlsAboveOverlay = true;
OwnCanv.freeDrawingBrush.color = "purple"
OwnCanv.freeDrawingBrush.width = 4
OwnCanv.on('path:created', function(options) {
var path = options.path;
path.set('fill', 'black');
console.log(path)
OwnCanv.isDrawingMode = false;
OwnCanv.remove(path);
OwnCanv.clipPath = path;
});
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/3/33/Jbassette4.jpg?uselang=fi";
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>
<canvas id="c" width="500" height="500"></canvas>
You need to have objectCaching on false on the path.
Check here:https://jsfiddle.net/jw6rLx5f/2/
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');
img.onload = function() {
var OwnCanv = new fabric.Canvas('c', {
isDrawingMode: true
});
var imgInstance = new fabric.Image(img, {
left: 0,
top: 0,
});
OwnCanv.add(imgInstance);
OwnCanv.freeDrawingBrush.color = "purple"
OwnCanv.freeDrawingBrush.width = 4
OwnCanv.on('path:created', function(options) {
var path = options.path;
path.objectCaching= false;
OwnCanv.isDrawingMode = false;
OwnCanv.remove(imgInstance);
OwnCanv.remove(path);
OwnCanv.clipTo = function(ctx) {
ctx.save();
path.render(ctx);
ctx.restore();
};
OwnCanv.add(imgInstance);
});
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/3/33/Jbassette4.jpg?uselang=fi";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
<canvas id="c" width="500" height="500"></canvas>
I am trying to write on image with hindi language. I am using node-canvas library. There is some problem with my output. Can someone help me ?
const { createCanvas, loadImage, registerFont} = require('canvas')
const canvas = createCanvas(400, 400)
const ctx = canvas.getContext('2d')
var str= "यह. मिसिसिपी है";
console.log(str);
loadImage('missisippi.jpg').then((image) => {
console.log(image);
ctx.drawImage(image, 0 , 0, 400, 400);
ctx.fillText(str,100,40);
var body = canvas.toDataURL(),
base64Data = body.replace(/^data:image\/png;base64,/,""),
binaryData = new Buffer(base64Data, 'base64').toString('binary');
require("fs").writeFile("out.png", binaryData, "binary", function(err) {
console.log(err); // writes out file without error, but it's not a valid image
})
// console.log('<img src="' + canvas.toDataURL() + '" />')
})
This is the output image . You can see that मिसिसिपी is grammatically wrong. (In case u are familiar with Hindi.
I have also tried the very same thing with npm-gm. in that too I faced same issue. Can someone help me out in this issue ?
How can I write text on image with custom font ?
The following is working fine for me -
var fs = require('fs')
var path = require('path')
var Canvas = require('canvas')
function fontFile (name) {
return path.join(__dirname, '/fonts/', name)
}
Canvas.registerFont(fontFile('ARBLI___0.ttf'), {family: 'ARBLI___0'})
var canvas = Canvas.createCanvas(7100, 3500)
var ctx = canvas.getContext('2d')
var Image = Canvas.Image;
var img = new Image();
img.src = 'input/DOIT_Art_Size.jpg';
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.textAlign = 'center';
ctx.font = '150pt ARBLI___0'
ctx.fillText('यह मिसिसिपी है',3900, 1700)
canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'output/font.png')))
canvas.createJPEGStream().pipe(fs.createWriteStream(path.join(__dirname, 'output/font.jpg')))
My node version is 6.11.2.
Canvas module is 2.0.0-alpha.16.
My input image dimension is 7100*3500 pixels.
I use pixi.js v 3.0.0
My simple code is
(function () {
document.addEventListener('DOMContentLoaded', function () {
var width = screen.availWidth;
var height = screen.availHeight;
var renderer = PIXI.CanvasRenderer(width, height, {
backgroundColor : 0x1099bb
});
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
var texture = PIXI.Texture.fromImage('asset/bunny.png');
var bunny = new PIXI.Sprite(texture);
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
bunny.position.x = 200;
bunny.position.y = 150;
stage.addChild(bunny);
animate();
function animate() {
requestAnimationFrame(animate);
bunny.rotation += 0.1;
renderer.render(stage);
}
}, false);
}
());
But i get: TypeError: this.initPlugins is not a function if use CanvasRenderer but it works in other cases
Just add new keyword when creating the CanvasRenderer.